How to Add & Style Squarespace Forms

add and style Squarespace forms

Contact forms. Surveys. Registration forms. Customer feedback forms. Opt in forms.

These are just some of the types of forms we use on our websites.

Just think about how many online forms you’ve filled in this week. I’ve already filled in one today!

Most of us have at least one form on our websites. Squarespace forms are easy to add, but up until recently they’ve been really boring - just plain grey boxes. You couldn’t add your own colours or change the style much.

But that’s all changed for Squarespace 7.1 websites. Squarespace just added a ton of new styling options to their forms!

Table of Contents

    How to Add a Squarespace Form

    add form block squarespace

    Adding a form in Squarespace 7.1 is as easy as adding a text box or image.

    1. Click EDIT in the top left corner of the page you want the form

    2. Hover over the section you want the form and click + Add Block

    3. Choose Form from the list and drag the form into place


     Alternatively, you can add a new section layout that has a form.

    1. Click EDIT in the top left corner of the page you want the form

    2. Hover over the page and click Add Section where you want the new section

    3. Click on a layout to select

    add Squarespace form section

     

    Add Content to Your Form

    Now it’s time to add (or remove) some form fields, so that your form has the fields you want and need. You’ll also want to add a name to your form, so that you know which form on your site has been used when you get an email. This can also help you to identify spam or phishing emails that look like they’ve been sent from your website.

    You can also change text on your submission button and decide what happens after the form has been submitted.

     

    Add Form Fields

    edit form fields in Squarespace
    1. Click onto your form then click the pencil icon to edit

    2. In the Content Tab click Edit Form Fields

    3. Click Add Field, then choose your field from the list

    4. To edit the form field (ex: change the label name, add a description, delete) click on the field name or arrow next to the name

    5. Click out of the form to finish

    While in the Content tab you can change the Form Name and Button Text.

     

    To Remove Form Fields or Change the Order of the Fields

    1. Click onto your form then click the pencil icon to edit

    2. In the Content Tab click Edit Form Fields

    3. In the top right hand corner click Edit

    4. Click the red circle to remove a field or drag a field to a new location

    5. Click Done

    6. Click out of the form to finish

     

    Add Follow-up Questions to Your Form

    As of February 2025 you can now add follow-up questions to your form. This new feature is available for any multiple choice form field type such as a dropdown, checkbox, radio or survey field.

    To add follow up question:

    1. Add your form field and options

    2. Click the three dots ••• next to the option that you want to follow up

    3. Choose add a follow up question

    4. Select your new field and add your question

    5. Click out of the form to finish

    You can even add a follow-up question to your follow up!

    follow up question on squarespace form

    Add Storage for the Form

    Your form is set up to email results to the owner of the website (the one on your Squarespace account). If you want to change the email address or add secondary storage you’ll need to use the storage tab of your form editor.

    1. Click onto your form then click the pencil icon to edit

    2. Click on the Storage tab

    3. Click on the email address to enter a new address

    4. Click on Additional Storage to connect your form to Google Drive, Zapier or MailChimp

    5. Click out of form to finish


    How to Style Squarespace Forms

    Unless you have already changed the styles another form on your website, your new form will look like the same old boring grey boxes. You can style your forms from the Form Editor and/or in Site Styles. I would recommend starting in the Form Editor and then moving to Site Styles if you want more detailed options.

    *Changes to your form styles will affect all forms on your website.

     

    Style Squarespace Forms with the Form Editor

    Form editor - design tab

    The form editor allows you to make some quick style changes. You can choose one of Squarespace’s form styles or form packs and change the button style and alignment. You can also choose to add a background for your form and to turn your form into a lightbox.

    1. Click EDIT in the top left corner of the page that your form is located

    2. Click onto your form then click the pencil icon to open the Form Editor

    3. Click on the Design tab

    4. Choose a Form Style or Button Style from the dropdowns and/or switch the toggle to the on position for the Background or Lightbox feature.

    5. Click Save in the top left corner of your page

     

    Style Squarespace Forms with Site Styles

    Through Site Styles you can make much more detailed changes to your form style, such as the fonts, colours and spacing of your form. You can also change the form pack or main form style.

    You can’t change the button styles for your form, add a background or turn your form into a lightbox in Site Styles. You will need to make those changes through the Form Editor (above).

     

    To access your form Site Styles

    1. Click on the paintbrush icon in the top right corner to access Site Styles

    2. Click Forms

    site styles paintbrush icon
     

    You will now see your main style option to change your Form Pack, your Field Shape (ex: pill, square), Field Fill (whether your form fields are filled or blank), Border style, Border Thickness and Padding (how big the space is inside the field).

     

    Below the main options you’ll see 4 further styling submenus.

    Field Options: This menu allows you to make changes to the checkbox, radio and survey fields, including things like the field style (you can change checkboxes and radio fields into buttons), field fill and layout.

    Fonts: This menu lets you specify the fonts for all the fonts in your form.

    Form Spacing: Does the spacing seem a little tight on your form? Use this menu to change the spacing between fields, labels and descriptions.

    Colors: This will probably be the menu that you use most. Instead of the default form colours you can choose to use your theme colours by switching the toggle to the on position. You can also change individual colours for things like your background, button, field border and fonts.


    I’m so happy that Squarespace has now made their forms as gorgeous as their websites. You now have the tools to make yours beautiful too.

    I can’t wait to see what you make!

     
    Marni Cleiman

    Marni is a Canadian web designer based in Burlington, Ontario (Greater Toronto Area). She specializes in creating Squarespace websites for serviced based small businesses & creative entrepreneurs. She works one on one with her clients, creating websites that are not only strategic, beautiful and professional, but also easy to use and maintain.

    Previous
    Previous

    How to Style Your Header Navigation in Squarespace 7.1

    Next
    Next

    What I Learned from My Year of Weekly Blogging