How to Customise the Squarespace Contact Form

I'm going to show you a really quick way to turn your basic contact form into something a little more interesting. This is what you will end up with:

Before you start, you'll need to have set up your contact page with a form already.

1. Once you've created a page with a contact form, open up your page and edit the form:

candinski-contact-form-4

2. On the Edit Form pop up, I have deleted the Name field and added a Text field. This is so that I have one field to enter a name, instead of two. If you wish to keep it as two, you can. I also changed the Message block to a Text field to keep all the fields on a single line.

candinski-contact-form-6

3. Open each of your fields and add the name of your field in the placeholder text area. For example, enter 'Name' for the 'Name' field as shown below. Once done, click Apply and Save your page.

Now that we've set up the form the way we want, we can add some styling. Navigate to the Custom CSS section (under the Design menu).

4. The first thing we want to do is remove the titles of the fields. To do this, paste the following into your Custom CSS:

.form-wrapper .field-list .title {
    visibility: hidden;
}

It should now look a bit like this:

candinski-contact-form-5

5. The next code snippet will mainly:

  • remove the borders but keep the bottom one and make it thicker
  • change the placeholder text to uppercase
  • remove the fields background colour

There are some additional amendments here such as the font family and size, spacing and padding which you can adjust as you wish.

.form-wrapper .field-list .field .field-element {
    border: 0 solid transparent;
    border-top-color: transparent;
    border-width: 0 0 2px 0;
    border-right-color: transparent;
    border-bottom-color: rgb(191, 191, 191);
    border-left-color: transparent;
    border-radius: 0;
    background-color: transparent;
    padding: 0 0 15px 0;
    text-transform: uppercase;
    color: #000; 
    font-family: lato;
    font-size: 14px;
    letter-spacing: 0.1em;
}

And that's it!