A Beginner’s Guide to Squarespace Form Blocks
Looking for information about the newsletter block form? Check out the free beginner’s guide to Squarespace newsletter blocks
You can use a Squarespace form block to collect information from your website visitors.
Form blocks are a versatile tool for collecting information from your website visitors. You can use them to create contact forms, surveys, applications, or any type of form you need.
To make sure you receive form submissions, connect a storage option like your email address or a third-party service.
Remember, form fields might adjust based on your site's language or visitor's location.
Please note that form blocks aren't designed for HIPAA-compliant purposes.
How to add a form block to Squarespace
Here is an example of an form block with a few basic fields enabled.
Select edit on the top left-hand side of your website preview.
Click the add block option on a page section, or the plus sign inside classic editor.*
Select the Form option form the list of content blocks.
Double-click on the form block, or select the pencil icon to open the editor.
The Content tab is where you can change the form name and button text. The button will be visible to your website visitors, and the name will be visible to your visitors if you enable light box mode (you’ll find more info on light-box mode below)
This form name will also be included in the subject line if you decide to have all form submissions emailed to you.
Underneath form name and button text you’ll see an option to edit form fields.
Click on that option to add and change form fields, like name, email, and message. There are a lot of options for fields, each with their own unique settings. More information about those is in the section below.
It’s important to know that all fields can have a title and description, and many can feature custom placeholder text. You can also require a field to be filled out before a form can be. submitted.
Click on your Design to choose colors, fonts, and other layout settings that match your site's style. You can also access these inside your site style menu. The design tab is also where you can toggle on lightbox mode, which will display your form above your site content when a button is clicked.
Choose a storage spot: By default, form responses go to your email. But you can connect other tools like Google Sheets or Mailchimp in the "Storage" tab for extra organization.
Add a thank you message (optional): Want to say thanks after someone fills out your form? Add a custom message in the "Post-Submit" section. You can even send people to a specific page after they submit using the redirect option. You’ll find more details below.
*Classic editor is used by blog posts, additional product details, individual events, and sites built on version 7.0 Learn more inside Squarespace Made Simple*
Overview of Squarespace Form Fields
-
Text
Perfect for quick answers or a short message.
-
Email
Capture those valuable email addresses for future connections.
-
Phone
Choose to collect phone numbers with or without country codes.
-
Text Area
A text field designed for longer answers and more detailed responses.
-
Dropdown
Present a list of options for visitors to choose from - one at a time.
-
Checkbox
Let visitors pick multiple options from a fun checkbox list.
-
Radio Buttons
Similar to checkboxes, but visitors can only pick one option here.
-
Survey
Gauge opinions with a "Strongly Disagree" to "Strongly Agree" scale. At this time, the text for the scale can not be changed.
-
Address
Collect complete mailing addresses with a handy country dropdown.
-
Line
Break up your form with a horizontal line for better readability. This line can include a title and description text.
-
Website
Help visitors add their website address easily.
-
Date & Time
Ask for specific dates and times. The information added to this field is based on your visitor's browser location settings.
-
Currency
Let visitors enter a specific amount of money.
-
Hidden
This secret field is designed to be used for data tracking purposes.
-
File Upload
Allow visitors to upload files - perfect for images, documents, and more! Check out this article for more information about uploading files with forms.
-
Password
Let visitors enter confidential information that will only be visible to you.
Post-submit options for Squarespace forms
Want to say "thanks!" or send visitors to another page after they fill out your form? Click "Post-Submit" and choose your option.
For a message, simply add your text and it will appear after form submission. You can even get fancy with some HTML code if you want to!
For a redirect, paste the full URL of the page you want visitors to land on after submitting the form.
Whatever you decide to use for a post-submit option, be sure to test your form redirect to make sure it does what you want it to do!
What you can customize about the form block using Squarespace
There are all kinds of amazing design settings available inside Squarespace that you can use to customize the look of your form block. There are two main areas to reach these settings: your site style menu, accessible by clicking the paintbrush icon on the top right hand corner of your website preview, or double clicking on the form to open the editing options, and selecting the design tab.
In the design tab of the form block, you’ll be able to:
Change the submit button style (primary, secondary, or tertiary)
Toggle on/off First Input Highlight
Enable Lightbox mode
Add a background color
Add a custom border (stroke)
Change blend mode & blur options too.
In your site style menu is where you can change the form field style, text options, and adjust colors based on color themes.
What you can customize about the form block design using CSS
CSS stands for Cascading Style Sheet and it’s a special type of code that you can use to customize Squarespace.
These tutorials will teach you how to customize your Squarespace form style with basic CSS.
Where you can learn more about the Squarespace form block
Squarespace Made Simple
This mini course for beginners will teach you how to create your first Squarespace website. Lesson seven includes information about content blocks.
Squarespace Support Article
Learn more from the official Squarespace support blog
Squarespace
made simple
Get all the info you need to confidently
launch your Squarespace website ASAP.
Learn how to easily add a file upload feature to your Squarespace form. This step-by-step guide includes CSS customization tips for a seamless user experience. Boost your form functionality today!