How to Customize Your Squarespace Forms with CSS

The Squarespace form block is the easiest way for someone to get in contact with you through your Squarespace website. It can be set up as a contact form, a client/customer support ticket form, connected to Zapier and more.

Yet this versatile block lacks one function - the ability to style it very much! Unfortunately, Squarespace’s native features will do little to customise this block to your brand...in fact, the only thing you can do is adjust the colour and font styles.

With a little CSS, you can customize your Squarespace form block to your heart's content! Keep reading to get the exact snippets you need to make changes - whether that’s giving the form fields a background or adding your own custom font.

Where to Add the CSS

To add the code, go to Design > Custom CSS and paste in the CSS snippet you need. Each of the snippets below adjust different areas of your form.

Ways to Customise the Form with CSS

In Squarespace, forms are made up of lots of elements which can be edited using CSS. Some of these elements include titles, descriptions, form fields and buttons. Make sure to only copy and paste in the snippets that you need for your form!

Titles

These appear above each of the form fields and indicate the information that needs to be filled in below. 

.form-wrapper .field-list .title {  
  font-family: YOURFONTFAMILY;  
  font-size: 12px;  
  color: #000000;  
  letter-spacing: .10em;  
  text-transform: uppercase;
}

Replace YOURFONTFAMILY with the name of your chosen font. All other properties can be adjusted.

Descriptions

Descriptions are the more detailed lines of text that can be added below titles. These usually expand on the form field requirements or make the title easier to understand. 

.form-wrapper .field-list .description {
  font-family: YOURFONTFAMILY;
  font-size: 10px;
  color: #000000;
  letter-spacing: .10em;
  text-transform: uppercase;
}

Replace YOURFONTFAMILY with the name of your chosen font. All other properties can be adjusted.

Captions

Captions are the small pieces of text that appear beneath a form field to give further detail. Usually these are “Name” and “Last Name” but they can be different from this.

.form-wrapper .field-list .field .caption {
  font-family: YOURFONTFAMILY;
  font-size: 10px;
  color: #000000;
  letter-spacing: .10em;
  text-transform: uppercase;
}

Replace YOURFONTFAMILY with the name of your chosen font. All other properties can be adjusted.

Form Fields

These are the boxes that text must be entered into before a form can be submitted, and can be one line or larger to accommodate more text.

.form-wrapper .field-list .field .field-element {
  background-color: #fefefe;
  border: 1px solid #000;
  border-radius: 0;
}

I recommend changing the border property to border: none as a border like this doesn't usually look great around such a small area.

Button

This is the button that submits the contents of the form to the chosen email address.  

.form-wrapper input[type=submit] {
  color: #98635D;
  background-color: #ffffff;
  font-family: YOURFONTFAMILY;
  font-size: 10px;
  border: 1px solid #000000;
}

Replace YOURFONTFAMILY with the name of your chosen font. All other properties can be adjusted.