Formular-ID

Webflow

Sende einen Webflow Form Block über eine Custom Action an Ikiform, behalte die Erfolgs- und Fehlerzustände von Webflow mit einem kurzen Script und erlaube deine webflow.io-Staging-Site.

Der Form Block von Webflow kann an jede URL senden. Richte seine Action auf deinen Ikiform-Endpunkt, und das Formular behält das Layout und die Styles aus dem Designer, während Ikiform validiert, Spam filtert, speichert, E-Mails verschickt und Webhooks sendet.

Was eine Custom Action ändert

  • Webflow verarbeitet ein Formular nur, wenn es selbst das Ziel ist. Mit einer Custom Action sendet der Browser direkt an Ikiform, daher erscheint die Einsendung nicht in den Formulareinsendungen von Webflow und Webflow verschickt keine Benachrichtigungs-E-Mail.
  • Die eigenen Ziele von Webflow können nicht neben einer Custom Action laufen. Entferne sie unter Send to, bevor du Ikiform hinzufügst.
  • Die Erfolgs- und Fehlerblöcke von Webflow (.w-form-done und .w-form-fail) und die eigene Weiterleitungseinstellung des Formulars funktionieren nicht mehr, weil Webflow das Ergebnis nie sieht. Besucher landen auf der Danke-Seite von Ikiform oder auf deiner Redirect after submit-URL. Schritt 4 holt die Blöcke von Webflow zurück.

Formular einrichten

  1. Formular auf Ikiform richten

    Wähle das Formular im Form Block aus und öffne das Panel Settings. Wähle unter Send to eine Custom Action, füge deinen Endpunkt in Action ein und setze Method auf POST.

    Action
    https://ikiform.com/f/frm_xxxxxxxxxxxxxxxx

    Bleibt die Methode auf GET, öffnet der Browser den Endpunkt als Seite, die mit 404 not_found antwortet. Ikiform nimmt nur POST-Requests an.

  2. Felder benennen

    Die Einstellung Name jedes Inputs wird zum Feldnamen in Ikiform. Webflow füllt sie aus dem Label, daher bekommst du Namen wie Name, Email und Field 2. Benenne sie in die IDs um, die du sehen willst, etwa name, email und message.

    • Wenn du im Ikiform-Formular Felder definierst, müssen die Namen exakt ihren IDs entsprechen. IDs sind kleingeschriebenes snake_case, also sind Email und email verschiedene Felder.
    • Entferne jedes reCAPTCHA-Element aus dem Formular. Ikiform prüft es nicht, und sein Wert g-recaptcha-response käme als zusätzliches Feld an. Nutze stattdessen die Spamprüfung von Ikiform.

  3. Honeypot hinzufügen

    Füge dem Formular ein Input hinzu, setze seinen Name auf _gotcha und blende es im Style-Panel mit Display: none aus. Füge unter Custom attributes tabindex mit -1 und autocomplete mit off hinzu, damit Tastaturen und Passwortmanager es überspringen. Mit einem kostenpflichtigen Site-Tarif kannst du stattdessen das hier in ein Code Embed innerhalb des Formulars einfügen:

    Code Embed
    <input name="_gotcha" type="text" tabindex="-1" autocomplete="off" hidden />

  4. Festlegen, was nach dem Absenden passiert

    Die einfachste Option ist eine Danke-Seite. Erstelle sie in Webflow, veröffentliche sie und füge ihre vollständige URL in den Einstellungen des Ikiform-Formulars unter Redirect after submit ein.

    Erfolgs- und Fehlerblöcke von Webflow behalten

    Um auf der Seite zu bleiben, sende mit fetch und schalte die Blöcke von Webflow selbst um. Füge das unter Page settings > Custom code > Before </body> tag ein oder in den Footer-Code der Site, um jedes Formular abzudecken. Es zeigt die Fehlermeldung von Ikiform im Fehlerblock an und nutzt während des Sendens den Waiting text des Buttons.

    Before </body> tag
    <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"]');

    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;
        }
        const text = fail?.querySelector("div") ?? fail;
        if (text) text.textContent = result.error.message;
        if (fail) fail.style.display = "block";
      } catch {
        if (fail) fail.style.display = "block";
      } finally {
        if (button) {
          button.disabled = false;
          button.value = label;
        }
      }
    });
  });
