How to customize your squarespace forms with CSS

This tutorial shows you how customise your forms. Currently the style options in the style editor are limited and the only thing you have control over is the color and style of the form submission button.

Complexity: Easy

However, with CSS code, you can customize your Squarespace form. To add the code, simply go to Design > Custom CSS.

For the font-family and how to intergate custom fonts, see our blog on this

---

1. This first snippet of code is for the styling of the headings for each form field.

.form-wrapper .field-list .title {
  font-family: [YOURFONTFAMILY];
  font-size: 10px;
  color: #ffbf00;
  letter-spacing: .15em;
  text-transform: uppercase;
}

---

2. This second snippet of code is for the styling of the form caption text.

.form-wrapper .field-list .field .caption {
  font-family: [YOURFONTFAMILY];
  font-size: 8px;
  color: #ffbf00;
  letter-spacing: .15em;
  text-transform: uppercase;
}

---

3. This third snippet of code is for the styling of the form field description.

.form-wrapper .field-list .description {
  font-family: [YOURFONTFAMILY];
  font-size: 10px;
  color: #ffbf00;
  letter-spacing: 0.1em;
}

---

4. This snippet of code controls the styling of the form fields.

.form-wrapper .field-list .field .field-element {
  background-color: #fefefe;
  border: 1px solid #ffbf00; // Thickness of edges of the field
  border-radius: 5; // determines how rounded the edges of the field are
}

---

5. This snippet of code creates a hover effect on the form submission button.

.form-wrapper input[type=submit] {
  border: 1px solid #ffbf00;
  background-color: #000 !important;
  transition: all .6s ease 0s!important;
}

.form-wrapper input[type=submit]:hover {
  color: #98635D !important;
  background-color: #fff !important;
}

Finally, you can change the color and background color with in the CSS code to one of your chossing.

---

If you have any questions or need any help with your Squarespace website design, you can book a 1:1 consultation.

---

All work in this guide is provided ?“AS IS”. Other than as provided this guide makes no other warranties, express or implied, and hereby disclaims all implied warranties, including any warranty of fitness for a particular purpose.

If you require professional advice, you can book our consultation services.