# 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](#keep-success-state) holt die Blöcke von Webflow zurück.

## Formular einrichten

### Schritt 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`:

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

### Schritt 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](https://ikiform.com/de/docs/fields.md) 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](https://ikiform.com/de/docs/spam.md#human-check) von Ikiform.

### Schritt 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`:

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

### Schritt 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`:

```html
<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äuft | Zu Allowed domains hinzufügen |
| --- | --- |
| Deine eigene Domain | `example.com`, was auch `www.example.com` abdeckt |
| Webflow-Staging | `your-site.webflow.io` |
| Die Designer-Arbeitsfläche | Nichts. 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 siehst | Warum | Lösung |
| --- | --- | --- |
| Seite `404 not_found` nach dem Absenden | **Method** ist GET, daher hat der Browser den Endpunkt wie einen Link geöffnet | Setze **Method** auf **POST** und veröffentliche erneut. |
| Die Danke-Seite von Ikiform statt der Erfolgsmeldung von Webflow | Der Erfolgsblock von Webflow läuft nur, wenn Webflow das Formular verarbeitet | Setze **Redirect after submit** oder füge das Script aus Schritt 4 hinzu. |
| Einsendungen landen im Spamfilter mit `origin_mismatch` | Die sendende Seite steht nicht in den erlaubten Domains des Formulars | Füge den Host aus der Tabelle oben hinzu. Mit **Reject** bekommen dieselben Requests stattdessen `403 origin_not_allowed`. |
| `422 validation_failed` mit einem Unknown field | Ein Feldname wie `Email` oder `g-recaptcha-response` steht nicht in der Felddefinition des Formulars | Benenne das Input in die Feld-ID um oder entferne das reCAPTCHA-Element. |
| Das Script tut nichts | Du 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 `fetch` | Schalte die Prüfung für dieses Formular aus oder entferne das Script. |

## Verwandte Themen

- [Website-Baukästen](https://ikiform.com/de/docs/guides/site-builders.md): Das Embed, das in jedem Builder funktioniert.
- [HTML-Formulare](https://ikiform.com/de/docs/html.md): Weiterleitungen, reservierte Felder und der Honeypot.
- [Erlaubte Domains](https://ikiform.com/de/docs/spam.md#allowed-domains): Wie Origins abgeglichen werden und was eine Abweichung bewirkt.
- [Fehler](https://ikiform.com/de/docs/errors.md): Jeder Fehlercode mit Ursache und Lösung.