# Comment arrêter le spam des formulaires Webflow

> Protégez un formulaire Webflow qui envoie vers un backend de formulaires, où les réglages anti-spam de Webflow ne s'appliquent pas, avec un honeypot et une vérification humaine.

Publié le 2026-10-25 · https://ikiform.com/fr/guides/spam-protection/webflow

Le reCAPTCHA, le blocage des bots et le filtre anti-spam de Webflow ne fonctionnent que sur les soumissions que Webflow reçoit lui-même. Si votre formulaire utilise une action personnalisée pour envoyer vers un backend de formulaires, ces réglages ne voient jamais l'envoi : la protection doit donc se faire côté backend. Ajoutez un honeypot hors écran dans le Designer, définissez vos domaines et votre limite de débit sur le backend, et activez sa vérification humaine, qui fonctionne avec l'envoi Webflow normal et sans code.

## Ce qui change sur Webflow

Webflow a ses propres outils anti-spam : reCAPTCHA v2, un réglage de blocage des bots qui exécute Cloudflare Turnstile, et un filtre anti-spam qui lit le contenu de chaque soumission. Ils vivent tous côté Webflow : ils n'agissent donc que sur les envois qui atteignent Webflow. Dès que vous réglez le **Send to** d'un formulaire sur une action personnalisée, le navigateur envoie directement vers cette URL. Webflow ne voit jamais la soumission : aucune de ses vérifications ne s'exécute, quels que soient leurs réglages.

Schéma : Où tournent les vérifications anti-spam d'un formulaire Webflow, avec et sans action personnalisée

1. Quand Webflow gère le formulaire, l'envoi va à Webflow, qui exécute reCAPTCHA, le blocage des bots et son filtre anti-spam avant de le stocker.
2. Avec une action personnalisée, le navigateur envoie le même formulaire directement à Ikiform.
3. Les vérifications de Webflow ne voient jamais cet envoi, quels que soient leurs réglages.
4. Ikiform exécute le honeypot, le score, la limite de débit et la vérification humaine, puis stocke l'envoi comme reçu ou comme spam.

Passer un formulaire à une action personnalisée déplace aussi sa protection anti-spam. Mettez-la en place sur le backend le jour même.

## Les réglages de Webflow, après le changement

| Réglage Webflow | Avec une action personnalisée | Que faire |
| --- | --- | --- |
| Élément reCAPTCHA et validation | Vérifié par personne. Sa valeur `g-recaptcha-response` arrive comme un champ en trop | Retirez l'élément. Ne désactivez la validation reCAPTCHA que si aucun formulaire encore géré par Webflow n'en a besoin, car le réglage couvre tous les formulaires du site |
| Blocage des bots | Ne s'applique pas aux envois qui partent ailleurs | Laissez-le pour les formulaires que Webflow gère encore |
| Filtrage du spam | Ne s'applique pas | Utilisez plutôt le score du contenu du backend |
| Limites de soumissions et notifications du formulaire | Ne s'appliquent pas | Le backend stocke et envoie les e-mails à la place |

