3 tips for creating an on-brand contact form on squarespace
If you’ve worked on your own Squarespace website at all you’ve probably been underwhelmed with the options for styling your contact form. Which is - there aren’t any.
All it takes is a couple snippets of CSS to take your form from boring to on brand.
P.S. You can add this CSS code under Design > Custom CSS! Don’t worry, it's pretty simple to change!
1 - Style your form titles
Every form field in your contact form has a title (Name, Email, Message, etc). We can still style this with a little code!
The code below will style your form titles to make them more on brand. Use your own fonts, colours, and play around with the sizing settings to get what you’re looking for!
.form-wrapper .field-list .title {
color: #111F90 !important; //This will change the text colour.
font-family: ‘Montserrat’! important; //This will change the font.
font-size: 16px !important; //This will adjust the font size in pixels.
font-weight: 600; //This will adjust the font weight.
letter-spacing: .15em; //This adjusts the spacing between letters.
}
Just delete any lines that you don’t need if you don’t want to change them from the standard settings. If the font settings intimidate you - just switch the colour and delete the rest!
2 - Add a background colour to your form fields
To change the background colour of your form fields, just copy and paste this into your Custom CSS area and change the hex code to one of your brand colours! (I suggest a lighter colour.)
.form-wrapper .field-list .field .field-element {
background-color: #FFFFFF;
}
3 - Add a border to your form fields
Adding a border can be such a fun way to add a little spice and personality to your form. Especially if you choose a bright or bold brand colour! Here’s the code you’ll need:
For a full border around each field:
.form-wrapper .field-list .field .field-element {
border: 2px solid #000000 !important;
}
This will put a 2 pixel solid black (#000000) are you fields! Adjust the size if you’d like a smaller or larger border, and replace the hex code with one of your brand colours!
For a bottom border on each field only:
.form-wrapper .field-list .field .field-element {
border: 0px;
border-bottom: 2px solid #000000 !important;
}
Adding a bottom border only creates a cool underline effect! Change the size and colour to match your brand.
There you have it, pretty simple right? Feel free to hop in my inbox if you have any questions!
