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

> Richte einen Webflow Form Block auf Ikiform aus, markiere Anmeldungen mit einem versteckten Feld nach Quelle und behalte mit einem kurzen Skript Webflows Erfolgszustand für jedes Formular.

Veröffentlicht am 2026-10-25 · https://ikiform.com/de/guides/waitlist/webflow

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.

Diagramm: Ein Webflow-Wartelisten-Formular vor und nach einer eigenen action

1. Standardmäßig sendet der Form Block an Webflow, das die Anmeldung auf das Kontingent deines Tarifs anrechnet und den Erfolgsblock zeigt.
2. Mit einer eigenen action zeigt derselbe Form Block auf Ikiform.
3. Das Skript stoppt den normalen Post, füllt das ref-Feld aus dem Link und sendet mit fetch.
4. Ikiform speichert die Anmeldung, benachrichtigt dich per E-Mail und sendet Webhooks, dann antwortet es mit 201.
5. Das Skript blendet das Formular aus und zeigt Webflows Erfolgsblock mit der E-Mail der Person.

Das Design bleibt in Webflow. Nur das Ziel der Daten ändert sich.

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

`Code Embed im Formular`:

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

`Footer-Code`:

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

> Das Skript sendet mit `fetch`, lass die Spamprüfung des Formulars also aus. Mit aktiver Prüfung antwortet Ikiform mit `403 challenge_required`, und der Fehlerblock erscheint. Wenn du die Prüfung brauchst, lass das Skript weg; der einfache Post führt sie ohne Code aus.

### Erlaubte Domains

| Wo das Formular läuft | Zu Allowed domains hinzufügen |
| --- | --- |
| Staging | `your-site.webflow.io` |
| Deine eigene Domain | `example.com`, das `www.example.com` abdeckt |
| Der Designer | Nichts. Von dort wird nie gesendet |

Füge nie `webflow.io` allein hinzu; jede Webflow-Site würde passen. Die [Webflow-Anleitung in der Doku](https://ikiform.com/de/docs/guides/webflow.md) behandelt dieselben Einstellungen für ein Kontaktformular, und die [Hauptanleitung](https://ikiform.com/de/guides/waitlist.md#confirm) 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

| Problem | Was zu tun ist |
| --- | --- |
| `404 not_found` nach dem Absenden | **Method** ist GET, der Browser hat den Endpunkt also wie einen Link geöffnet. Setze sie auf POST und veröffentliche erneut. |
| `422` mit Unknown field `Email` oder `g-recaptcha-response` | Der **Name** eines Eingabefelds passt nicht zur Definition, oder im Formular steckt noch ein reCAPTCHA-Element. Benenne das Eingabefeld in `email` um oder entferne das Element. |
| Das Skript tut nichts | Du bist im Designer, die Site hat keinen bezahlten Tarif, oder in **Action** steht ein Leerzeichen. Teste auf der veröffentlichten Site. |
| `403 challenge_required` | Die Spamprüfung des Formulars steht auf **Ikiform**, und ein `fetch`-Post hatte kein Token. Hol dir vor jedem Absenden eins mit `challenge(formId)` aus `@ikiform/sdk` oder schalte die Prüfung aus. |
| `403 origin_not_allowed`, oder jeder Post landet im Spam | Die Domain der Seite steht nicht unter **Allowed domains** des Formulars. Füge sie hinzu, plus `localhost` für lokale Tests. Subdomains einer eingetragenen Domain sind erlaubt. |

## Fragen

### Zählen Wartelisten-Anmeldungen, die an Ikiform gehen, zum Formularlimit von Webflow?

Nein. Mit einer eigenen action sendet der Browser direkt an Ikiform, Webflow empfängt die Einsendung also nie. Sie erscheint nicht in Webflows Formulareinsendungen und verbraucht nichts vom Kontingent deines Tarifs.

### Wie füge ich einem Webflow-Formular ein verstecktes Feld hinzu?

Webflow hat kein verstecktes Eingabeelement. Setz ein Code Embed mit einem Eingabefeld vom Typ hidden in das Formular. Code Embed braucht einen bezahlten Site-Tarif oder einen Core-, Growth-, Agency- oder Freelancer-Workspace.

### Kann ich Webflows Erfolgsmeldung mit einer eigenen action behalten?

Ja, mit einem Skript. Webflow zeigt seinen Erfolgsblock nur, wenn es den Post verarbeitet hat, das Skript sendet also mit fetch und zeigt den Block selbst, wie im Beispiel oben.

### Kann Ikiform der Person, die das Formular gesendet hat, eine E-Mail schicken?

Nein. Ikiform schickt E-Mails an dich und dein Team, nicht an den Absender, es gibt also keinen Autoresponder und keine Bestätigungs-E-Mail. Sende einen Webhook an dein E-Mail-Tool und verschicke die Bestätigung von dort.

## Weitere Anleitungen

- [Warteliste für ein neues SaaS](https://ikiform.com/de/guides/waitlist.md): Baue eine Pre-Launch-Warteliste auf deiner eigenen Landingpage: das Formular, Spamschutz, Duplikate, Bestätigungs-E-Mails und ein sauberer Export am Launch-Tag.
- [Warteliste auf Framer](https://ikiform.com/de/guides/waitlist/framer.md): Zwei Wege, auf Framer Wartelisten-Anmeldungen zu sammeln: Framers Formular mit einem Webhook an Ikiform oder eine Code-Komponente, die Limits pro Besucher und Spamprüfungen behält.
- [Warteliste auf Carrd](https://ikiform.com/de/guides/waitlist/carrd.md): Sammle Wartelisten-Anmeldungen auf einer Carrd-Seite: ein Send-to-URL-Formular auf Pro Plus mit UTM-Tracking oder ein eingebettetes HTML-Formular mit Honeypot auf Pro Standard.
- [Warteliste in reinem HTML](https://ikiform.com/de/guides/waitlist/html.md): Eine komplette Wartelisten-Seite in reinem HTML ohne Build, die ohne JavaScript funktioniert, nach dem Laden ein Danke inline zeigt und bei Bedarf zurückfällt.
- [Launch-Liste für Product Hunt](https://ikiform.com/de/guides/waitlist/product-hunt.md): Sammle Wochen vor Product Hunt eine Launch-Liste, markiere jede Anmeldung nach Kanal und sende die Launch-E-Mail in zwei Wellen, abgestimmt auf den Reset nach Pacific Time.
- [Beta-Anmeldung mit Auswahl](https://ikiform.com/de/guides/waitlist/beta-signup.md): Ein Beta-Bewerbungsformular mit Auswahlfragen, die der Server durchsetzt, und ein Skript, das Bewerber bewertet und jede Kohorte aus der Liste auswählt.