Squarespace forms look the same on every site out of the box. The default input fields, buttons, and labels are functional but generic. This guide covers five targeted CSS techniques to make your forms match your brand — from input styling and button colors to placeholder text, labels, and borderless layouts. Each snippet goes in Design → Custom CSS.
1. Style Form Input Fields
Squarespace 7.1 form inputs use the .form-item input and .form-item textareaselectors. These target every text input and multi-line textarea inside a form block. Overriding their borders, padding, and background lets you match the form to your site's design system instead of relying on the template defaults.
The focus state is just as important as the resting state. When a user clicks into a field, a visible change — a colored border, a subtle box-shadow, or a background shift — tells them exactly which field is active. Skipping the focus state is a common mistake that hurts both usability and accessibility. Screen readers and keyboard-only users depend on visible focus indicators.
The CSS below sets a light gray background with rounded corners on every form field, then switches to a white background with a red border glow on focus. Adjust the hex values to match your brand palette.
.form-item input,
.form-item textarea {
border: 1px solid #ddd !important;
border-radius: 6px !important;
padding: 12px 16px !important;
background-color: #fafafa !important;
font-size: 16px !important;
transition: border-color 0.2s ease;
}
.form-item input:focus,
.form-item textarea:focus {
border-color: #e63946 !important;
outline: none !important;
box-shadow: 0 0 0 3px rgba(230, 57, 70, 0.15);
background-color: #ffffff !important;
}Result:All form inputs and textareas get a clean rounded border, light background, and smooth transition. On focus, the border turns red with a soft outer glow, and the background becomes white — giving clear visual feedback to the user.
Tip
Set font-size: 16px or higher on mobile inputs. iOS Safari zooms into any input with a font size below 16px, which causes a jarring layout shift for your visitors.
2. Change Submit Button Color
The form submit button in Squarespace 7.1 uses the .form-submit-button selector. This is separate from the general .sqs-block-button-element class used by standalone button blocks, so you can style form buttons independently without affecting buttons elsewhere on your site.
A strong hover state transition makes the button feel responsive. When a user hovers over the submit button, the color change should be immediate enough to feel connected to their action but smooth enough to not feel jarring — 0.2 seconds is the sweet spot. Use a darker shade of your brand color for the hover state rather than a completely different color.
The snippet below sets a bold red submit button with white text, rounded corners, and generous padding. The hover state darkens to a deeper red. Replace #e63946 and #c1121f with your own brand colors.
.form-submit-button {
background-color: #e63946 !important;
color: #ffffff !important;
border: none !important;
border-radius: 6px !important;
padding: 14px 32px !important;
font-size: 16px !important;
font-weight: 600 !important;
cursor: pointer;
transition: background-color 0.2s ease;
}
.form-submit-button:hover {
background-color: #c1121f !important;
}Result:The form submit button becomes a solid branded button with bold text and rounded corners. On hover, it smoothly darkens to signal interactivity. This overrides the template's default button styling on every form block across your site.
3. Style Placeholder Text
Placeholder text — the gray hint text inside empty form fields — uses the ::placeholder pseudo-element. You need to include vendor-prefixed versions for full cross-browser coverage, though modern browsers mostly support the unprefixed version. The webkit prefix still matters for older Safari and Chrome versions your visitors may be using.
The key design principle for placeholder text is contrast differentiation. Placeholder text should be noticeably lighter than actual input text so users can instantly tell the difference between a filled field and an empty one. A color around #999999or 40–50% opacity of your text color works well. Italic styling is a common convention that further separates placeholder from user-entered text.
One common pitfall: setting opacity on placeholder text. Firefox applies its own opacity to placeholders by default, so if you want consistent color across browsers, explicitly set opacity: 1 on your placeholder rules and control the lightness through the color value itself.
.form-item input::placeholder,
.form-item textarea::placeholder {
color: #999999 !important;
font-style: italic;
font-size: 14px !important;
opacity: 1;
}
/* Webkit browsers */
.form-item input::-webkit-input-placeholder,
.form-item textarea::-webkit-input-placeholder {
color: #999999 !important;
font-style: italic;
}Result: Placeholder text in all form fields becomes a consistent light gray italic, clearly distinguishable from user-entered text. The styling renders identically across Chrome, Safari, Firefox, and Edge.
Tip
Never use placeholder text as a replacement for form labels. Placeholders disappear the moment a user starts typing, leaving them with no context for what the field expects. Always pair visible labels with placeholder hints.
4. Change Form Label Styling
Form labels in Squarespace 7.1 use the .form-item .title selector. These labels sit above each input field and tell users what information to enter. The default styling is usually plain body text at the same size as everything else on the page, which makes forms feel like an afterthought rather than a designed element.
A clean, modern pattern is to make labels slightly smaller than the input text, set them to uppercase with subtle letter-spacing, and use a semibold weight. This creates a clear visual hierarchy — the label reads as a descriptor, and the input field reads as the primary element. Adding a few pixels of bottom margin between the label and the input improves readability and gives the form room to breathe.
The required field indicator (the asterisk next to mandatory fields) can also be styled independently using the .form-item .requiredselector. Changing it to your brand's accent color ties the whole form together.
.form-item .title {
font-size: 13px !important;
font-weight: 600 !important;
color: #333333 !important;
text-transform: uppercase;
letter-spacing: 0.8px;
margin-bottom: 6px !important;
}
/* Required field indicator */
.form-item .required {
color: #e63946 !important;
}Result:Form labels become small, uppercase, and semibold — clearly separated from the input text. Required field asterisks turn red, matching the form's accent color. The overall form typography feels intentional and branded.
5. Remove Form Field Borders
Removing borders from form fields creates a minimal, modern aesthetic that works especially well on sites with clean, editorial design. There are two popular approaches: a background-only style where fields are distinguished by a subtle fill color, and a bottom-border-only style that gives a material design feel. Both look significantly more polished than the default bordered inputs.
The background-only approach works best on white or light-colored sections — the light gray fill (#f0f0f0) creates enough contrast to define the input area without any border. On darker backgrounds, you'd flip this and use a slightly lighter background than the section color. The bottom-border style works universally because the single line provides enough visual structure regardless of the background.
The CSS below includes both approaches. Use the first block for the background-only look, or the second block for the bottom-border style. Don't combine them — pick one that fits your design direction.
/* Option A: Minimal background-only style */
.form-item input,
.form-item textarea,
.form-item select {
border: none !important;
background-color: #f0f0f0 !important;
border-radius: 4px !important;
padding: 14px 16px !important;
}
/* Option B: Bottom-border-only style */
.form-item input,
.form-item textarea {
border: none !important;
border-bottom: 2px solid #ddd !important;
border-radius: 0 !important;
background: transparent !important;
padding: 12px 0 !important;
}
.form-item input:focus,
.form-item textarea:focus {
border-bottom-color: #e63946 !important;
outline: none !important;
}Result: Option A gives you clean, borderless inputs with a subtle gray fill — fields are defined by background color alone. Option Bstrips everything except a bottom line that changes color on focus, creating a sleek material design look. Both options dramatically modernize the form's appearance.
Warning
If you use Option A (background-only), make sure there is enough contrast between the field background and the section background. On a white page, #f0f0f0 works. On a light gray page, you may need to go darker or switch to white fields. Low contrast between the field and page background makes forms hard to use, especially for visually impaired visitors.
