# Squarespace

> Füge ein HTML-Formular in einen Squarespace-Code-Block ein. Einfaches HTML funktioniert mit jedem Tarif; für JavaScript brauchst du den Core-Tarif oder höher.

Der Form-Block von Squarespace speichert Einsendungen in Squarespace und sendet sie an die unterstützten Verbindungen. Er hat keine Einstellung für eine externe Action-URL. Ein Code-Block im HTML-Modus rendert dein eigenes Formular in der Seite, sodass es direkt an Ikiform senden kann.

| Tarif | Was ein Code-Block ausführen kann |
| --- | --- |
| Basic | HTML und CSS. Scripts und iframes werden nicht gerendert, nutze also das einfache Formular. |
| Core, Plus, Advanced | HTML, CSS und JavaScript. Du kannst die erweiterte Version hinzufügen. |

## Code-Block hinzufügen

### Schritt 1: Einen Code-Block einfügen

Bearbeite die Seite, füge einen Block hinzu und wähle **Code**. Setze **Mode** auf **HTML** und schalte **Display Source** aus; sonst wird das Formular als Text angezeigt.

### Schritt 2: Formular einfügen

`Code-Block`:

```html
<form id="contact" class="ikiform" action="https://ikiform.com/f/frm_xxxxxxxxxxxxxxxx" method="post">
  <label>Name <input name="name" autocomplete="name" required></label>
  <label>Email <input name="email" type="email" autocomplete="email" required></label>
  <label>Message <textarea name="message" rows="5"></textarea></label>
  <input type="hidden" name="_redirect" value="https://example.com/thank-you">
  <input name="_gotcha" type="text" tabindex="-1" autocomplete="off" hidden>
  <button type="submit" class="sqs-block-button-element">Send</button>
  <p role="status" data-status></p>
</form>

<style>
  .ikiform { display: grid; gap: 12px; max-width: 480px; }
  .ikiform label { display: grid; gap: 4px; }
  .ikiform input, .ikiform textarea { font: inherit; padding: 10px 12px; border: 1px solid currentColor; }
</style>
```

`sqs-block-button-element` übernimmt den Button-Stil deiner Site. `font: inherit` und `currentColor` übernehmen Schrift und Textfarbe des Abschnitts, sodass das Formular zu hellen und dunklen Abschnitten passt.

### Schritt 3: Danke-Seite erstellen

Füge eine Seite unter **Not linked** hinzu, damit sie nicht in deiner Navigation erscheint, und nutze ihre vollständige URL als `_redirect`. Oder setze sie in den Einstellungen des Formulars als **Redirect after submit** und entferne das versteckte Input.

`_redirect` wird nur befolgt, wenn das Formular erlaubte Domains hat, die die Domain der Seite enthalten. Ohne sie sehen Besucher die gehostete Danke-Seite von Ikiform.

## Auf der Seite bleiben (Core und höher)

Um das Ergebnis anzuzeigen, ohne die Seite zu verlassen, füge dieses Script unter dem Formular in denselben Code-Block ein. Es sendet mit `fetch`, schreibt die Meldung von Ikiform in die Statuszeile unter dem Button und ignoriert `_redirect`. Lädt das Script nicht, sendet das Formular trotzdem normal.

`Code-Block, unter dem Formular`:

```html
<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 = Object.entries(result.ok ? {} : result.error.fields ?? {});
      const problems = fields.map(([name, messages]) => name + ": " + messages[0]).join(". ");
      status.textContent = result.ok ? "Thanks, we got it." : problems || result.error.message;
      if (result.ok) form.reset();
    } catch {
      status.textContent = "Couldn't reach the server. Try again.";
    } finally {
      button.disabled = false;
    }
  });
</script>
```

Feldfehler werden mit vorangestelltem Feldnamen in dieselbe Zeile geschrieben, etwa `email: This field is required`. Für eine Meldung unter jedem Feld nutze die Slots aus [Plain JavaScript](https://ikiform.com/de/docs/guides/javascript.md). Ein Formular, dessen Spamprüfung auf **Ikiform** steht, sollte bei der einfachen Version bleiben, da `fetch`-Requests `403 challenge_required` statt der Prüfseite bekommen.

## Erlaubte Domains

Squarespace liefert jede Site unter einer eingebauten Domain aus, zusätzlich zu jeder Domain, die du verbindest.

| Wo das Formular läuft | Zu Allowed domains hinzufügen |
| --- | --- |
| Eingebaute Domain | `your-site.squarespace.com` |
| Verbundene Domain | `example.com`, was auch `www.example.com` abdeckt |

- Füge niemals `squarespace.com` allein hinzu. Jede Site auf diesem Host würde passen, auch die anderer Leute.

## Test-Checkliste

1. Öffne die Seite in einem privaten Fenster. Code-Blöcke werden eventuell nicht gerendert, während du angemeldet bist, obwohl Besucher sie sehen.
2. Sende das Formular auf der eingebauten und auf deiner verbundenen Domain ab und prüfe, dass beide Einsendungen in Ikiform gelistet sind.
3. Prüfe, dass du auf deiner Not-linked-Danke-Seite landest, nicht auf der von Ikiform.
4. Prüfe bei Basic, dass das Formular trotzdem sendet. Es braucht kein Script.

## Fehlerbehebung

| Was du siehst | Warum | Lösung |
| --- | --- | --- |
| Der Code wird auf der Seite als Text angezeigt | **Display Source** ist eingeschaltet, oder **Mode** ist nicht HTML | Setze **Mode** auf **HTML** und schalte **Display Source** aus. |
| Das erweiterte Script läuft nie | Die Site hat den Tarif Basic, bei dem Scripts in Code-Blöcken nicht gerendert werden | Bleib beim einfachen Formular oder wechsle auf Core. |
| Die Danke-Seite von Ikiform statt deiner eigenen | Keine erlaubten Domains, oder `_redirect` nutzt `http:` oder eine andere Domain | Füge deine Domains hinzu oder setze **Redirect after submit**. |
| 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`. |
| Das Formular sieht im Editor ungestylt aus, für Besucher aber gut | Code-Blöcke werden nicht immer gerendert, während du angemeldet bist | Prüfe die Seite in einem privaten Fenster. |

## Verwandte Themen

- [HTML-Formulare](https://ikiform.com/de/docs/html.md): Weiterleitungen, reservierte Felder und der Honeypot.
- [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.