So fügst du einer Webflow-Site ein Wartelisten-Formular hinzu

Behalte den Form Block, den du in Webflow gestaltet hast, und ändere seine action mit der Methode POST auf deinen Ikiform-Endpunkt. Füge in einem Code Embed ein verstecktes ref-Eingabefeld und einen Honeypot hinzu und setze dann ein seitenweites Skript ein, das jedes Wartelisten-Formular mit fetch sendet, ref aus dem Link füllt und Webflows eigenen Erfolgsblock mit der E-Mail der Person zeigt.

Webflow ist gut bei der Seite und okay beim Formular. Die native Formularverarbeitung speichert Einsendungen und benachrichtigt dich per E-Mail, begrenzt aber je nach Site-Tarif, wie viele sie behält, und kann eine Anmeldung nicht mit der Kampagne markieren, aus der sie kam. Eine eigene action behebt beides, ohne den Designer zu verlassen.

Was bei Webflow anders ist

• Eine eigene action nimmt Webflow das Formular ab. Der Browser sendet direkt an Ikiform, Webflow sieht die Anmeldung also nie: Sie steht nicht in Webflows Formulareinsendungen, Webflow sendet keine E-Mail, und sie verbraucht nichts vom Formularkontingent deines Tarifs.
• Webflows Erfolgs- und Fehlerblöcke funktionieren nicht mehr. Sie erscheinen nur, wenn Webflow den Post verarbeitet hat. Ohne Skript landen Besucher auf Ikiforms Dankeseite oder deiner Redirect after submit-URL.
• Es gibt kein verstecktes Eingabeelement. Versteckte Felder und der Honeypot kommen in ein Code Embed im Formular, das einen bezahlten Site-Tarif braucht, genau wie eigener Code.
• Im Designer läuft nichts. Eigene actions und Skripte funktionieren nur auf der veröffentlichten Site, teste also auf deiner webflow.io-Staging-Domain.

Den Form Block einrichten

1. Wähle das Formular aus und öffne Settings. Entferne unter Send to Webflow und Email notifications, füge dann Custom action hinzu, trag https://ikiform.com/f/frm_xxxxxxxxxxxxxxxx ein, wähle POST und speichere.
2. Wähle das E-Mail-Eingabefeld aus und setze seinen Name auf email. Webflow füllt Namen aus den Beschriftungen, sonst bekämst du Email oder Email 2, was Ikiform als anderes Feld behandelt.
3. Lösche jedes reCAPTCHA-Element. Ikiform verifiziert es nicht, und bei einer Felddefinition wird sein Wert g-recaptcha-response als unbekanntes Feld abgelehnt.
4. Zieh ein Code Embed in das Formular, neben den Button, und füge die beiden Eingabefelder unten ein.
5. Setze Redirect after submit in den Einstellungen des Ikiform-Formulars auf eine Dankeseite, die du in Webflow veröffentlicht hast. Dort landen die Leute, wenn das Skript nicht läuft.

<input type="hidden" name="ref" value="webflow">
<input name="_gotcha" type="text" tabindex="-1" autocomplete="off" hidden>

Füge die Felddefinition im Ikiform-Tab Fields hinzu, mit email als Pflicht und ref als optionalem text-Feld mit max_length 40. Jeder andere gesendete Name, etwa ein übrig gebliebenes Name-Eingabefeld, bekommt dann einen 422, was dir beim ersten Test ein falsch benanntes Eingabefeld zeigt.

Das seitenweite Skript

Füge das unter Site settings › Custom code › Footer code ein, damit es das Hero-Formular, das Footer-Formular und jede Seite abdeckt, die du später hinzufügst. Es fasst nur Formulare an, deren action mit https://ikiform.com/f/ beginnt.

<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= oder ?utm_source= im Link füllt jedes versteckte ref-Eingabefeld auf der Seite. Ohne beides bleibt der im Embed gesetzte Wert, setze ihn also pro Formular, etwa hero und footer, um zu sehen, welches konvertiert.
• Der Idempotenzschlüssel wird einmal pro Seitenaufruf erzeugt und pro Formular mit einem Suffix versehen. Ein Doppelklick speichert eine Anmeldung; eine zweite Anmeldung über ein anderes Formular auf der Seite zählt trotzdem.
• Webflows Erfolgsblock bekommt eine Zeile mit der E-Mail der Person, was Tippfehler auffängt: Leute bemerken gmial.com, wenn es ihnen zurückgeschrieben wird.
• Der Button zeigt den Loading-Text, den du im Designer gesetzt hast, solange der Post läuft.
• Ein 429 zeigt anhand von Ikiforms Retry-After-Header, wie lange zu warten ist, statt eines allgemeinen Fehlers.

Erlaubte Domains

Füge nie webflow.io allein hinzu; jede Webflow-Site würde passen. Die Webflow-Anleitung in der Doku behandelt dieselben Einstellungen für ein Kontaktformular, und die Hauptanleitung zeigt, wie du Anmeldungen an dein E-Mail-Tool weiterleitest.

Prüfen, ob es funktioniert

1. Veröffentliche auf deiner webflow.io-Staging-Domain.
2. Füge unter Allowed domains des Formulars die Domain deiner Site hinzu, plus localhost, während du entwickelst. Lass das Feld leer, um Posts von überall anzunehmen.
3. Öffne die Seite mit ?ref=test und melde dich an. Webflows Erfolgsblock zeigt deine E-Mail, und die Einsendung in Ikiform hat ref auf test.
4. Melde dich erneut über das Footer-Formular ohne Query-String an. ref enthält den Wert aus dem Embed dieses Formulars.
5. Schalte JavaScript aus und sende ab. Du landest auf deiner Webflow-Dankeseite.
6. Prüfe das Postfach jedes Benachrichtigungsempfängers. Jeder bekommt eine E-Mail mit den Feldern, und Reply geht an den Absender, wenn das Formular ein email-Feld hat.
7. 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.

Stolperfallen

Fragen