How to customise your Squarespace forms with CSS
Squarespace forms are powerful tools for collecting user data — from contact messages to newsletter signups and customer feedback. However, the default styling can sometimes feel too generic or may not align with your site’s branding.
Thankfully, Squarespace allows you to customise your form fields, buttons, labels, and spacing using CSS. In this tutorial, we’ll show you how to style your forms and elevate their look to better reflect your design vision.
Table of Contents
Why Customise Your Forms?
To match your brand’s color scheme and fonts
To enhance user experience and accessibility
To create a more engaging and professional appearance
To improve mobile responsiveness and layout
Complexity: Easy
However, with CSS code, you can customise your Squarespace form. To add the code, simply go to Pages > Custom Code > Custom CSS.
For the font-family and how to integrate custom fonts, see our blog on this.
Step-by-Step Instructions
Step 1. The first snippet of code is for the styling of the headings for each form field.
.form-wrapper .field-list .title {
font-family: [YOURFONTFAMILY];
font-size: 10px;
color: #ffbf00;
letter-spacing: .15em;
text-transform: uppercase;
}
Step 2. This second snippet of code is for the styling of the form caption text.
.form-wrapper .field-list .field .caption {
font-family: [YOURFONTFAMILY];
font-size: 8px;
color: #ffbf00;
letter-spacing: .15em;
text-transform: uppercase;
}
Step 3. This third snippet of code is for the styling of the form field description.
.form-wrapper .field-list .description {
font-family: [YOURFONTFAMILY];
font-size: 10px;
color: #ffbf00;
letter-spacing: 0.1em;
}
Step 4. This snippet of code controls the styling of the form fields.
.form-wrapper .field-list .field .field-element {
background-color: #fefefe;
border: 1px solid #ffbf00; // Thickness of edges of the field
border-radius: 5; // determines how rounded the edges of the field are
}
Step 5. This last snippet of code creates a hover effect on the form submission button.
.form-wrapper input[type=submit] {
border: 1px solid #ffbf00;
background-color: #000 !important;
transition: all .6s ease 0s!important;
}
.form-wrapper input[type=submit]:hover {
color: #98635D !important;
background-color: #fff !important;
}
Finally, you can change the colour and background colour within the CSS code to one of your choice.
Key Takeaways
You can fully customise form appearance with CSS in Squarespace 7.1.
Elements like input fields, labels, buttons, and layout spacing are all styleable.
CSS customisation improves both branding consistency and user experience.
Don’t forget to test your custom styling on mobile and tablet views.
FAQs
Can I use Google Fonts in form styling?
Yes — add the font link in “Pages > Custom Code > Code Injection” under <head>, then reference it in your CSS using font-family.
Will CSS customisations apply to all forms?
Yes, unless you target a specific form using a unique ID or class (e.g., #block-yui_3_17_2_1_1701234567890_12345).
Can I style checkbox and radio buttons too?
Yes, though they require more advanced pseudo-selectors or using custom checkboxes via label tricks.
Conclusion
By adding just a few lines of CSS, you can transform your Squarespace forms from standard to stunning. Custom styling not only enhances the look and feel of your site but also improves the interaction your users have with it. Whether you're collecting emails or client inquiries, a beautiful form can make all the difference.
If you have any questions or need any help with your Squarespace website design, you can book a 1:1 consultation.
All work in this guide is provided ‘as-is’. Other than as provided this guide makes no other warranties, expressed or implied, and hereby disclaims all implied warranties, including any warranty of fitness for a particular purpose.
If you require professional advice, you can book our consultation services.
