# Website-Baukästen

> Nutze Ikiform in No-Code-Website-Baukästen, in die du eigenes HTML einfügen kannst, etwa über einen Embed- oder Code-Block.

Ikiform funktioniert überall, wo du ein echtes HTML-`<form>` auf die Seite bringen kannst, weil ein einfacher Formular-Post kein Skript braucht. Die meisten Website-Baukästen bieten einen Embed-, Code- oder Custom-HTML-Block. Füge dort ein Formular ein und richte `action` auf deinen Endpunkt aus.

## Anleitungen nach Baukasten

- [Webflow](https://ikiform.com/de/docs/guides/webflow.md): Der Form Block mit einer eigenen Action.
- [Framer](https://ikiform.com/de/docs/guides/framer.md): Ein Formular-Webhook oder eine Code-Komponente.
- [WordPress](https://ikiform.com/de/docs/guides/wordpress.md): Der Custom-HTML-Block oder ein Shortcode.
- [Wix](https://ikiform.com/de/docs/guides/wix.md): Ein HTML-Embed, das mit `fetch` sendet.
- [Squarespace](https://ikiform.com/de/docs/guides/squarespace.md): Ein Code-Block, mit oder ohne JavaScript.
- [Carrd](https://ikiform.com/de/docs/guides/carrd.md): Ein eigenes Formular, das an eine URL sendet.

> Das funktioniert nur, wenn der Baukasten dein HTML unverändert rendert. Das eigene Formular-Widget eines Baukastens sendet meist stattdessen an die Server des Baukastens; verwende es nur, wenn du eine eigene Action-URL mit der POST-Methode setzen kannst.

## Das Embed

`Custom-HTML-Block`:

```html
<form action="https://ikiform.com/f/frm_xxxxxxxxxxxxxxxx" method="post" target="_top">
  <label>
    Email
    <input name="email" type="email" required />
  </label>
  <label>
    Message
    <textarea name="message"></textarea>
  </label>
  <input name="_gotcha" type="text" tabindex="-1" autocomplete="off" hidden />
  <button>Send</button>
</form>

<style>
  form { display: grid; gap: 12px; max-width: 420px; font: inherit; }
  label { display: grid; gap: 4px; }
  input, textarea { font: inherit; padding: 8px 10px; border: 1px solid #d4d4d4; border-radius: 6px; }
  button { font: inherit; padding: 8px 14px; border-radius: 6px; border: 0; background: #111; color: #fff; }
</style>
```

- Baukästen platzieren eigenen Code oft in einem iframe. Die Danke-, Fehler- und Prüfseiten von Ikiform lassen sich nicht in Frames laden, deshalb öffnet `target="_top"` das Ergebnis im ganzen Fenster. Erlaubt der Frame des Baukastens keine Top-Navigation, wie bei Wix, sende stattdessen mit `fetch`; siehe [Wix](https://ikiform.com/de/docs/guides/wix.md).
- Setze **Redirect after submit** im Formular, um die Leute zurück auf eine Dankeseite auf deiner Website zu schicken.
- Styles im Block erben eventuell nicht die Styles deiner Website; das `<style>` oben gibt dem Formular einen sauberen Ausgangspunkt.

## Erlaubte Domains

Wenn du erlaubte Domains setzt, trage jede Adresse ein, unter der die Website ausgeliefert wird: deine eigene Domain und die Vorschau- oder Staging-Domain des Baukastens. Posts von einer nicht eingetragenen Domain werden standardmäßig als Spam gespeichert und zeigen im Dashboard den Grund `origin_mismatch`.

Manche Baukästen rendern Embeds in einem Frame, dessen `Origin` `null` ist. Ikiform greift dann auf den `Referer` zurück. Entfernt der Baukasten beide, lassen sich Posts keiner Domain zuordnen; lass die erlaubten Domains für dieses Formular leer oder stelle die Richtlinie bei Abweichungen auf Spam statt Ablehnen.

## Menschlichkeitsprüfung

Die **Ikiform**-Menschlichkeitsprüfung funktioniert ohne zusätzlichen Code, wenn das Formular normal sendet: Der Browser navigiert zu einer kurzen Prüfseite auf ikiform.com, die den Post weiterschickt. Sie kann nicht aus einem Frame laufen, der Top-Navigation blockiert, oder aus Code, der mit `fetch` sendet. Vermeide **Your own Turnstile keys** in Baukästen, da das Cloudflares Skript auf der Seite braucht.