How to Customize Squarespace forms with CSS

This post may contain affiliate links. I may earn a commission at no extra cost to you if you make a purchase through them. Full disclosure here.

To Customize Squarespace forms with CSS:

1. Go to your Squarespace website's Design > Custom CSS section.

2. Use the following CSS selectors to target specific elements of the form:

• .sqs-block-form.field-list.field input, .field textarea - Target the input fields and textareas

• .sqs-block-form.field-list.field input:focus, .field textarea:focus - Target the focused/active state of the fields

• .sqs-block-form span.required - Target the "(required)" text

• .form-wrapper input[type=submit] - Target the form submit button

1. Customize the styles by adjusting properties like border, background-color, font-family, font-size, etc.

2. Test your changes on the live site and make any necessary adjustments to the CSS.

Squarespace provides limited built-in options for customizing forms, but with a bit of CSS you can completely transform the look and feel to match your brand. The key is understanding how to properly target the different form elements.

Customizing Squarespace Form Elements with CSS

Here are some common Squarespace form customizations you can achieve with CSS:

Input Fields and Textareas

css.sqs-block-form.field-list.field input,
  .field textarea {
  border: 1px solid #eee;
  border-radius: 5px;
  background: #e5f5f6;
  }

    

Copy to Clipboard

Focused/Active State

css.sqs-block-form.field-list.field input:focus,.field textarea:focus {
  background: #F6EDCE;
  outline: none !important;
  }
    

Copy to Clipboard

"(required)" Text

css.sqs-block-form span.required {
  visibility: hidden;
  }
  .sqs-block-form span.required:before {
  content: " * ";visibility: visible !important;
  }

    

Copy to Clipboard

Submit Button

css.form-wrapper input[type=submit]{
  background-color: #A1D9DD !important;
  }
  .form-wrapper input[type=submit]:hover {
  background-color: #EDD17D !important;
  }

    

Copy to Clipboard

By using these CSS selectors and customizing the styles, you can create Squarespace forms that are perfectly aligned with your brand and provide an enhanced user experience for your visitors.