How to Create Squarespace Forms and Customize Them With CSS

Most online service-based businesses need a form on their website to collect client inquiries. E-commerce stores use forms too, to run surveys or collect messages for custom products. Even brick-and-mortar stores often have a contact form on their website!

But, if you’ve been designing Squarespace websites for long, you’ve probably noticed that Squarespace forms are pretty basic. There aren’t a whole lot of options for customizing them.

Fortunately, if you want something done…there is usually a way to do it with CSS! Keep reading, and learn how you can use code to customize your form titles, captions, and messages.

The first half of this video tutorial focuses on how to add and edit Squarespace forms. So, if you’re already familiar with creating forms in Squarespace, just skip to the second half of the video for the CSS tutorial portion.

How to Add a New Form

There are actually two ways to add forms in Squarespace!

1. Add a form section. For this method, add a new section to your page and select ‘Forms’ under the section types. The form sections all contain a form block, as well as other elements (images, text, etc.) in pre-designed layouts.

2. Add a form block. If you want to design the layout yourself, just add a form block to any section on your page. In Fluid Engine, you can easily drag it around the grid editor and adjust the form dimensions.

Editing Your Form Settings

Once you add a new Squarespace form, there are several settings you need to edit to make sure the form is set up correctly.

1. Name the form. Naming your form may seem trivial, but when someone submits a message through the form and it is emailed to you, the name will show up as the email subject line. So, make sure the name is something that will make sense to you when you receive the messages.

2. Change the button text. You’ll probably want to change your button CTA to custom CTA.

3. Edit the form fields. By default, when you add a new Squarespace form, it contains fields for the first and last name, email address, subject line, and message. But depending on your business, you may want to add custom fields or rearrange the order.

4. Write a post-submit message. Finally, what do you want your clients to see when they submit the form? You can write a post-submit message to thank your clients for their inquiry, or redirect them to a thank-you page on your website.

You can also make your form a pop-up! When editing your form, click on “Design,” then enable “Lightbox.” This will make your form a pop-up, which only opens when your customers click on a button to open the form.

How to Store Squarespace Forms

Once your form is all set up, you will notice there is still a red box around your form…meaning it isn’t working. That’s because you have to connect your form to a storage option, so you can actually receive the messages.

Squarespace offers four options for storing your forms:

• Email

• MailChimp

• Zapier (if you use a different email system than MailChimp)

• Google Drive

I recommend setting your form storage to two different places. That way, you always have a back-up for your form messages. For example, let’s say you connect your email and Google Drive. Every time someone submits a message, it will be both emailed to you and saved in your Google Drive.

How to Customize Your Forms With CSS

Now, we can finally get into the interesting part: customizing your forms with code. There are a ton of ways you can change form elements with CSS!

Below, I’ve listed CSS snippets to customize your form titles, captions, and messages. To get started, paste one of these code snippets into the area for Custom CSS on your Squarespace website.

CSS to Customize Form Titles

/* REBECCA GRACE DESIGNS */
/* Form Titles */
.form-wrapper .field-list .title {
 CODE GOES HERE
}

CSS to Customize Form Captions

/* REBECCA GRACE DESIGNS */
/* Form Caption */
.form-wrapper .field-list .caption-text {
  CODE GOES HERE
}

CSS to Customize the Form Message

/* REBECCA GRACE DESIGNS */
/* Form Input */
.form-wrapper .field-list .field .field-element {
 CODE GOES HERE
}

CSS to Place Form Elements Side-by-Side

You can also use CSS to change your form layout and place fields side-by-side, which I cover in a separate tutorial. Click here to watch the video.

Okay, so now you have code to customize the form titles, captions, and message.

But, by themselves, these code snippets are useless. You will need to replace the placeholder “CODE GOES HERE” with a line from this CSS snippet:

font-size: 1rem;
font-family: ariel;
font-style: italic;
color: black;
background: #e6e6e6;
border-radius: 5px;

For example, let’s say you want to change your form title font size and color. First, paste in the CSS to change the form title. Then replace the CODE GOES HERE placeholder with the line font-size: 1rem; and the line color: black;.

Afterwards, you can edit the CSS as needed. If “1rem” isn’t big enough, you can change it to “2rem” or “3rem.” You can change “black” to a color that matches your brand palette.

Just repeat this process for your form captions and message, and you can completely customize the fonts and background in a couple minutes.

If you want to customize your Squarespace forms further, I offer many more CSS snippets in my Encyclopedia of Code. I provide CSS to customize the buttons, change the size of the checkboxes, and much more! Click here to learn more about the Encyclopedia of Code.

Here are some other posts you may like:

• Place Two Items Beside Each Other in a Form

• The Ultimate Guide to Carousels in Squarespace

• 4 Hover Effects for the Squarespace Shape Block