Quick Tip: Styling Your Contact Form

When it comes to a Squarespace contact form, I don’t think many people put too much thought into anything beyond what it can do.

It’s true, a contact form is a useful way to open up communication between your website visitors and yourself. There’s a lot of utility in that little Form Block.

However, that doesn’t mean your contact form needs to stick out like a sore thumb amongst the rest of your good looking site. You can pretty it up with just a few lines of simple CSS code.

Enough of the preamble. Let’s get to the good stuff.

Contact form CSS styling

As with any CSS styling, we’ll first need to target the HTML code associated with the contact form. We’re going to start at the top level of the code and drill down until we’re working with only the parts of the form we want to adjust.

Remember to head over to the W3 Schools’ section on CSS to learn more about what you can do with CSS code.

In the Squarespace menu, let’s head to Design -> Custom CSS to add all this CSS code.

The first line we’re going to add looks like this:

.form-wrapper {
  background-color: #7193E0;
}

This is going to target the entire contact form, as you can see below. This may be useful if you want to contrast the form with the rest of your page.

Let’s drop down another level:

.form-wrapper .field-list {
  background-color: #7193E0;
}

We’re excluding the submit button now.

Another level deeper:

.form-wrapper .field-list .field {
  background-color: #7193E0;
}

We’re getting closer and closer to just the text field boxes.

One more level and we’ll have something that looks a bit more pleasant:

.form-wrapper .field-list .field .field-element {
  background-color: #7193E0;
}

From here we can do all sorts of things to those boxes, including turning them into just lines in stead of rectangles.

Let’s back up a bit. We can get to the boxes, but what if you’d like to alter the appearance of the titles above them?

.form-wrapper .field-list .title {
  background-color: #7193E0;
}

The background of the titles are being targeted here, but now you can use just about any CSS code to alter their appearance.

We can also replace the .title tag with .caption and change the look of the words under the text boxes.

The last remaining bit of the contact form is that submit button underneath all the text fields. Those can be altered a bit in Site Styles, but CSS will allow us to do more.

.form-wrapper input[type="submit"] {
  background-color: #7193E0 !important;
  color: #FFF !important;
}

As with everything else, just about every aspect of the button can be modified to your wishes.

CSS can seem daunting to those who don’t experiment with it on their own sites. The key word here, though, is “experiment.” You should give all this a try because it can really help you spice up the look of a site.

I can assure you that you’ll have a hard time messing anything up in the Custom CSS editor. If something goes wonky, all you have to do is delete the code you wrote and it’ll be back to normal.

Squarespace gives you a lot of control over the look of your contact form, but with CSS there’s nothing stopping you from turning it into a tool that fits in so much better with your entire site.

Happy CSS-ing, cats.

As a P.S., I’ll include an example of a fully altered contact form to give you some inspiration. Reference back to what I wrote above to figure out how each separate piece of the contact form is being changed.

.form-wrapper {
  background-color: #AFB1E1;
  padding: 30px;
}

.form-wrapper .field-list .title, .form-wrapper .field-list .caption {
  font-family: Montserrat, Arial, sans-serif;
  color: #FFF;
}

.form-wrapper .field-list .title {
  font-weight: 700;
}

.form-wrapper .field-list .field .field-element {
  font-family: Merriweather, Times New Roman, Serif;
  border-style: none;
  border-bottom: 2px solid #8561AC;
}

.form-wrapper input[type="submit"] {
  font-family: Montserrat, Arial, sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  background-color: #FFF !important;
  color: #8561AC !important;
  border: 2px solid #8561AC;
  border-radius: 10px !important;
}

.form-wrapper input[type="submit"]:hover {
  background-color: #8561AC !important;
  color: #FFF !important;
  transition: 250ms;
}