Webflow

Le Form Block de Webflow peut envoyer vers n'importe quelle URL. Faites pointer son action vers votre endpoint Ikiform : le formulaire garde la mise en page et les styles créés dans le Designer, tandis qu'Ikiform valide, filtre le spam, stocke, envoie les e-mails et les webhooks.

Ce que change une action personnalisée

• Webflow ne traite un formulaire que s'il en est la destination. Avec une action personnalisée, le navigateur envoie directement à Ikiform : la soumission n'apparaît donc pas dans les soumissions de formulaire de Webflow, et Webflow n'envoie aucun e-mail de notification.
• Les destinations propres à Webflow ne peuvent pas coexister avec une action personnalisée. Retirez-les sous Send to avant d'ajouter Ikiform.
• Les blocs de succès et d'erreur de Webflow (.w-form-done et .w-form-fail) et le réglage de redirection du formulaire cessent de fonctionner, car Webflow ne voit jamais le résultat. Les visiteurs arrivent sur la page de remerciement d'Ikiform ou sur votre URL Redirect after submit. L'étape 4 rétablit les blocs de Webflow.

Configurez le formulaire

1. Faites pointer le formulaire vers Ikiform

   Sélectionnez le formulaire dans le Form Block et ouvrez le panneau Settings. Sous Send to, choisissez une action personnalisée, collez votre endpoint dans Action et réglez Method sur POST.

   https://ikiform.com/f/frm_xxxxxxxxxxxxxxxx

   Si la méthode reste sur GET, le navigateur ouvre l'endpoint comme une page, qui répond 404 not_found. Ikiform n'accepte que des POST.

2. Nommez les champs

   Le réglage Name de chaque input devient le nom du champ dans Ikiform. Webflow le remplit à partir du libellé, ce qui donne des noms comme Name, Email et Field 2. Renommez-les avec les ids que vous voulez voir, comme name, email et message.

   • Si vous définissez des champs sur le formulaire Ikiform, les noms doivent correspondre exactement à leurs ids. Les ids sont en snake_case minuscule, donc Email et email sont deux champs différents.
   • Retirez tout élément reCAPTCHA du formulaire. Ikiform ne le vérifie pas, et sa valeur g-recaptcha-response arriverait comme un champ supplémentaire. Utilisez plutôt le contrôle anti-spam d'Ikiform.

3. Ajoutez un honeypot

   Ajoutez un Input au formulaire, réglez son Name sur _gotcha et masquez-le avec Display: none dans le panneau Style. Dans Custom attributes, ajoutez tabindex à -1 et autocomplete à off pour que le clavier et les gestionnaires de mots de passe l'ignorent. Avec un site plan payant, vous pouvez plutôt coller ceci dans un Code Embed à l'intérieur du formulaire :

   <input name="_gotcha" type="text" tabindex="-1" autocomplete="off" hidden />

4. Choisissez ce qui se passe après l'envoi

   L'option la plus simple est une page de remerciement. Créez-en une dans Webflow, publiez-la et collez son URL complète dans Redirect after submit, dans les paramètres du formulaire Ikiform.

   Gardez les blocs de succès et d'erreur de Webflow

   Pour rester sur la page, envoyez avec fetch et affichez vous-même les blocs de Webflow. Collez ceci dans Page settings > Custom code > Before </body> tag, ou dans le code de pied de page du site pour couvrir tous les formulaires. Le script affiche le message d'erreur d'Ikiform dans le bloc d'erreur et utilise le Waiting text du bouton pendant l'envoi.

   <script>
     document.querySelectorAll('form[action^="https://ikiform.com/f/"]').forEach((form) => {
       const wrapper = form.closest(".w-form");
       const done = wrapper?.querySelector(".w-form-done");
       const fail = wrapper?.querySelector(".w-form-fail");
       const button = form.querySelector('[type="submit"]');
   
       form.addEventListener("submit", async (event) => {
         event.preventDefault();
         const label = button?.value;
         if (button) {
           button.disabled = true;
           button.value = button.dataset.wait || label;
         }
         try {
           const response = await fetch(form.action, {
             method: "POST",
             headers: { Accept: "application/json" },
             body: new FormData(form),
           });
           const result = await response.json();
           if (result.ok) {
             form.style.display = "none";
             if (fail) fail.style.display = "none";
             if (done) done.style.display = "block";
             return;
           }
           const text = fail?.querySelector("div") ?? fail;
           if (text) text.textContent = result.error.message;
           if (fail) fail.style.display = "block";
         } catch {
           if (fail) fail.style.display = "block";
         } finally {
           if (button) {
             button.disabled = false;
             button.value = label;
           }
         }
       });
     });
   </script>

   Le code personnalisé et l'élément Code Embed nécessitent un site plan payant ou un Workspace plan, et aucun des deux ne s'exécute dans le Designer. Publiez pour les voir fonctionner.

Le script envoie avec fetch, donc un formulaire dont le contrôle anti-spam est réglé sur Ikiform répond 403 challenge_required au lieu d'afficher la page de vérification. Utilisez le script avec la vérification désactivée, ou passez-vous du script et laissez le navigateur envoyer normalement, ce qui exécute la vérification sans code supplémentaire.

Domaines autorisés

Si vous définissez des domaines autorisés, listez chaque adresse où le formulaire est publié. Les sous-domaines d'un domaine listé correspondent déjà.

• N'ajoutez jamais webflow.io seul. Tous les sites de cet hébergeur correspondraient, y compris ceux des autres.

Checklist de test

1. Publiez sur votre domaine de staging webflow.io. Les formulaires avec une action personnalisée n'envoient que depuis le site publié.
2. Envoyez le formulaire et ouvrez ses soumissions dans Ikiform. La nouvelle soumission doit apparaître parmi les reçues, pas dans le spam.
3. Vérifiez que les noms de champs correspondent à ceux de l'étape 2, et que le honeypot n'apparaît pas : les noms commençant par _ ne sont jamais stockés.
4. Vérifiez que vous arrivez sur votre page de remerciement, ou que vous voyez le bloc de succès de Webflow si vous avez ajouté le script.
5. Publiez sur votre domaine personnalisé et envoyez encore une fois depuis celui-ci.

Dépannage

Voir aussi

• Créateurs de sitesL'intégration qui fonctionne dans n'importe quel créateur de sites.
• Formulaires HTMLRedirections, champs réservés et honeypot.
• Domaines autorisésComment les origines sont comparées, et ce qui se passe en cas de non-correspondance.
• ErreursChaque code d'erreur, avec sa cause et sa solution.