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

> Faites pointer un Form Block Webflow vers Ikiform, taguez les inscriptions par source avec un champ masqué et gardez l'état de succès de Webflow avec un court script.

Publié le 2026-10-25 · https://ikiform.com/fr/guides/waitlist/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`.

Schéma : Un formulaire de liste d'attente Webflow avant et après une action personnalisée

1. Par défaut, le Form Block envoie à Webflow, qui stocke l'inscription dans le quota de votre offre et affiche le bloc de succès.
2. Avec une action personnalisée, le même Form Block pointe vers Ikiform.
3. Le script bloque l'envoi normal, remplit le champ ref à partir du lien et envoie avec fetch.
4. Ikiform stocke l'inscription, vous prévient par e-mail et envoie les webhooks, puis répond 201.
5. Le script masque le formulaire et affiche le bloc de succès de Webflow avec l'e-mail de la personne.

Le design reste dans Webflow. Seule la destination des données change.

## 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.

`Code Embed dans le formulaire`:

```html
<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/`.

`Footer code`:

```html
<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.

> Le script envoie avec `fetch` : laissez donc la vérification anti-spam du formulaire désactivée. Avec la vérification activée, Ikiform répond `403 challenge_required` et le bloc d'erreur s'affiche. Si vous avez besoin de la vérification, passez-vous du script ; l'envoi classique l'exécute sans code.

### Domaines autorisés

| Où tourne le formulaire | À ajouter aux domaines autorisés |
| --- | --- |
| Préproduction | `your-site.webflow.io` |
| Votre domaine personnalisé | `example.com`, qui couvre `www.example.com` |
| Le Designer | Rien. Il n'envoie jamais depuis là |

N'ajoutez jamais `webflow.io` seul ; tous les sites Webflow correspondraient. Le [guide Webflow de la documentation](https://ikiform.com/fr/docs/guides/webflow.md) couvre les mêmes réglages pour un formulaire de contact, et le [guide principal](https://ikiform.com/fr/guides/waitlist.md#confirm) 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

| Problème | Que faire |
| --- | --- |
| `404 not_found` après l'envoi | La **Method** est GET : le navigateur a donc ouvert l'endpoint comme un lien. Réglez-la sur POST et republiez. |
| `422` avec Unknown field `Email` ou `g-recaptcha-response` | Le **Name** d'un input ne correspond pas à la définition, ou un élément reCAPTCHA est resté dans le formulaire. Renommez l'input en `email` ou supprimez l'élément. |
| Le script ne fait rien | Vous êtes dans le Designer, le site n'a pas d'offre payante, ou **Action** contient une espace. Testez sur le site publié. |
| `403 challenge_required` | Le spam check du formulaire est réglé sur **Ikiform** et un envoi `fetch` n'avait pas de jeton. Obtenez-en un avec `challenge(formId)` de `@ikiform/sdk` avant chaque envoi, ou désactivez la vérification. |
| `403 origin_not_allowed`, ou tous les envois finissent en spam | Le domaine de la page n'est pas dans les **Allowed domains** du formulaire. Ajoutez-le, plus `localhost` pour les tests en local. Les sous-domaines d'un domaine listé sont autorisés. |

## Questions

### Les inscriptions envoyées à Ikiform comptent-elles dans la limite de soumissions de formulaire de Webflow ?

Non. Avec une action personnalisée, le navigateur envoie directement à Ikiform : Webflow ne reçoit donc jamais la soumission. Elle n'apparaît pas dans les soumissions de formulaire de Webflow et n'entame pas le quota de votre offre.

### Comment ajouter un champ masqué à un formulaire Webflow ?

Webflow n'a pas d'élément d'input masqué. Placez dans le formulaire un Code Embed contenant un input de type hidden. Le Code Embed exige une offre Site payante ou un Workspace Core, Growth, Agency ou Freelancer.

### Puis-je garder le message de succès de Webflow avec une action personnalisée ?

Oui, avec un script. Webflow n'affiche son bloc de succès que lorsqu'il a traité l'envoi : le script envoie donc avec fetch et affiche lui-même le bloc, comme dans l'exemple ci-dessus.

### Ikiform peut-il envoyer un e-mail à la personne qui a rempli le formulaire ?

Non. Ikiform envoie des e-mails à vous et à votre équipe, pas à l'expéditeur : il n'y a donc ni réponse automatique ni e-mail de confirmation. Envoyez un webhook à votre outil d'e-mailing et envoyez la confirmation depuis celui-ci.

## Autres guides

- [Liste d'attente pour un nouveau SaaS](https://ikiform.com/fr/guides/waitlist.md): Créez une liste d'attente avant lancement sur votre landing page : le formulaire, l'anti-spam, les doublons, les e-mails de confirmation et un export propre le jour J.
- [Liste d'attente sur Framer](https://ikiform.com/fr/guides/waitlist/framer.md): Deux façons de collecter des inscriptions sur Framer : le formulaire Framer avec un webhook vers Ikiform, ou un code component qui garde limites et anti-spam.
- [Liste d'attente sur Carrd](https://ikiform.com/fr/guides/waitlist/carrd.md): Collectez des inscriptions sur une page Carrd : un formulaire Send to URL sur Pro Plus avec suivi UTM, ou un formulaire HTML intégré avec honeypot sur Pro Standard.
- [Liste d'attente en HTML simple](https://ikiform.com/fr/guides/waitlist/html.md): Une page de liste d'attente complète en HTML simple, sans build, qui fonctionne sans JavaScript, remercie sur place quand il se charge, et se replie si besoin.
- [Liste de lancement Product Hunt](https://ikiform.com/fr/guides/waitlist/product-hunt.md): Collectez une liste des semaines avant Product Hunt, taguez chaque inscription par canal et envoyez l'e-mail du jour J en deux vagues calées sur l'heure du Pacifique.
- [Inscription bêta avec sélection](https://ikiform.com/fr/guides/waitlist/beta-signup.md): Un formulaire de candidature bêta avec des questions de sélection appliquées côté serveur, et un script qui note les candidats et choisit chaque cohorte.