Customize Squarespace forms

If you’re using Squarespace forms on your site – instead of or along with other information collection methods like Dubsado (affiliate link) – 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 forms

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!

1. Editing a form in Squarespace.png

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:

2. Changing the background color of the fields in Squarespace form.png

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

3. Inspect element close up.png


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.

4. Targeting the form.png

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 {
  
}
5. Adding the selector to Custom CSS.png

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:

6. Changing the background of the fields.png

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;
}
7. Removing the border of the fields.png

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:

8. Adding a border to the form fields.png

Nice right?

Alrighty, let’s move onto styling the font.

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

9. Selecting the title for each field.png
10. Zoom in Inspect Element.png

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 {
  
}
11. Targeting the field title.png

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;
}
14. Adding letter spacing.png

Looking good!

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

15. Targeting the first name and last name labels Squarespace.png

Zooming in…

16. Inspect element zoom.png

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;
}
17. Changing the color.png

Nice!

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

18. Styling the radio options in Squarespace form.png
19. Inspect element.png

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!

20. Selecting the class of the option.png

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;
}
21. Making it italics.png

Awesome!

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.

22. Targeting the form background.png
23. Inspect element close up.png

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;
}
24. Adding a background color to Squarespace forms.png

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

.form-wrapper {
  background: #CCD1C9;
  padding: 30px;
}
25. Styling the background of Squarespace forms.png

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;
}
25. Adding a border to Squarespace forms.png

Awesome! Here’s the final result:

26. Final result.png

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

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

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

/*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;
  padding: 30px;
  border-top: 2px solid black;
}