How To Customize A Squarespace Contact Form (Copy & Paste Code)
I’ve been working in the digital marketing world for close to a decade, and Squarespace has quickly become my favourite web design platform. It’s just so dang simple to use, and makes DIYing your own website super easy and straightforward. But, in some instances, you’ll definitely want to amp up the basic design elements and style settings that Squarespace offers to better suit your brand aesthetic.
Today, we’re going to go over how to quickly and easily customize the built-in Squarespace contact form with a bit of copy + paste CSS code. Don’t be scared, it’s super simple!
STEP 1: ADD YOUR CONTACT FORM
This part is easy. Create a page, pop in a cookie cutter contact form, and let’s move on. Tip: Be sure to remain on this page so that when you go in and edit the code, you’ll be able to see the updates go into effect and make live changes.
STEP 2: NAVIGATE TO THE CSS EDITOR
In the sidebar, click on Design > Custom CSS.
STEP 3: ADD IN THE FOLLOWING CODE
Want to change the colors and styles of the text boxes? To add a colored border and play around with the thickness (or remove the borders completely), copy and paste the following code. To alter the color, just insert the hex code for the color you’d like to use. To make the border thicker, increase the 1px to 2px or 5px. To remove the text box borders, decrease to 1px.
.form-wrapper
.field-list
.field
.field-element {
border: 1px solid #0426d0;
border-radius: 5px;
background: white;
}Don’t forget to hit “SAVE” in the top left corner when you’ve completed your edits to the CSS code. ;)
STEP 4: CHANGE FONT DETAILS
If you’d like to change the font details for inside the text boxes, simply copy and paste the following code and update the hex code beside ‘color’ and the font name beside ‘font-family’. You can also play around with the font thickness and font size by changing the number beside ‘font-weight’ and ‘font-size’.
form input,
form textarea {
color: #000000;
font-family: proxima nova !important;
font-weight: 300;
font-size: 10pt !important;
}If you’d like to change the font details for the form headings, you can copy and paste the following code and update the hex code beside ‘color’ along with the font name, weight and size just like you did above.
STEP 5: EDIT BUTTON AND BUTTON FONT
These features are actually already built in to the Squarespace style settings, which you can find back under the design tab. You can update the button to match the form font and color there.
Well that was easy! You can update the CSS code at any point to alter the contact form to suit your evolving brand and aesthetic, totally pain free. 🙂 As always, thank you for visiting the blog today and everyday, I really appreciate it. Xx Julia Rae
