Squarespace Hack: Customize Your Contact Form

Learn how to customize your Squarespace contact form. Go from bleh to ooooh yeah! 

There are so many things I love about Squarespace. With some time and effort, you can customize your site to look nothing like a Squarespace template, which is good because so many people are on Squarespace that you want to avoid having a website design that everyone else has. 

Call me crazy but the one thing that bothers me most about Squarespace is not being able to customize the contact form without some CSS. 

Your website is your identity, you've designed it to represent you and your brand but when you see another Squarespace website it's pretty much guaranteed your contact page is going to look very similar.

I'm always trying to find ways to make my site look different from the rest.

I recently played around with the contact form CSS and came up with a more modern, clean look. Check it out below.
 

Before

F+C-contact-form-1

After

F+C-Contact-Form

 

What's great about this code is you can change the thickness and the colour of your form to fit YOUR branding. 

So let's dig in. Oh, and if you are afraid to touch some CSS don't be. I'll walk you through it and by the end of this tutorial you'll feel a little more comfortable playing around with your CSS code. 


Step one

Copy this code:

.form-wrapper .field-list .field .field-element{
  border:none;
  border-bottom: 3px solid;
  border-color: #000000;
  background: #fff;  
}

and paste it in your Custom CSS box. 

You can find it by going to Design > Custom CSS.

Contact-Form-CSS

Step two

Now it's time to customize your form to match your branding. 

If you prefer a colour that isn't black take your colour hex code and replace the

border-color: #000000;

to whichever colour you prefer.
 


A good place to get hex codes and find colour palettes is

https://coolors.co


But wait, what the heck is a hex colour code?

A hex code is the 6 digit number that represents a colour. For example...

#000000 - is black
#FFFFFF - is white

Let's walk through an example. 

Say I decide I want to use this yellow colour I found on coolors.co

I would copy the colour code - #FAC472 

and paste it in the CSS code above on this line...

border-color: #FAC472; <--- the yellow hex code #

When you hit save your form should look like this:

Step three

Woohoo, you now have a new contact form design! 

But let's say you want a different line thickness. Go back to your CSS code and fine this line:

 border-bottom: 3px solid;

Adjust the pixel size until you're happy with it. 

For example, maybe you want a thinner line so you change the pixel number to 2...

 border-bottom: 2px solid;

You will get this result:

Or maybe you want a thick bold line so you bump up the pixel size to 5.

border-bottom: 5px solid;

You will get this result...

You can even add a dashed line if that's up your alley. 

border-bottom: 2px dashed;

That wasn't too bad now was it? 

I would love to see your shiny new contact form. Drop your link in the comment section so I can check it out. 

Also, if you have any questions feel free to ask. Please keep in mind I'm not a code pro so I'm limited to what I can actually help you with. 


Disclaimer: although there is a lot of code out there and even options to pay to have the code given to you, I figured this out on my own without any resources or help from others.