Form Styler

Style your Squarespace contact forms and form blocks with custom colors, borders, spacing, and button designs. No code knowledge needed.

Why this matters

Squarespace forms use default browser styling that rarely matches your brand. Mismatched inputs and generic buttons erode trust and reduce conversion rates. Custom-styled forms look intentional, feel professional, and convert better because visitors trust a polished experience.

/* Squarespace Form Styler */

/* Input & Textarea Fields */
.form-wrapper .field-list .field .field-element,
.form-wrapper .field-list .field input[type="text"],
.form-wrapper .field-list .field input[type="email"],
.form-wrapper .field-list .field input[type="tel"],
.form-wrapper .field-list .field textarea {
  background-color: #ffffff;
  border: 1px solid #cccccc;
  border-radius: 4px;
  color: #333333;
  padding: 12px 16px;
  font-size: 15px;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

/* Focus State */
.form-wrapper .field-list .field .field-element:focus,
.form-wrapper .field-list .field input:focus,
.form-wrapper .field-list .field textarea:focus {
  border-color: #000000;
  outline: none;
  box-shadow: 0 0 0 3px #0000001a;
}

/* Placeholder */
.form-wrapper input::placeholder,
.form-wrapper textarea::placeholder {
  color: #999999;
  opacity: 1;
}

/* Labels */
.form-wrapper .field-list .field .caption,
.form-wrapper .field-list .field label {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  margin-bottom: 6px;
}

/* Field Spacing */
.form-wrapper .field-list .field {
  margin-bottom: 20px;
}

/* Submit Button */
.form-wrapper .form-button-wrapper .form-button,
.form-wrapper input[type="submit"] {
  background-color: #000000;
  color: #ffffff;
  border: 2px solid #000000;
  border-radius: 4px;
  padding: 14px 32px;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease, transform 0.15s ease;
}

.form-wrapper .form-button-wrapper .form-button:hover,
.form-wrapper input[type="submit"]:hover {
  background-color: transparent;
  color: #000000;
  transform: translateY(-1px);
}

How to add this to Squarespace

1. Copy the CSS code above.
2. Go to Design → Custom CSS in your Squarespace dashboard.
3. Paste the code at the bottom of the editor.
4. Click Save and check any page with a form block.
5. Note: These styles apply to all Form Blocks, Newsletter Blocks, and Contact Form blocks site-wide. To target a specific form, wrap it in a Summary Block with a unique class or use the page-specific .collection-ID prefix.