Primitus Consultancy

View Original

How to customize your squarespace forms with CSS

This tutorial shows you how customise your forms. Currently the style options in the style editor are limited and the only thing you have control over is the color and style of the form submission button.

Complexity: Easy

However, with CSS code, you can customize your Squarespace form. To add the code, simply go to Design > Custom CSS.

For the font-family and how to intergate custom fonts, see our blog on this


1. This first snippet of code is for the styling of the headings for each form field.

See this content in the original post

2. This second snippet of code is for the styling of the form caption text.

See this content in the original post

3. This third snippet of code is for the styling of the form field description.

See this content in the original post

4. This snippet of code controls the styling of the form fields.

See this content in the original post

5. This snippet of code creates a hover effect on the form submission button.

See this content in the original post

Finally, you can change the color and background color with in the CSS code to one of your chossing.


If you have any questions or need any help with your Squarespace website design, you can book a 1:1 consultation.

See this gallery in the original post

All work in this guide is provided ?“AS IS”. Other than as provided this guide makes no other warranties, express 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.