# Wix

> Bette in eine Wix-Site ein HTML-Formular ein, das mit fetch sendet, weil Wix eigenes HTML in einem sandboxed Frame ausführt, der die Seite nicht navigieren kann.

Wix Forms behalten Einsendungen in Wix und haben keine Einstellung für eine externe Action-URL. Um Ikiform zu nutzen, setze dein eigenes Formular in ein **Embed HTML**-Element. Wix führt diesen Code in einem sandboxed iframe aus, der von einem separaten Host `filesusr.com` ausgeliefert wird, und das prägt alles Folgende.

## Warum das Formular mit fetch sendet

- Der Frame von Wix erlaubt Formulare, Scripts, Popups und Same-Origin-Zugriff, aber keine Top-Level-Navigation. `target="_top"` kann den Besucher nicht auf eine Danke-Seite bringen.
- Ein normaler Formular-POST würde das Ergebnis im kleinen Frame laden, und die Danke-, Fehler- und Prüfseiten von Ikiform verweigern das Rendern in Frames. Besucher sähen einen leeren oder abgelehnten Frame.
- Mit `fetch` und `Accept: application/json` bleibt der Besucher auf der Seite, und das Ergebnis wird im Embed angezeigt.

## Embed hinzufügen

### Schritt 1: Ein Embed-HTML-Element hinzufügen

Öffne im Wix Editor **Add Elements** > **Embed Code** > **Embed HTML**. In Wix Studio findest du es unter **Embed & Social**. Wähle **Code** statt **Website address**.

### Schritt 2: Formular einfügen

`Embed HTML`:

```html
<form id="contact" action="https://ikiform.com/f/frm_xxxxxxxxxxxxxxxx" method="post" novalidate>
  <label>Email <input name="email" type="email" autocomplete="email" required /></label>
  <p class="error" data-error-for="email"></p>
  <label>Message <textarea name="message" rows="4"></textarea></label>
  <p class="error" data-error-for="message"></p>
  <input name="_gotcha" type="text" tabindex="-1" autocomplete="off" hidden />
  <button>Send</button>
  <p role="status" data-status></p>
</form>

<script>
  const form = document.querySelector("#contact");
  const button = form.querySelector("button");
  const status = form.querySelector("[data-status]");

  form.addEventListener("submit", async (event) => {
    event.preventDefault();
    button.disabled = true;
    status.textContent = "Sending";
    try {
      const response = await fetch(form.action, {
        method: "POST",
        headers: { Accept: "application/json" },
        body: new FormData(form),
      });
      const result = await response.json();
      const fields = result.ok ? {} : result.error.fields ?? {};
      for (const slot of form.querySelectorAll("[data-error-for]")) {
        slot.textContent = fields[slot.dataset.errorFor]?.[0] ?? "";
      }
      status.textContent = result.ok ? "Thanks, we got it." : result.error.message;
      if (result.ok) form.reset();
    } catch {
      status.textContent = "Couldn't reach the server. Try again.";
    } finally {
      button.disabled = false;
    }
  });
</script>

<style>
  body { margin: 0; font: 15px/1.5 system-ui, sans-serif; }
  form { display: grid; gap: 8px; }
  label { display: grid; gap: 4px; }
  input, textarea, button { font: inherit; padding: 8px 10px; border: 1px solid #d4d4d4; border-radius: 6px; }
  button { background: #111; color: #fff; border: 0; }
  .error { margin: 0; color: #b42318; font-size: 13px; }
</style>
```

Der Frame übernimmt die Schriften und Farben deiner Site nicht, daher setzt der `<style>`-Block sie. Pass ihn an deine Site an.

### Schritt 3: Größe anpassen und veröffentlichen

Zieh das Element hoch genug, damit die Feldfehler und die Statuszeile hineinpassen, und veröffentliche dann. Der Editor zeigt für eigenen Code nur einen Platzhalter, teste also auf der veröffentlichten Site.

> Die siteweite Einstellung **Custom Code** von Wix, die einen Premium-Tarif und eine verbundene Domain braucht, fügt Code in Head oder Body der Seite ein. Sie kann kein Formular an einer bestimmten Stelle deines Layouts platzieren, daher bleibt das Embed-HTML-Element der richtige Ort für das Formular selbst.

