SilentForms

Squarespace

Add a custom HTML contact form to Squarespace with a code block, and what to watch for with embeds.

Squarespace's Form block sends submissions to the storage options Squarespace offers, such as an email address, Google Drive, Mailchimp or Zapier. Posting to your own endpoint is not one of them, so to use SilentForms you add the form as HTML in a Code block. Plain HTML in a Code block works on every Squarespace plan; only the optional JavaScript version needs a plan that allows scripts.

Get an access key on the access key page first. It only routes submissions to your inbox, so it is safe in the page's HTML.

Add a Code block#

  1. Edit the page and hover over the section where the form should go.
  2. Click Add block (or +) and choose Code.
  3. Click the pencil icon on the block to open the editor, make sure the mode is HTML, and leave Display Source switched off. With it on, Squarespace shows your code as text instead of rendering it.
  4. Paste the form below and save the page.
<form class="sf-form" action="https://silentforms.com/api/submit" method="POST">
  <input type="hidden" name="accessKey" value="YOUR_ACCESS_KEY_HERE">
  <input type="hidden" name="subject" value="New message from the website">
  <input type="hidden" name="redirect" value="https://www.example.com/thank-you">

  <label for="sf-name">Name</label>
  <input id="sf-name" type="text" name="name" autocomplete="name" required>

  <label for="sf-email">Email</label>
  <input id="sf-email" type="email" name="email" autocomplete="email" required>

  <label for="sf-message">Message</label>
  <textarea id="sf-message" name="message" rows="5" required></textarea>

  <input type="checkbox" name="botcheck" style="display: none;" tabindex="-1" autocomplete="off">
  <button type="submit">Send message</button>
</form>

This version uses no JavaScript, so the browser posts the form and follows the endpoint's redirect. Create a page such as /thank-you in Squarespace and put its full address in the redirect field. Without the field, visitors see the SilentForms default thank-you page. See Redirect after submit.

Style it to match your site#

The Code block renders into your page rather than into a frame, so the form inherits your site's fonts and colours. A few rules make the fields look at home. Add them in the same Code block inside a <style> tag (CSS in <style> tags renders on every plan), or site-wide in Squarespace's custom CSS editor without the <style> tag:

.sf-form { display: grid; gap: 0.5rem; max-width: 36rem; }
.sf-form label { font-weight: 600; }
.sf-form input,
.sf-form textarea {
  width: 100%;
  padding: 0.75rem 0.9rem;
  border: 1px solid currentColor;
  border-radius: 4px;
  background: transparent;
  color: inherit;
  font: inherit;
}
.sf-form button {
  justify-self: start;
  margin-top: 0.75rem;
  padding: 0.75rem 1.5rem;
  border: 0;
  border-radius: 4px;
  background: #111; /* your accent colour */
  color: #fff;
  font: inherit;
  cursor: pointer;
}

currentColor and inherit pick up the text colour of the section, so the fields also read well in dark sections. Set the button colours to your site's accent colour.

Optional: stay on the page with JavaScript#

To show a message in place instead of redirecting, add a script under the form in the same Code block. Squarespace lists JavaScript in Code blocks as available on the Core, Plus and Advanced plans; on other plans the script is kept but does not run, and the form falls back to the plain post above, which still works.

<p id="sf-status" role="status"></p>
<script>
  document.querySelector('.sf-form').addEventListener('submit', async (event) => {
    event.preventDefault();
    const form = event.currentTarget;
    const status = document.getElementById('sf-status');
    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();
      status.textContent = result.ok ? 'Thanks! Your message has been sent.' : result.message;
      if (result.ok) form.reset();
    } catch {
      status.textContent = 'Something went wrong. Please try again.';
    }
  });
</script>

With Accept: application/json the endpoint returns JSON, so the redirect field is ignored and the message appears under the form.

Squarespace gotchas#

  • The form does not show while you are logged in. Squarespace sometimes hides code from logged-in editors as a security measure. Check the page in a private window, or log out.
  • The script does not run. Custom code may not run on a page inside an index page, or when Ajax loading is turned on in your site's settings. Test the page on its own or turn Ajax loading off.
  • Replies go to the wrong address. Keep the visitor's email in a field named email; it becomes the Reply-To of the notification.

Test it#

Open the live page in a private window, send a message and check your inbox. For any error message you see, look it up in Troubleshooting.

Next steps#