Squarespace

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.

Code-Block hinzufügen

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.

2. Formular einfügen

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

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.

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

• 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

Verwandte Themen

• HTML-FormulareWeiterleitungen, reservierte Felder und der Honeypot.
• Reines JavaScriptfetch mit Inline-Fehlern.
• Website-BaukästenDas Embed, das in jedem Builder funktioniert.
• Erlaubte DomainsWie Origins abgeglichen werden und was eine Abweichung bewirkt.