Change the Form Button Colour

What does this code do?

This code snippet will allow you to change the color of a form button.

Code Snippets

Squarespace 7.0

Copy and paste this code into Design > Custom CSS

/* Form Button */
.sqs-block-form .button {
  background-color: black !important;
  border: black;
  color: white !important;
}

/* Form Button on Hover */
.sqs-block-form .button:hover {
  background-color: white !important;
  border: black;
  color: black !important;
}

To target a specific form block add one of the following selectors in front of .sqs-block-form

/* One Page */
#COLLECTIONID

/* One Section */
#PAGEID

/* One Form Block */
#BLOCKID

Squarespace 7.1

You can set the form block colour in Design > Color. To change the colour of the button on specific forms copy and paste the following into Design > Custom CSS.

All Forms on One Page

/* Form Button */
#COLLECTIONID .white .sqs-block-form .sqs-editable-button {
  color: black !important;
  background-color: white !important;
  border-color: white;
}

/* Form Button on Hover */
#COLLECTIONID .white .sqs-block-form .sqs-editable-button:hover {
  color: white !important;
  background-color: black !important;
  border-color: black;
}

All Forms in One Section

Tip: Make sure there is no space between (1) and .white

/* Form Button */
#COLLECTIONID  #page .page-section:nth-of-type(1).white .sqs-block-form .sqs-editable-button {
  color: black !important;
  background-color: white !important;
  border-color: white;
}

/* Form Button on Hover */
#COLLECTIONID #page .page-section:nth-of-type(1).white .sqs-block-form .sqs-editable-button:hover {
  color: white !important;
  background-color: black !important;
  border-color: black;
}

One Specific Form

/* Form Button */
.white #BLOCKID .sqs-editable-button {
  color: black !important;
  background-color: white !important;
  border-color: white;
}

/* Form Button on Hover */
.white #BLOCKID .sqs-editable-button:hover {
  color: white !important;
  background-color: black !important;
  border-color: black;
}

You will need to change .white to match the color theme of the section the form is in.

Lightest 1 = .white

Lightest 2 = .white-bold

Light 1 = .light

Light 2 = .light-bold

Bright 1 = .bright-inverse

Bright 2 = .bright

Dark 1 = .dark

Dark 2 = .dark-bold

Darkest 1 = .black

Darkest 2 = .black-bold

Then change the Collection ID, section number, and Block ID to match the form(s) you want to change.

How To Use It

1. Copy and paste the code as indicated above.

2. To learn how to find a collection id, page id, or block id check out our Start Here guide.

3. If targeting one section in Squarespace 7.1, change the 1 to match the section you are trying to change.

4. Then change the colours to your liking.