Comment ajouter un formulaire de liste d'attente à un site Webflow

Gardez le Form Block conçu dans Webflow et remplacez son action par votre endpoint Ikiform avec la méthode POST. Ajoutez un input masqué ref et un honeypot dans un Code Embed, puis collez un script à l'échelle du site qui envoie chaque formulaire de liste d'attente avec fetch, remplit ref à partir du lien et affiche le bloc de succès de Webflow avec l'e-mail de la personne.

Webflow excelle pour la page et se débrouille pour le formulaire. Sa gestion native des formulaires stocke les soumissions et vous prévient par e-mail, mais plafonne le nombre conservé selon l'offre du site et ne peut pas taguer une inscription avec la campagne d'origine. Une action personnalisée règle les deux sans quitter le Designer.

Ce qui change sur Webflow

• Une action personnalisée retire le formulaire à Webflow. Le navigateur envoie directement à Ikiform, Webflow ne voit donc jamais l'inscription : elle n'est pas dans les soumissions de formulaire de Webflow, Webflow n'envoie aucun e-mail, et elle n'entame pas le quota de formulaires de votre offre.
• Les blocs de succès et d'erreur de Webflow cessent de fonctionner. Ils n'apparaissent que lorsque Webflow a traité l'envoi. Sans script, les visiteurs arrivent sur la page de remerciement d'Ikiform ou sur votre URL Redirect after submit.
• Il n'y a pas d'élément d'input masqué. Les champs masqués et le honeypot se placent dans un Code Embed à l'intérieur du formulaire, ce qui exige une offre de site payante, comme le code personnalisé.
• Rien ne s'exécute dans le Designer. Les actions personnalisées et les scripts ne fonctionnent que sur le site publié : testez donc sur votre domaine de préproduction webflow.io.

Configurer le Form Block

1. Sélectionnez le formulaire et ouvrez Settings. Retirez Webflow et Email notifications sous Send to, puis ajoutez Custom action, saisissez https://ikiform.com/f/frm_xxxxxxxxxxxxxxxx, choisissez POST et enregistrez.
2. Sélectionnez l'input e-mail et réglez son Name sur email. Webflow génère les noms à partir des libellés : vous obtiendriez sinon Email ou Email 2, qu'Ikiform traite comme un autre champ.
3. Supprimez tout élément reCAPTCHA. Ikiform ne le vérifie pas, et avec une définition de champs, sa valeur g-recaptcha-response est refusée comme champ inconnu.
4. Faites glisser un Code Embed dans le formulaire, à côté du bouton, et collez-y les deux inputs ci-dessous.
5. Réglez Redirect after submit dans les réglages du formulaire Ikiform sur une page de remerciement publiée dans Webflow. C'est là que les gens arrivent si le script ne s'exécute pas.

<input type="hidden" name="ref" value="webflow">
<input name="_gotcha" type="text" tabindex="-1" autocomplete="off" hidden>

Ajoutez la définition des champs dans l'onglet Fields d'Ikiform, avec email obligatoire et ref en champ text facultatif avec max_length à 40. Tout autre nom envoyé, comme un input Name oublié, reçoit alors un 422, ce qui révèle un input mal nommé dès le premier test.

Le script à l'échelle du site

Collez ceci sous Site settings › Custom code › Footer code, pour qu'il couvre le formulaire du hero, celui du pied de page et toute page ajoutée plus tard. Il ne touche qu'aux formulaires dont l'action commence par https://ikiform.com/f/.

<script>
  const params = new URLSearchParams(location.search);
  const ref = (params.get("ref") || params.get("utm_source") || "").toLowerCase().replace(/[^a-z0-9_-]/g, "").slice(0, 40);
  const key = crypto.randomUUID();

  document.querySelectorAll('form[action^="https://ikiform.com/f/"]').forEach((form, index) => {
    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"]');
    const source = form.querySelector('[name="ref"]');
    if (source && ref) source.value = ref;

    form.addEventListener("submit", async (event) => {
      event.preventDefault();
      const label = button.value;
      button.disabled = true;
      button.value = button.dataset.wait || "Joining";
      fail.style.display = "none";
      try {
        const response = await fetch(form.action, {
          method: "POST",
          headers: { Accept: "application/json", "Idempotency-Key": `${key}-${index}` },
          body: new FormData(form),
        });
        const result = await response.json();
        if (result.ok) {
          const email = form.querySelector('[name="email"]').value;
          const line = done.querySelector("div") ?? done;
          line.textContent = `You're on the list. We'll write to ${email} on launch day.`;
          form.style.display = "none";
          done.style.display = "block";
          return;
        }
        const wait = response.headers.get("Retry-After");
        const message = wait ? `Lots of signups right now. Try again in ${wait} seconds.` : result.error.fields?.email?.[0] ?? result.error.message;
        (fail.querySelector("div") ?? fail).textContent = message;
      } catch {
        (fail.querySelector("div") ?? fail).textContent = "Couldn't reach the server. Try again.";
      }
      fail.style.display = "block";
      button.disabled = false;
      button.value = label;
    });
  });
</script>

• ?ref= ou ?utm_source= dans le lien remplit chaque input masqué ref de la page. Sans l'un ni l'autre, la valeur définie dans l'embed est conservée : réglez-la donc par formulaire, comme hero et footer, pour voir lequel convertit.
• La clé d'idempotence est créée une fois par chargement de page, avec un suffixe par formulaire. Un double clic ne stocke qu'une inscription ; une seconde inscription depuis un autre formulaire de la page compte toujours.
• Le bloc de succès de Webflow reçoit une phrase avec l'e-mail de la personne, ce qui attrape les fautes de frappe : les gens remarquent gmial.com quand on le leur réécrit.
• Le bouton affiche le texte Loading défini dans le Designer pendant l'envoi.
• Un 429 indique combien de temps attendre, d'après l'en-tête Retry-After d'Ikiform, au lieu d'un échec générique.

Domaines autorisés

N'ajoutez jamais webflow.io seul ; tous les sites Webflow correspondraient. Le guide Webflow de la documentation couvre les mêmes réglages pour un formulaire de contact, et le guide principal montre comment transmettre les inscriptions à votre outil d'e-mailing.

Vérifiez que tout fonctionne

1. Publiez sur votre domaine de préproduction webflow.io.
2. Dans Allowed domains du formulaire, ajoutez le domaine de votre site, plus localhost pendant le développement. Laissez vide pour accepter les envois de partout.
3. Ouvrez la page avec ?ref=test et inscrivez-vous. Le bloc de succès de Webflow affiche votre e-mail, et la soumission dans Ikiform a ref à test.
4. Inscrivez-vous à nouveau depuis le formulaire du pied de page sans paramètres d'URL. ref prend la valeur de l'embed de ce formulaire.
5. Désactivez JavaScript et envoyez. Vous arrivez sur votre page de remerciement Webflow.
6. Vérifiez la boîte de réception de chaque destinataire des notifications. Chacun reçoit un e-mail avec les champs, et Reply répond à l'expéditeur quand le formulaire a un champ email.
7. Envoyez avec le honeypot rempli, _gotcha=bot. L'envoi reçoit quand même une réponse de succès, mais la soumission est stockée comme spam et n'envoie ni e-mail ni webhook.

Pièges

Questions