Squarespace

Squarespace's Form block stores submissions in Squarespace and sends them to the connections it supports. It has no setting for an outside action URL. A Code block in HTML mode renders your own form in the page, so it can post straight to Ikiform.

Add the code block

1. Insert a Code block

   Edit the page, add a block and choose Code. Set Mode to HTML and turn Display Source off; otherwise the form shows as text.

2. Paste the form

   <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 reuses your site's button style. font: inherit and currentColor pick up the section's font and text color, so the form matches light and dark sections.

3. Create the thank-you page

   Add a page under Not linked so it stays out of your navigation, and use its full URL as _redirect. Or set it as Redirect after submit in the form's settings and remove the hidden input.

_redirect is only followed when the form has allowed domains that include the page's domain. Without them, visitors see Ikiform's hosted thank-you page.

Stay on the page (Core and higher)

To show the result without leaving the page, paste this script below the form in the same code block. It posts with fetch, writes Ikiform's message into the status line under the button, and ignores _redirect. The form still posts normally if the script doesn't load.

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

Field errors are written into the same line with the field name in front, such as email: This field is required. For a message under each field, use the slots from Plain JavaScript. A form whose spam check is Ikiform should keep the plain version, since fetch posts get 403 challenge_required instead of the check page.

Allowed domains

Squarespace serves every site on a built-in domain as well as any domain you connect.

• Never add squarespace.com on its own. Every site on that host would match, including other people's.

Test checklist

1. Open the page in a private window. Code blocks may not render while you're logged in, even though visitors see them.
2. Submit the form on the built-in domain and on your connected domain, and confirm both submissions are listed in Ikiform.
3. Check you land on your Not linked thank-you page, not Ikiform's.
4. On Basic, confirm the form still posts. It doesn't need any script.

Troubleshooting

Related

• HTML formsRedirects, reserved fields and the honeypot.
• Plain JavaScriptfetch with inline errors.
• Site buildersThe embed that works in any builder.
• Allowed domainsHow origins are matched, and what a mismatch does.