So stoppst du Spam in Webflow-Formularen

reCAPTCHA, Bot-Blockierung und Spamfilter von Webflow wirken nur bei Einsendungen, die Webflow selbst empfängt. Wenn dein Formular eine eigene action nutzt, um an ein Formular-Backend zu senden, sehen diese Einstellungen den Post nie, der Schutz muss also im Backend passieren. Füge im Designer einen Off-Screen-Honeypot hinzu, setze Domains und Rate-Limit im Backend und schalte dessen Menschlichkeitsprüfung ein, die mit dem normalen Webflow-Post und ohne Code funktioniert.

Was bei Webflow anders ist

Webflow hat eigene Spam-Tools: reCAPTCHA v2, eine Einstellung zur Bot-Blockierung, die Cloudflare Turnstile ausführt, und einen Spamfilter, der den Inhalt jeder Einsendung liest. Sie alle laufen auf Webflows Seite und wirken daher nur auf Posts, die Webflow erreichen. Sobald du Send to eines Formulars auf eine eigene action setzt, sendet der Browser direkt an diese URL. Webflow sieht die Einsendung nie, also läuft keine seiner Prüfungen, egal wie sie eingestellt sind.

Webflows eigene Einstellungen nach dem Wechsel

Die Webflow-Anleitung in der Dokumentation behandelt, wie du den Form Block auf Ikiform ausrichtest. Die Schritte unten fügen den Spamschutz obendrauf.

Den Honeypot im Designer hinzufügen

Webflows schneller Weg, ein Eingabefeld zu verstecken, ist Display: none. Manche Bots überspringen so versteckte Felder, also setze die Falle stattdessen in einen Off-Screen-Wrapper. Das dauert eine Minute und braucht keinen kostenpflichtigen Tarif:

• Füge im Formular einen Div Block hinzu und gib ihm eine Klasse wie hp. Setze im Style-Panel Position auf Absolute, Left auf -10000px, Width und Height auf 1px und Overflow auf Hidden.
• Füge in den Custom attributes des Div Blocks aria-hidden mit dem Wert true hinzu, damit Screenreader alles darin überspringen.
• Setze ein Label mit dem Text Leave this empty und ein Input in den Div Block. Setze den Name des Inputs auf _gotcha und füge die Custom Attributes tabindex = -1 und autocomplete = off hinzu.
• Hake dort nicht Required an. Ein Pflichtfeld, das niemand sehen kann, blockiert jedes ehrliche Absenden.

Ein ausgefülltes _gotcha erhöht den Spam-Score von Ikiform um 5, genug, um die Schwelle von 5 allein zu erreichen. Du kannst das Feld pro Formular unter Honeypot field umbenennen, falls ein Template, das du nutzt, schon eine Falle mit anderem Namen hat.

Felder für die Bewertung benennen

Webflow benennt jedes Eingabefeld nach seinem Label, du bekommst also Name, Email und Field 2. Benenne sie in den Einstellungen jedes Eingabefelds in name, email und message um. Die Namen zählen für die Spam-Bewertung genauso wie für deine Daten:

• Ein Link in einem Namensfeld wie name, first_name oder subject erhöht um 3. Spammer setzen dort oft ihre URL ein, kein echter Mensch tut das.
• Eine Adresse auf einer Wegwerf-E-Mail-Domain erhöht um 2, gelesen aus jedem Feld, das eine E-Mail-Adresse enthält.
• Drei oder mehr Links im ganzen Formular erhöhen um 2, und eine bekannte Spam-Phrase erhöht um 2.

Die Menschlichkeitsprüfung einschalten

Setze in den Einstellungen des Ikiform-Formulars Spam check auf Ikiform. In Webflow ändert sich nichts. Sendet das Formular auf normalem Weg, antwortet Ikiform mit einer kurzen Seite Checking you're human auf ikiform.com, die Cloudflare Turnstile ausführt und die Felder weiterschickt, dann landet der Besucher auf deiner Seite aus Redirect after submit. Kein Cloudflare-Konto, keine Schlüssel, kein eigener Code.

Wenn du das Skript aus der Dokumentation hinzugefügt hast, um Webflows Erfolgs- und Fehlerblöcke zu behalten, sendet es mit fetch, und ein fetch-Post ohne Token bekommt 403 challenge_required. Diese Version berücksichtigt das: Sie fällt für die Menschlichkeitsprüfung auf einen normalen Post zurück und zeigt die Wartezeit, wenn ein Besucher an das Rate-Limit stößt.

<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() sendet das Formular, ohne das submit-Event auszulösen, der Fallback läuft also nie zurück ins Skript.
• Füge es unter Page settings > Custom code > Before </body> tag ein oder im Footer-Code der Site für jedes Formular. Custom Code braucht einen kostenpflichtigen Site-Tarif und läuft nur auf der veröffentlichten Site.
• Es betrifft nur Formulare, deren action mit https://ikiform.com/f/ beginnt, Formulare, die Webflow noch verarbeitet, bleiben also unberührt.

Erlaubte Domains und das Rate-Limit

Füge unter Allowed domains des Ikiform-Formulars deine eigene Domain und deine Staging-Adresse hinzu, etwa your-site.webflow.io. Füge niemals webflow.io allein hinzu: Jede Webflow-Site würde passen, auch die anderer Leute. Posts von anderswo werden als Spam gespeichert oder abgelehnt, wenn du Reject wählst.

Setze für ein Kontaktformular Rate limit auf Strict, 2 alle 10 Minuten pro Besucher. Niemand mit ehrlichen Absichten schreibt zweimal in zehn Minuten. Zu einem Anmeldeformular an einem vollen Launch-Tag passt Relaxed mit 20 pro Minute und Besucher besser. Jedes Formular startet mit Standard, 5 pro Minute.

Prüfen, ob es funktioniert

1. Veröffentliche auf deine Staging-Domain unter webflow.io. Eigene actions senden nur von der veröffentlichten Site.
2. Sende das Formular normal ab. Mit eingeschalteter Menschlichkeitsprüfung siehst du kurz die Prüfseite, dann deine Dankeseite.
3. Untersuche das veröffentlichte Formular und prüfe, ob der Honeypot-Wrapper aria-hidden hat und außerhalb des sichtbaren Bereichs liegt.
4. Sende einen Post mit ausgefülltem Honeypot, _gotcha=bot. Er bekommt trotzdem eine Erfolgsantwort, aber die Einsendung wird als Spam gespeichert und löst weder E-Mail noch Webhook aus.
5. Öffne Submissions im Dashboard. Die neue Einsendung ist da, mit jedem Feld, das du gesendet hast.
6. Nichts angekommen? Stell den Statusfilter im Dashboard auf Spam. Spam bekommt dieselbe Erfolgsantwort wie eine echte Einsendung.

Stolperfallen

• Spam trotz Webflow-Einstellungen. Wenn weiter Spam ankommt, nachdem du Webflows Tools eingeschaltet hast, prüfe Send to des Formulars. Eine eigene action umgeht sie alle.
• reCAPTCHA stehen gelassen. Sind am Ikiform-Formular Felder definiert, scheitert ein übrig gebliebenes g-recaptcha-response mit 422 validation_failed als unbekanntes Feld. Entferne das Element.
• Duplizierte Formulare. Beim Kopieren eines Formulars wird das Honeypot-Eingabefeld kopiert, aber nicht immer seine Custom Attributes. Prüfe tabindex und aria-hidden bei jeder Kopie.
• Interactions am Wrapper. Eine Webflow-Interaction, die jeden Div Block im Formular animiert, kann den Honeypot ins Bild bewegen. Schließ seine Klasse aus.

Fragen