## Spam-Einstellungen

Lass die Spamprüfung des Formulars ausgeschaltet. Die Menschlichkeitsprüfung von Ikiform braucht entweder ihre Prüfseite oder einen kleinen ikiform.com-Frame, und beides kann nicht aus der Sandbox von Wix heraus laufen. Honeypot und Spam-Scoring laufen trotzdem bei jedem Request.

## Erlaubte Domains

Ikiform sieht den Host des Frames, nicht deine Wix-Domain, weil der Request aus dem iframe heraus gesendet wird. Um ihn zu finden, öffne deine veröffentlichte Seite, untersuche das Embed und lies das `src` des iframes.

| Wo das Formular läuft | Zu Allowed domains hinzufügen |
| --- | --- |
| Der Embed-Frame | Der exakte Host aus dem `src` des iframes, etwa `www-example-com.filesusr.com` |
| Deine Wix- oder eigene Domain | Für das Embed nicht nötig, da der Request nie von dort kommt |

- Füge niemals `filesusr.com` allein hinzu. Jede Site auf diesem Host würde passen, auch die anderer Leute.
- Der Frame-Host wird aus deiner Site-Adresse abgeleitet und ändert sich daher, wenn du eine neue Domain verbindest. Prüfe ihn nach einem Domainwechsel erneut.

## Test-Checkliste

1. Veröffentliche und öffne die Live-Seite in einem privaten Fenster.
2. Sende mit definierten [Feldern](https://ikiform.com/de/docs/fields.md) ein leeres E-Mail-Feld ab. Das Formular hat `novalidate`, daher sollte die Meldung von Ikiform unter dem Feld erscheinen.
3. Sende eine echte Nachricht ab und prüfe, dass die Statuszeile „Thanks, we got it.“ anzeigt und die Einsendung in Ikiform gelistet ist.
4. Schalte die erlaubten Domains mit dem Frame-Host ein und sende erneut ab. Die Einsendung sollte weiterhin unter Empfangen landen.

## Fehlerbehebung

| Was du siehst | Warum | Lösung |
| --- | --- | --- |
| Das Embed wird nach dem Absenden leer oder zeigt eine abgelehnte Seite | Das Script lief nicht, daher hat der Browser normal gesendet und versucht, die Seite von Ikiform im Frame zu laden | Prüfe, dass das Script im Element gelandet ist und dass die Formular-ID `contact` lautet. |
| Einsendungen landen unter Spam mit `origin_mismatch` | Der Frame-Host steht nicht in den erlaubten Domains, oder du hast stattdessen deine Wix-Domain eingetragen | Füge den exakten `filesusr.com`-Host aus dem `src` des iframes hinzu. |
| Die Statuszeile zeigt `Complete the human check, then send the form again.` | Die Spamprüfung steht auf **Ikiform**, was in der Sandbox nicht laufen kann | Schalte die Prüfung für dieses Formular aus. |
| Die Statuszeile meldet, dass der Server nicht erreichbar war | Ein Adblocker oder Netzwerkfilter hat den Request blockiert. Manche Netzwerke blockieren `filesusr.com` selbst. | Teste in einem anderen Netzwerk oder in einem privaten Fenster ohne Erweiterungen. |
| Fehlermeldungen werden abgeschnitten | Das Element ist kürzer als das Formular | Mach das Element im Editor höher. |

## Verwandte Themen

- [Reines JavaScript](https://ikiform.com/de/docs/guides/javascript.md): `fetch` mit Inline-Fehlern.
- [Website-Baukästen](https://ikiform.com/de/docs/guides/site-builders.md): Das Embed, das in jedem Builder funktioniert.
- [Erlaubte Domains](https://ikiform.com/de/docs/spam.md#allowed-domains): Wie Origins abgeglichen werden und was eine Abweichung bewirkt.
- [Spamschutz](https://ikiform.com/de/docs/spam.md): Honeypot, Scoring und die Menschlichkeitsprüfung.