How to customize your forms on Squarespace

Almost every good website has some sort of contact form and while squarespace makes it super easy to add a premade form block, customizing it is not an option in the regular style tools. To do this you’ll need to dive into the custom css section of the style panel. Today we have some more css that you can copy and paste yourself!

First of all we want to customize the titles of each input section. To do that copy and paste the code below. With this particular code you can change the font, size, alignment, and color, but you can add whatever else you would like! The point is not to do all the customization for you, but to show you exactly how to target those specific sections to style.

.Title

{

Font-family:baskerville;

Text-transform:uppercase;

Font-size:14px;

Text-align:right;

Color:#373f3b;

}

Next we have the caption that is under each of the input sections. With this smaller section you can use all the same properties as above to make this a little different than the titles. I usually like to make this text a bit smaller and change it to a lighter color.

.Caption

{

Font-family:helvetica;

Text-transform:lowercase;

Font-size:12px;

Text-align:right;

Color:#f4d7cf;

}

This last code is one of my favorites to use for forms. It takes away the generic feel of the standard squarespace form and allows you to really make it custom to your brand. You can change the input field background color, give it a border, have it only be a border, and more. Get creative with it and use play with all the different colors of your brand.

.Form-wrapper .Field-list .Field .Field-element

{

Background: #f7ecf1;

Border-style:none;

}

And there you have it! Three different sections of code that you can use to completely transform the form blocks on squarespace. This is a great way to make a dull page feel more exciting while keeping the consistency of your brand identity. We hope you implement it into your own squarespace site!