</script>
    Custom Code und das Code-Embed-Element brauchen einen kostenpflichtigen Site-Tarif oder einen Workspace-Tarif, und beides läuft nicht im Designer. Veröffentliche, um sie in Aktion zu sehen.

Das Script sendet mit fetch, daher antwortet ein Formular, dessen Spamprüfung auf Ikiform steht, mit 403 challenge_required, statt die Prüfseite zu zeigen. Nutze das Script mit ausgeschalteter Prüfung oder verzichte auf das Script und lass den Browser normal senden; dann läuft die Prüfung ohne zusätzlichen Code.

Erlaubte Domains

Wenn du erlaubte Domains festlegst, liste jede Adresse auf, unter der das Formular veröffentlicht ist. Subdomains einer gelisteten Domain passen bereits.

Wo das Formular läuftZu Allowed domains hinzufügen
Deine eigene Domainexample.com, was auch www.example.com abdeckt
Webflow-Stagingyour-site.webflow.io
Die Designer-ArbeitsflächeNichts. Custom Actions und Custom Code laufen dort nicht.
  • Füge niemals webflow.io allein hinzu. Jede Site auf diesem Host würde passen, auch die anderer Leute.

Test-Checkliste

  1. Veröffentliche auf deiner webflow.io-Staging-Domain. Formulare mit Custom Action senden nur von der veröffentlichten Site.
  2. Sende das Formular ab und öffne die Einsendungen des Formulars in Ikiform. Die neue Einsendung sollte unter Empfangen gelistet sein, nicht unter Spam.
  3. Prüfe, ob die Feldnamen dem entsprechen, was du in Schritt 2 festgelegt hast, und dass der Honeypot nicht gelistet ist: Namen, die mit _ beginnen, werden nie gespeichert.
  4. Prüfe, dass du auf deiner Danke-Seite landest oder den Erfolgsblock von Webflow siehst, falls du das Script hinzugefügt hast.
  5. Veröffentliche auf deiner eigenen Domain und sende von dort noch einmal ab.

Fehlerbehebung

Was du siehstWarumLösung
Seite 404 not_found nach dem AbsendenMethod ist GET, daher hat der Browser den Endpunkt wie einen Link geöffnetSetze Method auf POST und veröffentliche erneut.
Die Danke-Seite von Ikiform statt der Erfolgsmeldung von WebflowDer Erfolgsblock von Webflow läuft nur, wenn Webflow das Formular verarbeitetSetze Redirect after submit oder füge das Script aus Schritt 4 hinzu.
Einsendungen landen im Spamfilter mit origin_mismatchDie sendende Seite steht nicht in den erlaubten Domains des FormularsFüge den Host aus der Tabelle oben hinzu. Mit Reject bekommen dieselben Requests stattdessen 403 origin_not_allowed.
422 validation_failed mit einem Unknown fieldEin Feldname wie Email oder g-recaptcha-response steht nicht in der Felddefinition des FormularsBenenne das Input in die Feld-ID um oder entferne das reCAPTCHA-Element.
Das Script tut nichtsDu testest im Designer, die Site hat keinen kostenpflichtigen Tarif oder die Action beginnt nicht mit https://ikiform.com/f/Teste auf der veröffentlichten Site und prüfe, dass die Action keine Leerzeichen enthält.
Der Fehlerblock zeigt Complete the human check, then send the form again.Die Spamprüfung steht auf Ikiform und das Script sendet mit fetchSchalte die Prüfung für dieses Formular aus oder entferne das Script.

Verwandte Themen