How to Style Squarespace Contact Forms with CSS

Squarespace contact forms work fine out of the box, but they look generic. Every Squarespace site ships with the same rounded inputs, the same gray borders, the same submit button. If you want your forms to match your brand, you need custom CSS. The problem is that Squarespace's form markup uses deeply nested selectors that are not obvious to find.

This guide breaks down every selector you need, from input fields and textareas to submit buttons, focus states, and placeholder text. You will walk away with copy-paste CSS that transforms generic Squarespace forms into polished, branded components.

The Form Selectors Squarespace Uses

Squarespace wraps every form block inside a .form-block container. Inside that, input fields use the class .form-input, textareas use .form-input as well (they share the class), and the submit button uses .form-button-wrapper .form-submit-button. Field labels use .form-label.

/* Target all form inputs and textareas */
.form-block .form-input {
  border: 1px solid #e0e0e0 !important;
  border-radius: 2px !important;
  padding: 14px 16px !important;
  font-size: 15px !important;
  background: #fafafa !important;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

/* Textarea specific height */
.form-block textarea.form-input {
  min-height: 140px !important;
}

/* Form labels */
.form-block .form-label {
  font-size: 13px !important;
  font-weight: 500 !important;
  letter-spacing: 0.3px !important;
  text-transform: uppercase !important;
}

Note that both text inputs and textareas share the .form-input class. If you need to style them differently, use input.form-input for text fields and textarea.form-input for the message box.

Focus States and Placeholder Text

Focus states are what visitors see when they click into a form field. The default Squarespace focus state is a faint blue outline that does not match most brand color schemes. Custom focus styles make forms feel intentional and polished.

/* Focus state — highlight active field */
.form-block .form-input:focus {
  border-color: #1a1a1a !important;
  box-shadow: 0 0 0 3px rgba(26, 26, 26, 0.08) !important;
  outline: none !important;
  background: #fff !important;
}

/* Placeholder text styling */
.form-block .form-input::placeholder {
  color: #999 !important;
  font-style: italic !important;
}

/* Webkit-specific placeholder (Safari) */
.form-block .form-input::-webkit-input-placeholder {
  color: #999 !important;
  font-style: italic !important;
}

The focus state above uses a subtle box-shadow to create a glow effect around the active field. This is more visually refined than a simple border color change and gives visitors a clear indicator of where they are typing. Always include outline: nonewhen you define custom focus styles, or the browser's default outline will render on top of your shadow.

Styling the Submit Button

The submit button is the most important visual element of any form. It is the call to action, and it should look like one. Squarespace's default button styling is serviceable but generic.

/* Submit button base styling */
.form-block .form-button-wrapper .form-submit-button {
  background: #1a1a1a !important;
  color: #fff !important;
  border: none !important;
  border-radius: 2px !important;
  padding: 14px 32px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  letter-spacing: 1px !important;
  text-transform: uppercase !important;
  cursor: pointer !important;
  transition: background 0.2s ease, transform 0.1s ease;
}

/* Submit button hover */
.form-block .form-button-wrapper .form-submit-button:hover {
  background: #333 !important;
  transform: translateY(-1px);
}

/* Submit button active/click */
.form-block .form-button-wrapper .form-submit-button:active {
  transform: translateY(0);
}

The translateY(-1px) on hover gives the button a subtle lift effect that feels responsive and tactile. The active state snaps it back to communicate the click. These micro-interactions make a measurable difference in how professional a form feels.

Generate It Instead

Writing form CSS by hand means inspecting elements, testing across browsers, and fine-tuning values pixel by pixel. Our Form Styler generates production-ready CSS for every part of your Squarespace forms. Pick your colors, adjust spacing, preview the result, and copy the code.

If you are customizing other parts of your site, check out our guide to nav hover effects or our full list of free Squarespace CSS generators.