July 2024: the code has been updated to include two optional snippets to change the descriptor or caption for “First Name” and “Last Name” fields, if needed!

If you’re using Squarespace forms on your site – instead of or along with other information collection methods like Dubsado – then today’s tutorial is for you!

Because if you’re looking to make your site (or your client’s) more on-brand or unique, customizing your Squarespace forms is a pretty simple, yet effective, way to add a more personal touch!

We’re going to be looking at how you can style some of the different areas of your form, so you know exactly how to target them with a bit of CSS.

Ready? Let’s jump in!

Styling Squarespace form fields

We’ll be starting off with a simple contact form that has a couple of regular fields, a date field and a radio-button option section.

You can use any fields you like!

First, let’s go ahead and change the background color of the input fields from that default off-white to pure white.

To do that, let’s check out what the field is called:

We can see below its an input element with two classes:

I’ll be using the first one: .field-element

Keep in mind you could also use the selector we have on the right side of the Inspect Element window above, since as you can see the background color and all the styles are there, but I’m a rebel so I want to build my own selector and make it shorter than that.

To make sure I’m targeting the inputs in my form and not, for example, on any newsletter blocks I may have on my site, I’ll be targeting the form container as well.

This time I’m going for the form block itself, highlighted above, so I’ll use the appropriately named class .form-block.

Perfect, now in the Custom CSS window I can build my selector:

.form-block .field-element {
  
}

Alright, let’s change the background color!

.form-block .field-element {
  background: #fff !important;
}

I have to use !important here because the way I’m targeting that input element is LESS specific than the way Squarespace did in their snippet (you know… the one I chose not to use?). Therefore, I have to forcefully overwrite it by adding the important rule.

If you went ahead and used the full snippet, you probably don’t need it!

Anyway, here’s what that looks like:

Ok, next, I’ll be removing the current border. I need to set this as !important as well for the same reason as before:

.form-block .field-element {
  background: #fff !important;
  border: none !important;
}

And now I’m going to bring back the bottom border but style it my way, making it a bit thicker and darker:

.form-block .field-element {
  background: #fff !important;
  border: none !important;
  border-bottom: 2px solid black !important;
}

In this case, I have to set the border-bottom as important as well because I need to overwrite the previously forced empty border.

So, with those adjustments this is what we get:

Nice right?

Alrighty, let’s move onto styling the font.

I’m going to be starting with the titles for the fields.

As we can see the titles have a class called .title so we’ll use that in conjunction with our entire form container class, .form-block.

.form-block .title {
  
}

Ok, I’m going to be making these titles all caps, smaller in size, bolder and add a little bit of letter spacing to them, like so:

.form-block .title {
  text-transform: uppercase;
  font-size: 12px;
  font-weight: bold;
  letter-spacing: .05em;
}

Looking good!

Let’s move onto the smaller text below some of our input fields, like First Name and Last Name.

Zooming in…

We can see these are label elements with a class of caption, so using that in our Custom CSS window along with the entire form block container selector we get:

.form-block .caption {
  
}

And if we just change the color for a dark grey, this is what we get:

.form-block .caption {
  color: #898989;
}

Nice!

Now how about we style the options from the radio-button section juuuuust a little bit.

Ok so in this case, we can see that our options are label elements.

However, as you might remember, our captions (aka the small text below our fields) are also a label element. This means that if we target them just like that, any style we apply here will also affect our previously styled captions.

To avoid this, we need to make sure we’re only targeting the label elements inside this option section.

And if we look just one line above, we can see that our label is inside another container with a class of .option, so we’re set!

With all this information we can build our snippet:

.form-block .option label {

}

And in this case, I just want to make this text italic:

.form-block .option label {
  font-style: italic;
}

Awesome!

Adding a background to Squarespace forms

Last but not least, what if we give this form some color?

Let’s take a look and find the container we can use to set a nice background color for this contact form.

Alright, we have .form-wrapper here so we’ll use that.

Now, I know you may be thinking “B, weren’t we already using the form-block class to target the whole block? Why not add the color to that?“

Well, precisely because of that.

Since with that class we’re targeting the entire block, we would be adding a background color to any additional padding and content it may have, which I personally want to skip.

Therefore, I rather go with one of the inner containers that – as we can see from the full screenshot above – is tightly surrounding my form content.

That being said, don’t hesitate to try it out with a different container!

Moving along, as I said, I’ll be targeting that .form-wrapper container in my Custom CSS window.

.form-wrapper {
  
}

And now we can give it a nice background color…

.form-wrapper {
  background: #CCD1C9;
}

Add some padding to it, to detach the content from the edges…

.form-wrapper {
  background: #CCD1C9;
  padding: 30px;
}

And finish it off with a top border that matches the style of the fields!

.form-wrapper {
  background: #CCD1C9;
  padding: 30px;
  border-top: 2px solid black;
}

Awesome! Here’s the final result:

So there you have it!

That’s how you can customize your Squarespace forms to make them look more on-brand and unique!

Until next time,

B.

Full code

July 2024: the code has been updated to include two optional snippets to change the descriptor or caption for “First Name” and “Last Name” fields, if needed!

June 2023: the code below has been updated to work with 7.0, 7.1 CE and 7.1 CE!

Squarespace 7.0

/*CUSTOMIZE SQUARESPACE FORMS 7.0*/
//Styling the form fields
.form-block .form-item input,
.form-block .form-item textarea,
.form-block .form-item select {
  background: #fff !important;
  border: none;
  border-bottom: 2px solid black;
}

//Styling field titles
.form-block .title {
  font-size: 12px;
  font-weight: bold;
  letter-spacing: .05em;
  text-transform: uppercase;
}

//Styling the smaller titles
.form-block .caption {
  color: #898989;
}

//Styling the radio button options
.form-block .option label {
  font-style: italic;
}

//Styling the form container
.form-wrapper {
  background: #CCD1C9;
  border-top: 2px solid black;
  padding: 30px;
}

//Changing the 'First Name' caption text
.form-block .first-name .caption-text {
  visibility: hidden;
}
.form-block .first-name .caption-text::before {
  content: "Name";
  visibility: visible;
}

//Changing the 'Last Name' caption text
.form-block .last-name .caption-text {
  visibility: hidden;
}
.form-block .last-name .caption-text::before {
  content: "Last Name";
  visibility: visible;
}

Squarespace 7.1

/*CUSTOMIZE SQUARESPACE FORMS 7.1*/
//Styling the form fields
.sections .form-block .form-item input,
.sections .form-block .form-item textarea,
.sections .form-block .form-item select {
  background: #fff !important;
  border: none;
  border-bottom: 2px solid black;
}

//Styling field titles
.sections .form-block .title {
  font-size: 12px;
  font-weight: bold;
  letter-spacing: .05em;
  text-transform: uppercase;
}

//Styling the smaller titles
.sections .form-block .caption {
  color: #898989;
}

//Styling the radio button options
.sections .form-block .option label {
  font-style: italic;
}

//Styling the form container
.sections .form-wrapper {
  background: #CCD1C9;
  border-top: 2px solid black;
  padding: 30px;
}

//Changing the 'First Name' caption text
.form-block .first-name .caption-text {
  visibility: hidden;
}
.form-block .first-name .caption-text::before {
  content: "Name";
  visibility: visible;
}

//Changing the 'Last Name' caption text
.form-block .last-name .caption-text {
  visibility: hidden;
}
.form-block .last-name .caption-text::before {
  content: "Last Name";
  visibility: visible;
}