Comment arrêter le spam des formulaires 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.

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

Le guide Webflow 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.

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

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