How to make your Squarespace contact form look less ugly (copy + paste code)
If you know anything about me, you know I love, like, seriously love Squarespace. It’s my go-to web design platform.
The best thing about Squarespace is its simplicity. It makes DIYing your site really straightforward. And though I really believe that having less customization options while DIYing your website makes the whole process easier and more simple, and often even creates a better looking site, sometimes there are exceptions.
For example, the built in Squarespace contact forms are — well, pretty darn ugly.
It’s absolutely fantastic how simple it is to add a contact form and link it to your email address in Squarespace, I can’t argue that.
But why do they look like THAT?
Everything else on Squarespace is so sleek and modern, but these built-in contact forms kinda give me a Windows “98 vibe. (If you’re too young to even know what that was, a quick Google Image search will give you an idea)
They’re not great, and there’s no simple way to edit them in the style settings. You can edit the button and button font, which is helpful. But the rest of the form needs a bit of a makeover too.
So today I’m going to give you a quick run down and some copy + paste CSS code to spruce your Squarespace contact form — woohoo!
1 -Add your contact form
Make sure you’ve added a contact form to your site, and you’re on the page where the contact form is, so when we go in and edit the code, we can see the contact form updating and we can make live changes.
2 - Go to your CSS editor
In the sidebar, click on Design > Custom CSS
3 - Add in your code
Copy and paste the following code snippets into the css editor, and then adjust them to your preferences.
This first section controls the font and font color, alignment, weight and size. This is just the font for the headings, not in font for the text boxes. You can change the parts in the code that are bolded. For the color, you can use a hex code.
form {
color: #ffccff;
font-family: Poppins !important;
text-align: left;
font-weight: 400;
font-size: 10pt;
}
This second section controls the font and font details inside the text boxes. You can change the parts in the code that are bolded. For the color, you can use a hex code.
form input,
form textarea {
color: #000000;
font-family: proxima nova !important;
font-weight: 300;
font-size: 10pt !important;
}
This third section is the most fun, as it controls the colors and styles of the text boxes. You can add a colored border, make it thicker by increasing the 1px to 5px, or remove it by changing it to 0px. You can also change the border radius by increasing or decreasing the 5px. You can also add a background color to your text boxes. You can change the parts in the code that are bolded. For the color, you can use a hex code.
.form-wrapper
.field-list
.field
.field-element {
border: 1px solid #0426d0;
border-radius: 5px;
background: white;
}
When you’re done, remember to click SAVE in the top left hand corner when you’ve finished editing your CSS code.
Pretty easy, right? Just copy and paste that code and go nuts! Get as creative as you want. Remember, you can edit the Submit button in the style editor to match your new form.
Thanks for reading!
Make sure to check out some of our other quick code tricks for customizing your Squarespace site below! 👇
How to customize your Squarespace cookie banner design
How to animate your links on hover in Squarespace 7.0 & 7.1
How to create a sticky header nav in Squarespace
How to add a background color to a text block in Squarespace
6 fun code snippets for your Squarespace web design
If you liked this post, Pin it to Pinterest! 👇🏻