Le [guide Webflow](https://ikiform.com/fr/docs/guides/webflow.md) de la documentation explique comment faire pointer le Form Block vers Ikiform. Les étapes ci-dessous ajoutent la protection anti-spam par-dessus.

## Ajouter le honeypot dans le Designer

La façon rapide de masquer un input dans Webflow est **Display : none**. Certains bots ignorent les champs masqués ainsi : placez donc plutôt le piège dans un conteneur hors écran. Cela prend une minute et ne demande aucune offre payante :

- Dans le formulaire, ajoutez un **Div Block** et donnez-lui une classe comme `hp`. Dans le panneau Style, réglez **Position** sur **Absolute**, **Left** sur `-10000px`, **Width** et **Height** sur `1px`, et **Overflow** sur **Hidden**.
- Dans les **Custom attributes** du Div Block, ajoutez `aria-hidden` réglé sur `true`, pour que les lecteurs d'écran ignorent tout ce qu'il contient.
- Placez un **Label** avec le texte **Leave this empty** et un **Input** dans le Div Block. Réglez le **Name** de l'Input sur `_gotcha`, et ajoutez les attributs personnalisés `tabindex` = `-1` et `autocomplete` = `off`.
- Ne cochez pas **Required** dessus. Un champ obligatoire que personne ne voit bloque tout envoi honnête.

Un `_gotcha` rempli ajoute 5 au score de spam d'Ikiform, assez pour atteindre à lui seul le seuil de 5. Vous pouvez renommer le champ pour chaque formulaire sous **Honeypot field** si un modèle que vous utilisez a déjà un piège sous un autre nom.

## Nommer les champs pour le score

Webflow nomme chaque input d'après son label : vous obtenez donc `Name`, `Email` et `Field 2`. Renommez-les dans les réglages de chaque input en `name`, `email` et `message`. Les noms comptent pour le score de spam autant que pour vos données :

- Un lien dans un champ de nom, comme `name`, `first_name` ou `subject`, ajoute 3. Les spammeurs y mettent souvent leur URL, ce que ne fait aucune vraie personne.
- Une adresse sur un domaine d'e-mail jetable ajoute 2, lue dans tout champ qui contient une adresse e-mail.
- Trois liens ou plus dans le formulaire ajoutent 2, et une formule de spam connue ajoute 2.

## Activer la vérification humaine

Dans les réglages du formulaire Ikiform, réglez **Spam check** sur **Ikiform**. Rien ne change dans Webflow. Quand le formulaire est envoyé normalement, Ikiform répond par une courte page **Checking you're human** sur ikiform.com qui exécute Cloudflare Turnstile et transmet les champs, puis le visiteur arrive sur votre page **Redirect after submit**. Ni compte Cloudflare, ni clés, ni code personnalisé.

Si vous avez ajouté le script de la documentation pour garder les blocs de succès et d'erreur de Webflow, il envoie avec `fetch`, et un envoi `fetch` sans token reçoit `403 challenge_required`. Cette version gère ce cas : elle se rabat sur un envoi normal pour la vérification humaine, et affiche le temps d'attente quand un visiteur atteint la limite de débit.

`Before </body> tag`:

```html
<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"]');

    function showError(text) {
      const slot = fail?.querySelector("div") ?? fail;
      if (slot) slot.textContent = text;
      if (fail) fail.style.display = "block";
    }

    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;
        }
        if (result.error.code === "challenge_required") {
          form.submit();
          return;
        }
        showError(
          response.headers.has("Retry-After")
            ? `Too many messages. Try again in ${response.headers.get("Retry-After")} seconds.`
            : result.error.message,
        );
      } catch {
        form.submit();
      } finally {
        if (button) {
          button.disabled = false;
          button.value = label;
        }
      }
    });
  });
</script>
```

- `form.submit()` envoie le formulaire sans déclencher l'événement `submit` : le repli ne reboucle donc jamais dans le script.
- Collez-le sous **Page settings** > **Custom code** > **Before </body> tag**, ou dans le code de pied de page du site pour tous les formulaires. Le code personnalisé demande une offre de site payante et ne s'exécute que sur le site publié.
- Il ne touche que les formulaires dont l'action commence par `https://ikiform.com/f/` : les formulaires que Webflow gère encore ne sont donc pas concernés.

## Domaines autorisés et limite de débit

Sous les **Allowed domains** du formulaire Ikiform, ajoutez votre domaine personnalisé et votre adresse de préproduction, comme `your-site.webflow.io`. N'ajoutez jamais `webflow.io` seul : tous les sites Webflow correspondraient, y compris ceux des autres. Les envois venant d'ailleurs sont stockés comme spam, ou refusés si vous choisissez **Reject**.

Pour un formulaire de contact, réglez **Rate limit** sur Strict, 2 toutes les 10 minutes par visiteur. Personne d'honnête n'écrit deux fois en dix minutes. Un formulaire d'inscription un jour de lancement chargé convient mieux à Relaxed, 20 par minute par visiteur. Chaque formulaire démarre sur Standard, 5 par minute.

> Un envoi jugé comme spam reçoit la même réponse de succès qu'un vrai : un bot n'apprend donc rien. Il est stocké avec le statut `spam`, n'envoie ni e-mail de notification ni webhook, ne compte pas dans votre consommation, et est supprimé au bout de 30 jours. Chaque lundi, un espace de travail qui a bloqué du spam reçoit un e-mail récapitulatif avec le total, les formulaires les plus sollicités et les principales raisons.

## Vérifiez que tout fonctionne

1. Publiez sur votre domaine de préproduction `webflow.io`. Les actions personnalisées n'envoient que depuis le site publié.
2. Envoyez le formulaire normalement. Avec la vérification humaine activée, vous voyez brièvement la page de vérification, puis votre page de remerciement.
3. Inspectez le formulaire publié et vérifiez que le conteneur du honeypot a `aria-hidden` et se trouve hors écran.
4. 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.
5. Ouvrez **Submissions** dans le tableau de bord. La nouvelle soumission y est, avec tous les champs envoyés.
6. Rien n'est arrivé ? Passez le filtre de statut du tableau de bord sur **Spam**. Le spam reçoit la même réponse de succès qu'une vraie soumission.

## Pièges

- **Du spam avec les réglages de Webflow activés.** Si du spam continue d'arriver après avoir activé les outils de Webflow, vérifiez le **Send to** du formulaire. Une action personnalisée les contourne tous.
- **reCAPTCHA laissé en place.** Avec des champs définis sur le formulaire Ikiform, un `g-recaptcha-response` restant échoue avec `422 validation_failed` comme champ inconnu. Retirez l'élément.
- **Formulaires dupliqués.** Copier un formulaire copie l'input du honeypot mais pas toujours ses attributs personnalisés. Vérifiez `tabindex` et `aria-hidden` sur chaque copie.
- **Interactions sur le conteneur.** Une interaction Webflow qui anime chaque Div Block du formulaire peut rendre le honeypot visible. Excluez sa classe.

## Questions

### Pourquoi est-ce que je reçois encore du spam sur mon formulaire Webflow ?

Si le formulaire utilise une action personnalisée, le reCAPTCHA, le blocage des bots et le filtre anti-spam de Webflow ne voient jamais l'envoi. La protection doit se faire là où le formulaire envoie. Si Webflow gère le formulaire, essayez d'activer le blocage des bots en plus du filtre anti-spam.

### Comment ajouter un honeypot à un formulaire Webflow ?

Ajoutez un Div Block dans le formulaire, placez-le hors écran avec un positionnement absolu, et donnez-lui aria-hidden true. Placez-y un input nommé _gotcha avec tabindex -1 et autocomplete off, et ne le rendez pas obligatoire.

### Puis-je utiliser reCAPTCHA sur un formulaire Webflow qui envoie vers Ikiform ?

Non. Ikiform ne vérifie pas les tokens reCAPTCHA. Retirez l'élément et réglez le Spam check du formulaire Ikiform sur Ikiform, qui exécute Cloudflare Turnstile sans clés et sans code dans Webflow.

### Faut-il une offre Webflow payante pour la protection anti-spam ?

Pas pour le honeypot ni pour les vérifications d'Ikiform, qui fonctionnent avec le formulaire Webflow simple. Le code personnalisé, utilisé pour garder le bloc de succès de Webflow sur la page, demande une offre de site payante.

## Autres guides

- [Arrêter le spam des formulaires de contact](https://ikiform.com/fr/guides/spam-protection.md): Arrêtez le spam des formulaires de contact avec des couches invisibles pour les vrais visiteurs : honeypot, délai, score du contenu, limites de débit, vérification humaine si besoin.
- [Champ honeypot](https://ikiform.com/fr/guides/spam-protection/honeypot.md): Ajoutez à n'importe quel formulaire un honeypot qui attrape les bots sans gêner lecteurs d'écran, clavier ou remplissage automatique, avec la vérification serveur pour chaque stack.
- [Alternatives à reCAPTCHA](https://ikiform.com/fr/guides/spam-protection/recaptcha-alternatives.md): Comparez les alternatives à reCAPTCHA pour formulaires, de Turnstile et hCaptcha à la preuve de travail ou à l'absence de captcha, puis migrez avec un petit changement sûr.
- [Sites statiques](https://ikiform.com/fr/guides/spam-protection/static-site.md): Arrêtez le spam d'un formulaire de site statique, même sans secret ni compteur, avec un partial honeypot, un script sûr et des vérifications côté serveur.
- [Cloudflare Turnstile](https://ikiform.com/fr/guides/spam-protection/cloudflare-turnstile.md): Ajoutez Cloudflare Turnstile à un formulaire HTML simple : le widget, siteverify côté serveur, les clés de test, et une façon de l'utiliser sans clés ni serveur à vous.
- [Sans captcha](https://ikiform.com/fr/guides/spam-protection/without-captcha.md): Arrêtez l'essentiel du spam sans captcha : un honeypot, une heure de rendu signée, un score du contenu et une limite de débit, cumulés plutôt qu'utilisés seuls.