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

How to Customize Your Squarespace Contact Form copy + paste CSS code2.png
 


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!

 

If you liked this post, Pin it to Pinterest! 👇🏻

 
Learn how to make your Squarespace contact form less ugly. By default, Squarespace contact forms don't look so great - here's some copy and paste CSS along with a tutorial for you on how to make your contact forms look amazing. Squarespace Web Design Tips by Big Cat Creative | Graphic Design Tips and Tricks | Squarespace Design Tips | Styling Contact Forms in Squarespace
 
 

more squarespace tips