Ultimate Guide to Customising the Form Block in Squarespace Using CSS

 how to customize the squarespace contact form
 

I’ve seen SO many questions asked around the web regarding how to change this or that on the Squarespace form block. There’s some great info here and there answering users specific questions (How do I make the text pink? How do I have just a line rather than a box?) but I decided it was time to put together a guide to help anyone and everyone figure out their own customisations by understand how to target each particular part of the form block.

So here it is… Kayleigh’s Ultimate Squarespace Form Guide for CSS Beginners (Part One). Or something like that.

IN THIS GUIDE, I'LL ONLY BE LOOKING AT THE BASIC FORM FIELDS. I'M WORKING ON A FOLLOW UP POST TARGETING RADIO BUTTONS, CHECKBOXES, DROPDOWNS ETC WITH CSS. SIGN UP TO BE NOTIFIED WHEN IT IS POSTED.

This guide is split into two parts: targeting and then customising. First off, you need to know exactly what part of the form you want to target, i.e. how to ‘tell’ Squarespace which part of the form you want to change, then you’ll tell it what to do such as, add a border, change the colour, change the size, add some padding etc.

PART ONE: TARGETING

As above, you need to know exactly what part of the form you want to target, i.e. how to ‘tell’ Squarespace which part of the form you want to change. I’ve targeted each of the fields I’m going to discuss and coloured them in green to give you an easy visual guide. This is one of the easiest ways, when trying out CSS to check you’ve successfully targeted the right item on your page. Add {background:blue;} or {color:red;} for example, and it’ll be immediately obvious that you’ve got the right selector.

I've included an image for each of what would go in DESIGN >> Custom CSS and an image displaying what the resulting look would be on your form. It ain't pretty, but hopefully it's clear.

.form-wrapper

This is the form as a whole, including the button.

formwrapper.png
Screen Shot 2018-04-21 at 11.28.41.png

.form-wrapper .field-list

Everything except the button.

Screen Shot 2018-04-21 at 11.28.24.png

.form-wrapper .field-list .field

The area below and above each section on the form, but not all of them as one.

Screen Shot 2018-04-21 at 11.28.05.png
Screen Shot 2018-04-21 at 11.28.12.png

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

This are you ‘boxes’, where the user would type in their information. If you want to do for the popular 'line rather a box' look, this is what you'll need.

Screen Shot 2018-04-21 at 11.27.37.png
Screen Shot 2018-04-21 at 11.27.48.png

.title

The text above each field, such as ‘name’, ‘email address’ and ‘message’. By default, Squarespace uses your body font settings. [NOTE: 'first name' and 'last name' can be targeted using .caption]

.button.sqs-system-button.sqs-editable-button

Your submit button. This is customisable in DESIGN >> STYLE EDITOR to an extent, but targeting with CSS will allow you to do more.

Screen Shot 2018-04-21 at 11.38.14.png
Screen Shot 2018-04-21 at 11.38.30.png

.button.sqs-system-button.sqs-editable-button:hover

Your submit button when a user hovers there mouse over it. By default, Squarespace sets this to simply bring the button to an 80% opacity, but this can be overridden. Perhaps you'd like it to change colour, to increase in size. 

 

PART TWO: CUSTOMISING

This is where the fun part begins. It's time to start adding customisations to your targets. I've detailed some of the most popular (and easy) below.

BACKGROUND COLOURS

Super easy. This is usually used to add a background colour to the whole form using .form-wrapper or the input boxes using  .form-wrapper .field-list .field .field-element. In the examples in part one, you can see how I used the {background:#CBF3CC;} to display the target areas with a nice light green.

 

FONTS, FONT SIZING AND FONT COLOURS

Best used on the .button.sqs-system-button.sqs-editable-button and .title and .caption selectors. You could use:

font-family, font-size, font-color, text-aligntext-shadowtext-transform, text-decorationtext-indenttext-spacing or line-height to name but a few.

Screen Shot 2018-04-21 at 12.50.19.png
Screen Shot 2018-04-21 at 12.50.24.png

PADDING

Padding gives elements on your page room to 'breath' and is useful when combined with background or border tags in particular. You can add padding 10px on all four sides on an element using:

{padding:10px;}

or

{padding-top:10px;

padding-bottom:10px;}

if you perhaps just wanted to add padding vertically.

 

BORDERS

You can either add a border on all four sides, or just one (or two or three, I guess). Style, width and colour are also customisable. For example, a simple border, with and without colour:

Screen Shot 2018-04-21 at 12.36.09.png
Screen Shot 2018-04-21 at 12.36.16.png

Targeting the .field-element selector gives the answer boxes a border. And getting all girly...



ready for some examples?

Honestly, when I'm building a site, I LOVE making he contact form stand out. Here's a couple of examples of what you could so to yours. Get creative, play around, have fun and as always shoot me a message if you need a hand. My Squarespace Sidekick service specialises in just these kind of customisations.

I'm not gonna lie, these aren't so pretty... but I had to get this post finished before the coffee shop kicked out. I have, however, tried to show a good range of customisations.

.form-wrapper
{background:#EBF3FF;
padding:20px;
border-style:solid;
border-width:1px;
border-color:#65758C}

.title
{font-family:roboto;
  text-transform:uppercase;
  font-size:16px;
  text-align:left;
  text-indent:20px;
color:#65758C;}

.caption
{font-family:roboto;
  text-transform:uppercase;
  font-size:10px;
  text-align:left;
color:#65758C;}

.form-wrapper .field-list .field .field-element 
{border:none;
border-bottom-style:solid;
border-bottom-width:2px;
border-color:#65758C;}

.button.sqs-system-button.sqs-editable-button
{background:#65758C;
font-family:roboto;
letter-spacing:3px;}
Screen Shot 2018-04-21 at 13.16.43.png
.title
{font-family:baskerville;
  text-transform:NONE;
  font-size:16px;
  text-align:center;
  text-indent:20px;
color:#AA3365;}

.caption
{font-family:baskerville;
  text-transform:uppercase;
  font-size:10px;
color:#AA3365;}

.form-wrapper .field-list .field .field-element 
{background:#F7ECF1;
border-style:none;}

.button.sqs-system-button.sqs-editable-button
{background:white;
  color:#AA3365;
  background-color:#F7ECF1;
font-family:baskerville;
text-transform:none;
padding:12px;
padding-left:50px;
padding-right:50px;}

my own site's css

Screen Shot 2018-04-22 at 10.47.31.png
Screen Shot 2018-04-22 at 10.48.05.png
//CONTACT FORM//
.form-wrapper .field-list .field .field-element
{background:#F9F5F3;
border-style:none;
  border-bottom-style:solid;
  border-bottom-color:#313e50;}
.title
{font-family:playfair display;
font-style:italic;
font-size:16px;}
.form-item.field.checkbox
{font-family:playfair display;}
.caption
{text-transform:uppercase;}
.form-wrapper .field-list .field select
{font-family:lato;
font-size:12px;}
.form-wrapper .field-list .field .option
{padding-top:2px;}

and there you have it!

If there's anything else you'd like to ask about form styling (or anything else Squarespace for that matter), you can contact me here. 

blogsignature.jpg