How to customize Squarespace forms with CSS

Jun 6

This tutorial was recorded in Squarespace 7.1 but these codes will work on legacy sites built on version 7. For more information, visit insidethesquare.co/themes

In this blog post, you’ll learn how to customize the colors of a contact form block in Squarespace. To all my long-term fans, you might be thinking “but Becca - you already did a tutorial form customization like 2 years ago!” and you’re right! I totally did BUT that was the old form block, and today, we’ve got a new one to work with.

Squarespace recently updated their custom code options for forms, and I’ve got some exciting new info & design ideas to share with you. 🤩

Get ready to enhance user experience, capture valuable data, and make a lasting impression with your customized Squarespace forms!

Here are the selectors used in this tutorial:

/* Change the input field border & background */
.sqs-block-form .field-list .field input, 
.field textarea { 
border: 1px solid #eee;
border-radius: 5px;
background: #e5f5f6;
}

/* Change the focus style */
.sqs-block-form .field-list .field input:focus, 
.field textarea:focus{
background: #F6EDCE;
outline: none!important
}

/* Change (required) to an asterisk */
.sqs-block-form span.required{ 
visibility:hidden 
} 
.sqs-block-form span.required:before{ 
content:" * ";  
visibility:visible!important 
}

/* Change the submit button colors */
.form-wrapper input[type=submit]{
background-color: #A1D9DD!important
}
.form-wrapper input[type=submit]:hover{
background-color: #EDD17D!important
}

With the new custom code options we just covered, you can create awesome personalized forms that engage your audience and match your brand perfectly.

Forms aren't just for info capture; they're a chance to wow users and give them a seamless experience. So, get creative! Be sure to adjust the colors and borders, and try adding other creative codes to make it uniquely yours. But most importantly, have fun with your Squarespace website. 😉