4 Ways to Customize Your Contact Form in Squarespace

Squarespace is a great place to host your website. They make it super easy to get your website up and running in no time. While their templates are beautiful as is sometimes it's nice to add a touch of your own uniqueness to it, especially if you are following strict brand guidelines. 

I wrote a post awhile back on customizing your contact form and got a great response so I thought I would update the post with a few more options to take your form from bleh to beautiful!

 
 4 Ways To Customize Your Squarespace Contact Form #Squarespace #contactform #Squarespacetip #Websitedesign
 

 

If you are interested, you can read the old post here:

http://www.forthandcreate.com/blog/squarespace-hack-customize-your-contact-form

Now let's dive in!

When you add a form to your site this is what it looks like straight out of the box...

Squarespace Contact Form.png

It's simple and does the job and for most, that's all they need. However, if you are looking to spice things up a little we are going to explore a few different design options using CSS. 
 

Option #1 

 
Squarespace Contact Form 2.png

At first glance this form might look very similar to the form above, however, if you take a closer look you will notice the font is different from the original. As I write this, Squarespace doesn't have an option to change the typeface on your contact form which can be annoying if you want to keep your fonts consistent and on brand. 

To change the font on your form copy and paste the code below into your Custom CSS box. 

1. This snippet of code will change the form box titles. (Name, Email Address, Message, etc.)

.form-wrapper .field-list .title{
   font-family: 'brandon grotesque', sans-serif;
}

I have Brandon Grotesque as my font family. If you would like to use a different font simply type in the font family name (if it's two words such as Brandon Grotesque make sure you keep the quotation marks around the name. If it's a font such as Ariel, you don't need the quotation marks.) If your font is a serif font simply remove the 'sans' from the code below. 

You can change the font size by adding  

font-size: 18px; <-- change the number and keep the 'px.' You can add this to any of the code snippets below. 

 

2. This code will change the caption font (First Name, Last Name)


.form-wrapper .field-list .field .caption{
     font-family: 'brandon grotesque', sans-serif;
}


3. This code will change the font that is used when your reader types in their info.


.form-wrapper .field-list .field .field-element
{

font-family:'brandon grotesque', sans-serif;
  font-size: 19px;
}



Option #2

Now let's make things a little more interesting!

Squarespace Contact Form 3.png

In the form above I've kept everything the same but instead of the form boxes they are now lines. 

To get this look add this code to the code you copied from above and place in your CSS box. 

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

Explanation:

.form-wrapper .field-list .field .field-element{

  border:none; <--- This takes away the border around the boxes
  border-bottom: 2px solid; <--- This adds the line to the form boxes
  border-color: #000000; <--- You can change the colour of the line by adding in your own hex code
  background: #fff;  <--- You can change the form field background colour by adding in your own hex code. 
}


Now I'm going to introduce you to a handy tool that will make your life a lot easier when playing around with CSS in Squarespace. 

If you haven't heard of and installed the Chrome extension Squarespace Block Identifier then I suggest you install it..seriously..such a handy tool to have. 

You can install it here:

https://chrome.google.com/webstore/detail/squarespace-collectionblo/bggpdfnccodbnmcndckmeehdjkjojkde

Once you have it installed click the black box icon with the letter B in your tab bar and click on the code that hovers over your contact form. By clicking the code it automatically copies it for you. 

This is what it should look like. You might have more code boxes pop up if you have different elements on your page. Just make sure to click on the code that's over your contact form.

Screen Shot 2018-06-12 at 4.21.40 PM.png

Once you have the code copied head back over to your CSS box and past it in so it looks like this...

#block-yui_3_17_2_1_1528831195021_3847  (<---your own code will replace mine.) {

}

Now that you have that code ready to go we are going to add a background colour to the form like this...

Squarespace Contact Form 5.png

#block-yui_3_17_2_1_1528831195021_3847  (<---your own code will replace mine.) {

  background-color: #f5f5f5; 
  padding: 40px; 
  border-radius: 13px; 

}

If you want the form field to be the same colour as the background colour add in this code:

.form-wrapper .field-list .field .field-element{
  background: #f5f5f5;
}

Explanation:

  background-color: #f5f5f5; <---background colour. Enter your own hex code. 
  padding: 40px; <---the space around the form. Use a lower number for less space and a higher number for more space
  border-radius: 13px; <---code for the rounded corners. If you prefer straight corners leave this snippet of code out. Use a lower number for a less round look and a higher number for a more rounded look. 

}

