Adding a Form to Squarespace

In this guide we’ll show you how to add a contact form to your Squarespace website using Formspree.

Formspree is a powerful backend for your Squarespace forms. With just a small configuration tweak, you can start receiving form submissions directly in your inbox—no need for Zapier, server-side code, or third-party plugins!

By the end of this guide, you’ll have a fully functional custom contact form on your Squarespace website that submits via Formspree and notifies you by email.

Prerequisites

To follow this guide, you’ll need:

• A Formspree account (you can sign up for free here)
• A Squarespace website where you can add a Code block

Adding a Form to Squarespace

Squarespace includes a built-in Code block that you can use to render a simple HTML form. You can then set the action attribute of this form to a Formspree endpoint to collect submissions into Formspree and display a thank you message upon submission!

Step 1: Add the Code Block

In the Squarespace editor, click the + Add Block button in the section where you want to add the form:

In the new block dialog, search for Code:

Add the code block to the section. Here’s what it will look like:

This is where you’ll add the HTML code of the form.

Step 2: Add the Form Code

You can use HTML tags like <form> and <input> to create the form you like. You can then use the <style> tag to style it according to your choice.

To make your life simpler, we have create a collection of commonly used HTML forms in our Forms Library. Let’s use a simple contact form from the library to go ahead with this tutorial.

Go to the simple contact form page and copy the HTML code for the form. In your code block, paste the HTML code snippet and make sure to keep the Display Source Code switch off.

You will notice the form appears in the Squarespace editor, but it looks quite basic:

To make it look better, you will need to add the CSS styles. For that, in the HTML code snippet that you have pasted, add a <style></style> code block just above the </form> tag. Now, copy the CSS from the simple contact form page, and paste it in between the <style> and </style> tags. Here’s what the structure of your code should look like when done:

<form
  action="https://formspree.io/f/{FORM_ID}"
  class="fs-form"
  method="POST"
>
  <!-- Rest of the form code -->


  <!-- Add the following <style> tag -->
  <style>
    /* Paste the CSS here */
  </style>

</form>

Once done correctly, you should be able to view the form in the Squarespace preview:

This means that you have set up the HTML code correctly! However, if you try saving and publishing the site and submitting the form, you will see the following error:

You’re running into this error because you have not configured the action attribute of the form to submit the form values to a Formspree form ID. Let’s do that next!

Step 3: Create a Form Endpoint

Now, you need to create a form endpoint using Formspree. If you don’t have an account yet you can sign up here.

To start, create a new form with ++ Add New > New Form, call it Contact form and update the recipient email to the email where you wish to receive your form submissions. Then click Create Form.

On the form details page, you will find the Form Endpoint:

Step 4: Set the Form action to the Formspree Form Endpoint

Go back to editing the form code, and replace the <form> tag’s action URL with the endpoint you copied from the Formspree dashboard. Now, you’re all set!

Step 5: Publish and Test Your Site

Click the Save button and preview your site. You can now try filling out the form and hitting Submit. Your data will be sent directly to Formspree.

If the form submits correctly, you’ll see a thank-you message like the following:

You should also receive an email notification with the submission details.

Bonus Section: Using AJAX to Submit your Squarespace Form

If you are looking to collect form submissions without redirecting your users to a separate “thank you” page, you can do that by using AJAX in your form’s HTML code. To do that, just add a <script> tag to the <form> tag (just like you added the <style> tag for CSS earlier), and paste the following script in it:

<script>
  var form = document.getElementsByClassName("fs-form")[0];
  async function handleSubmit(event) {
  event.preventDefault();
  var data = new FormData(event.target);
  fetch(event.target.action, {
    method: form.method,
    body: data,
    headers: {
      'Accept': 'application/json'
  }
  }).then(response => {
    if (response.ok) {
      window.alert("Thanks for your submission!")
      form.reset()
    } else {
      response.json().then(data => {
      if (Object.hasOwn(data, 'errors')) {
        window.alert(data["errors"].map(error => error["message"]).join(", "))
      } else {
        window.alert("Oops! There was a problem submitting your form")
      }
    })
  }
  }).catch(error => {
    window.alert("Oops! There was a problem submitting your form")
  });
  }
  form.addEventListener("submit", handleSubmit)
</script>

Here’s what the structure of the HTML code snippet should look like once you have added the styles and the script:

<form
  action="https://formspree.io/f/{FORM_ID}"
  class="fs-form"
  target="_top"
  method="POST"
>
  <!--Form fields here-->
  <div class="fs-button-group">
    <button class="fs-button" type="submit">Submit</button>
  </div>

  <style>
    /** Form styles here */
  </style>

  <script>
    // The AJAX script here
  </script>

</form>

That’s it, you’re done!

You’ve just added a fully working contact form to your Squarespace site using custom HTML and Formspree. No integrations or third-party apps; just fast, secure form handling out of the box.

To explore additional features like redirecting after submission or connecting to APIs, check out Formspree’s documentation.

Got Feedback?