How to Customize Your Squarespace Forms
Heads up: this post may contain affiliate links. In other words, if you make a purchase using my link, you won’t pay a dime more but I’ll earn a small commission. My chips and salsa fund thanks you from the bottom of its heart… er stomach?
Contact forms are one of the most important elements on your website. After all, how else are potential clients or customers supposed to get in touch with you unless you have a contact form on your website?
But by default, contact forms are not the most prettiest or the most exciting thing to add to your website.
Luckily, Squarespace recently added a few new features to the built in forms that you can use to make your forms look less boring and more appealing and actually be more pleasant for your visitors to fill out. So in this tutorial, I will show you what those options are and how to make your Squarespace forms less boring.
How to Customize the Look of Your Squarespace Forms Without Code
Let's take a look at what options you have available for customizing your contact forms. For this tutorial, I'm on a demo site that’s using Squarespace 7.1 and the Fluid Engine editor as well as one of the default Squarespace templates. The options are the same for customizing your forms across the 7.1 version of Squarespace regardless of which template or editor you’re using. The tutorial is not applicable to Squarespace 7.0.
You can watch the video tutorial below or scroll down for the written version.
New Squarespace Form Block Design Options
The first thing I am going to do is go my demo website and click on the Contact page. As you can see, I already have a contact form here, but if I click to edit mode and then click on the form, you can see that there are several new options available.
You can choose from several different form styles. So the default one is this that you're seeing right here. Then you have this more rounded style that also adds a color to your form input fields. Then there’s a style that adds an outline and it's slightly less round. Finally, you have this style where your form fields are simply underlined.
Adding a Colored Background to Your Squarespace Forms
Another option that you have for customizing your form is that you can add a background. This has been actually in effect for a while now. I'm just covering it now because I thought it would be convenient to cover it at the same time as I'm covering form styles.
Essentially, you can choose a background color for your form, which makes them more visible on your page. And you can choose any of the colors that you have in your color palette, or you can enter a custom color under the custom option. You can also choose to enable a light box on the form, which means that when that is enabled, when somebody clicks a button, the form will pop up.
You can also customize the corner radius for the background. So you can give it a more rounded look, which is similar to how image shapes work. You can customize all corners at once, or you can customize individual corners and control what they look like. And finally, you can control the amount of padding that the background gives to the form.
New Storage Options in Squarespace Forms
And that is pretty much it when it comes to styling and customizing your forms. Other than that, nothing much has changed. We still have the same four fields that we had available before. And the last option that you have is under storage. You can choose to store your form in a Google spreadsheet, you can use Zapier to send it to another app, or you can store the submissions in your MailChimp account. And of course you can also get notified when somebody submits a form and connect it to your email address.
Final Thoughts
And that’s it for this short and sweet tutorial. If you want more Squarespace tips, I’ll have them linked down below and if you want a step-by-step walkthrough of how to actually launch your Squarespace website, then click the image below and I’ll send you my free roadmap ASAP.
For more tips and tricks, check out these articles:
