How to customise + style your Squarespace form text inputs with CSS

Here’s every code snippet you need to get your Squarespace form looking like the rest of your website. Below you’ll see options to change the font family, font size, line height, font color and transform the text (eg. uppercase). Replace YOURFONTFAMILY with your custom font name and remove anything you don’t need.

This code snippet styles the heading text (EG. Name, Email, Subject, Message).

.form-wrapper .field-list .title {
  font-family: 'YOURFONTFAMILY';
  font-size: 16px;
  line-height: 1.4;
  text-transform: uppercase;
  color: #000;
}

Copy to clipboard

---

This code snippet styles the form caption text (EG. First Name + Last Name).

.form-wrapper .field-list .field .caption {
  font-family: 'YOURFONTFAMILY';
  font-size: 14px;
  line-height: 1.4;
  color: #000;
}

Copy to clipboard

---

This code snippet styles the form field description.

.form-wrapper .field-list .description {
  font-family: 'YOURFONTFAMILY';
  font-size: 14px;
  line-height: 1.4;
  color: #000;
}

Copy to clipboard

---

This code snippet styles the placeholder text (Inside the box).

input, textarea, input::placeholder, textarea::placeholder {
  font-family: 'YOURFONTFAMILY';
  font-size: 14px;
  line-height: 1.4;
  color: #000;
}

Copy to clipboard

---

This code snippet styles the field option (EG. Sign up for news and updates).

.form-wrapper .field-list .field .option {
  font-family: 'YOURFONTFAMILY';
  font-size: 14px;
  line-height: 1.4;
  color: #000;
}

Copy to clipboard

---

This code snippet styles the option/drop down text as well as the selected option.

.sqs-block-form .field-list select.show-placeholder,
.sqs-block-form .form-item select{
  font-family: 'YOURFONTFAMILY';
  font-size: 14px;
  line-height: 1.4;
  color: #000;
}

Copy to clipboard

---

This code snippet removes required after any form prompt and replaces it with an asterisk (*).

.form-wrapper .react-form-contents .field-list .title .required, .form-wrapper .react-form-contents .field-list .fields .description.required {
  visibility: hidden;  
}
.form-wrapper .react-form-contents .field-list .title .required:before, .form-wrapper .react-form-contents .field-list .fields .description.required:before {
  visibility: visible;  
  content: "*"; 
  font-size: 1em;
  line-height: 1em;
}
.form-wrapper .react-form-contents--submitted .required:before {
  visibility: hidden!important;
}

Copy to clipboard