Squarespace Form Customization

Squarespace Form Block Basics

Adding a Form Block

Open the page editor, click the plus icon, and select Form from the block menu. Squarespace adds a default form with name, email, subject, and message fields. Click on the form to open the field editor where you can add, remove, and reorder fields.

Available Field Types

Squarespace Form Blocks support: text fields (single line and multi-line), email fields, phone number fields, dropdown selects, radio buttons, checkboxes, date pickers, time pickers, and file upload fields. Each field can be marked as required or optional, and you can add placeholder text and description labels.

Form Storage and Notifications

Form submissions are stored in the Form Results section of your Squarespace dashboard and can be exported as CSV. You can configure email notifications to receive submissions at any email address. On Business plans and above, you can also connect forms to Mailchimp, Google Sheets, and Zapier through integrations.

Customizing Form Appearance with CSS

Styling Form Fields

The default form styling uses your template's fonts and colors, but the fields themselves often look generic. Use Custom CSS to adjust field borders, padding, background color, and border radius:

.form-wrapper .field-element { border: 2px solid #e0e0e0; border-radius: 8px; padding: 12px 16px; background-color: #fafafa; font-size: 16px; transition: border-color 0.3s ease; } .form-wrapper .field-element:focus { border-color: #333333; background-color: #ffffff; }

Styling Form Labels

Customize label fonts, sizes, and colors to match your brand typography. Make labels distinct from placeholder text so visitors clearly understand what each field requires:

.form-wrapper .field-list .field .caption { font-size: 14px; font-weight: 600; color: #333333; margin-bottom: 6px; }

Styling the Submit Button

The form submit button uses your template's default button styling. Override it with Custom CSS for a button that matches your form's specific design context. Adjust size, color, hover state, and width - many designers make the submit button full-width on forms for a cleaner look. For button styling techniques, our guide to changing button colors in Squarespace covers color, hover, and responsive sizing.

Custom Form Layout

By default, Squarespace form fields stack vertically. To create a multi-column form layout (like first name and last name side by side), use CSS Grid or Flexbox on the form field container. Target the .field-list class and apply grid rules with appropriate column widths. Add a media query to collapse to single-column on mobile. For layout techniques, our guide to adding custom CSS to Squarespace covers Grid and Flexbox implementation.

Advanced Form Customization

Custom Confirmation Messages

After submission, Squarespace shows a default thank-you message. Customize this in the Form Block settings - click the form, go to the Advanced tab, and edit the post-submission message. You can also redirect to a custom thank-you page instead of showing an inline message. A dedicated thank-you page lets you add tracking pixels, upsell offers, or next-step instructions.

Hidden Fields for Tracking

Add hidden form fields that capture data visitors do not see - like the page URL, traffic source, or campaign parameter. Use JavaScript in Code Injection to populate hidden fields automatically based on URL parameters or cookies. This is valuable for tracking which pages or campaigns generate the most form submissions.

Form Validation Customization

Squarespace handles basic validation (required fields, email format) natively. For custom validation - phone number format checks, minimum character counts, or conditional requirements - add JavaScript through Code Injection that intercepts the form submission and validates before sending. For code implementation, our guide to adding custom code to Squarespace covers form-related JavaScript.

Third-Party Form Alternatives

When to Use a Third-Party Form Tool

Squarespace's native forms do not support conditional logic (showing or hiding fields based on previous answers), multi-step forms, file uploads larger than 20 MB, payment collection, or complex calculations. If you need any of these, use a third-party form tool and embed it on your Squarespace page.

Popular Form Tools for Squarespace

Typeform - Conversational forms with conditional logic, one question at a time. Embed via iframe in a Code Block. JotForm - Full-featured form builder with payment integration, file uploads, and conditional logic. Google Forms - Free, simple, integrates with Google Sheets. Embed the iframe in a Code Block. Tally - Modern form builder with a generous free tier and clean embed experience.

Each tool provides an embed code that you paste into a Squarespace Code Block. Set the iframe width to 100% for responsive display. For broader design consistency when embedding forms, our Squarespace design tips guide covers visual integration of third-party elements.

Form Best Practices for Squarespace

Keep forms short. Every additional field reduces completion rate. Only ask for information you genuinely need. A contact form rarely needs more than name, email, and message.

Use descriptive labels, not just placeholders. Placeholder text disappears when visitors start typing. Labels above fields remain visible throughout the form filling process and are more accessible for screen readers.

Put forms where visitors are ready to act. Place contact forms at the bottom of service pages after you have made the case for your offering. Place newsletter signups in the footer or after valuable blog content. Context matters.

Test on mobile. Form fields that look fine on desktop can be too small to tap, too narrow to read input, or too close together on mobile. Test every form on an actual phone and adjust field sizes with CSS media queries if needed. For mobile optimization, our Squarespace mobile optimization guide covers form usability on small screens.

Set up email notifications immediately. There is nothing worse than a form that works but nobody sees the submissions. Configure email notifications in the Form Block settings so you receive an alert for every submission. For SEO and conversion tracking, our Squarespace SEO guide covers goal tracking and analytics integration.

Build Forms That Convert

A well-customized Squarespace form does more than collect data - it guides visitors through a smooth submission experience that reflects your brand and minimizes drop-off. Style your fields to match your design, keep the form short, use clear labels, and test on mobile.

Start with Squarespace's native Form Block for straightforward needs. Switch to a third-party tool when you need conditional logic, multi-step flows, or payment collection. Either way, a form that looks intentional and works smoothly converts better than one that was left at its default.