Below I've created a few different form styles and included the CSS so you can easily copy and paste and adjust the code to meet your brand standards if necessary!

 

1. Bold and Stylish. 

Squarespace Contact Form 7.png

.form-wrapper .field-list .field .field-element{

  border: 3px solid;
  border-color: #000000;
  background: #fff;  
}
// Form Font Box Titles // 

.form-wrapper .field-list .field .field-element
{font-family:'brandon grotesque', sans-serif;
  font-size: 19px;
}

//Form Font Text Inside Boxes//

.form-wrapper .field-list .title{
   font-family: 'brandon grotesque', sans-serif;
  text-transform: uppercase;
  font-size: 13px;
  font-weight: 700;
}

// Form Font Captions // 

.form-wrapper .field-list .field .caption{
     font-family: 'brandon grotesque', sans-serif;
}

// Form Background Colour // 
#block-yui_3_17_2_1_1528831195021_3847   {
  background-color: #f5f5f5;
  padding: 40px;
  border-bottom: solid 3px;
}

 

2. Minimal 

Squarespace Contact Form 9.png

.form-wrapper .field-list .field .field-element{

  border: 1px solid;
  border-color: #e3e3e3;

}
// Form Font Type In Box // 

.form-wrapper .field-list .field .field-element
{
  font-family:'roboto',serif;
  font-size: 14px;
  color: #515151;
  
}

//Form Font Title //

.form-wrapper .field-list .title{
   font-family: 'roboto', sans-serif;
  
  font-size: 14px;
  font-weight: 400;
  color: #515151;
}

// Form Font Captions // 

.form-wrapper .field-list .field .caption{
     font-family: 'roboto', sans-serif;
}

 

3. Colourful

Squarespace Contact For m8.png

.form-wrapper .field-list .field .field-element{

  border:solid 3px;;
  border-color: #c9c017;
  background: none;

}

// Form Font Type In Box // 

.form-wrapper .field-list .field .field-element
{
  font-family:'roboto',serif;
  font-size: 14px;
  color: #c9c017;
  
}

//Form Font Title //

.form-wrapper .field-list .title{
   font-family: 'roboto', sans-serif;
  
  font-size: 14px;
  font-weight: 400;
  color: #c9c017;
}

// Form Font Captions // 

.form-wrapper .field-list .field .caption{
     font-family: 'roboto', sans-serif;
     color: #c9c017;
}

#block-yui_3_17_2_1_1528831195021_3847   {
 
  border-color: #c9c017;
  padding: 70px;
  border-radius: 20px;
}

Note: to change the button colour simply head over to your style editor and adjust the colour there. 


4. Soft 

Squarespace Contact Form 10.png

.form-wrapper .field-list .field .field-element{

  border: 2px solid;
  border-color: #e3e3e3;
  background: #fff;  
}
// Form Font Box Titles // 

.form-wrapper .field-list .field .field-element
{font-family:'brandon grotesque', sans-serif;
  font-size: 17px;
  color: #afafae;
  font-weight: 300;
}

//Form Font Text Inside Boxes//

.form-wrapper .field-list .title{
   font-family: 'brandon grotesque', sans-serif;
  font-size: 16px;
  color: #afafae;
  font-weight: 300;
}

// Form Font Captions // 

.form-wrapper .field-list .field .caption{
     font-family: 'brandon grotesque', sans-serif;
  color: #afafae;
}

// Form Background Colour // 
#block-yui_3_17_2_1_1528831195021_3847   {
  background-color: #f5f5f5; 
  padding: 40px;
  border-bottom: solid 3px;
  border-color: #e2b6ac;
  border-radius: 20px;
}

 

I hope you found this post useful. I'd love to see what you come up with! Drop your link in the comment section below and I'll check it out. :) 

Happy coding!

 

Pin For Later!

 
 4 Ways To Customize Your Squarespace Contact Form #Squarespace #Contactform #Squarespacecontactform #SquarespaceCSS #WebsiteDesign #Squarespacehelp

4 Ways To Customize Your Squarespace Contact Form #Squarespace #Contactform #Squarespacecontactform #SquarespaceCSS #WebsiteDesign #Squarespacehelp

 
Meagen Higginbottom