How to set up and maximize your contact form for better leads

Website Design

Oct 24

White wall with a stack of old books and a white coffee mug

One of the most important elements to add to your website is a contact form to start collecting leads and to begin a dialog with potential customers.

If you’re promoting a business or services on your website, it’s vital to have a contact form that visitors can quickly fill out to reach you for more information, technical support, or a general inquiry.

Squarespace has made adding contact forms to your website very easy, and they’ve recently rolled out even more great customizations for their contact form, so I wanted to share those with you.

This post walks through the steps of how to add a contact form to your website, how to customize it, and where the information is stored once a visitor clicks “submit”.

What is a website contact form used for?

Having a contact form on your website is both beneficial for the visitor an saves you, the business owner, valuable time. It allows the visitor to effortlessly add the most important information that’s required to get in touch with you. And it starts the communication process in a powerful and informative way.

A website contact form can be used in various ways including:

as an inquiry or lead generator
as an email collection or marketing tool
to collect comments or request feedback
as a technical support form
as a general questions inquiry

💡 PRO TIP You can create as many forms on your website as needed. Test each form to be sure it’s working and being directed properly.

How to use your contact form for maximum customer engagement

Make the most of your contact form, and gather enough information from your potential customer - without overwhelming them.

Plan ahead by deciding what content or info is the most important for engaging with your visitor. The default Squarespace form fields (name, email, subject, and message) are the bare minimum. So you’ll want to customize your contact form with more fields and options (details on customization are further down in this post).

For example, let’s say you run a consulting business. You’ll likely want to add important fields like a phone number, company name, website, and check-boxes for options to select the specific consulting services they’re interested in.

Or perhaps you’re providing a form on your website to connect for technical support. Some useful added fields might include a drop-down menu of the specific type of support they need, a phone number, and a time field for the best time of day that they’re reachable by phone.

Think about how best to maximize this information-gathering moment, while not scaring off your visitor by giving them too much to do ;-)

How to add a contact form to your webpage in Squarespace

Let’s get started by editing the page where you want your contact form to live.

Add a new Form block to a page section by clicking on ADD BLOCK in the upper left area of your page section.

Screenshot of the Add Block menu in Squarespace

How to customize the contact form

Forms on your website are independent of one another, so you can customize each form to serve different purposes or collect different information. Changes made to one form will NOT affect any other form on your website*.

*The exception is the Form Style option, which is global - meaning changes to the Form Style on one form will update all the forms on your website. More on that below.

Here are ways to customize your contact form:

1) Add a contact form title

Click on the form settings, and under the Content tab, add a name for your form. This can be any name that helps you keep track of your website forms, but keep in mind that name will also appear above the form if you use the lightbox option (more on that below). Here you can also edit the button text. The default is submit but it can be any word or phrase - get creative!

Screenshot of the contact form settings in Squarespace

2) Edit the contact form fields

Under the Form Name you just created (same Content tab), click on Edit Form Fields. This opens up a sub-menu of options/fields to add to your form. You’ll notice the default form fields are Name, Email, Subject, and Message. This can all be edited, and you can also add more useful fields such as Phone, Address, Date, etc. if needed by clicking on ADD FIELD.

💡 PRO TIP You can reorder the form fields by clicking on Edit and dragging the fields up or down.

3) Designate the contact form’s required fields

Think about exactly what information you need to collect on the form for the best possible customer experience, and mark those as required fields.

For example, if your form is focused on support for a specific product purchased, one of the fields you’ll likely want to designate as required is the order number. That way the customer is prompted to enter it, and you’ll immediately be able to refer to the correct order.

Maybe your form is focused on feedback. In this case, the message/comments field should be designated as required.

4) Create a post-submit message

Don’t leave your visitors or customers wondering if their form results have been sent!

Under the Content tab, click on Post-Submit.

Within this sub-menu you can either write a custom message that will display in place after the form is sent, or you can add a URL link to redirect the visitor to a “thank you” page after hitting submit (you’ll need to create your own separate thank-you page).

Both of these options will create a better user experience for your website visitor.

5) Customize the contact form’s style

A new feature of Squarespace forms is the Form Style option. Under the Design tab, you’ll note a submenu called Form Style. Clicking on this will showcase four pre-style options for the look of your form (ie. rounded field corners, etc.) that you can choose from. You can further customize your form’s style by clicking on Edit Form Styles, opening a panel with even more options to choose from.

Keep in mind that any edits made here are global, so will affect all the forms on your site.

💡 PRO TIP The Form Style panel can also be easily accessed by clicking on the Site Styles (paint brush) icon at the top right of your screen, and selecting Forms.

6) Choose a button style for your contact form

Within the Design tab, you’re able to choose the form button’s style (primary, secondary, tertiary) and select its alignment.

7) Customize your contact form background

Another fun (optional) customization of the Design panel is adding a background to your form. By toggling the background option, you can adjust the color, corner radius, and the background padding.

8) Embedded contact form vs. lightbox form

You can choose to either embed your contact form within your website’s page or as a lightbox (pop-up) feature. If you toggle on the lightbox feature, a button will appear in place of your form. You can always toggle it off and return to an embedded form.

As mentioned above, the form name will appear at the top of your lightbox form, so it’s important to add a good, relevant title.

An embedded form will retain all of your customizations as listed above. However, at the time of this post, the customization options for the lightbox form are unfortunately very limited without custom CSS.

How to add the contact form to more than one page

The contact page is the most obvious location to put your contact form. But I recommend also adding at least a simple version of your contact form on your home page somewhere. If a visitor only ever sees your home page, you’ll want them to be able to find your contact form right away with a prompt to fill it out and get in touch.

If you need to replicate your contact form on another page, you can make use of the Save Page Section feature. Click on the heart icon and the page section will be saved, including your contact form! Now when you create a new page, you can add the saved page section with the contact form by selecting it from your Saved Sections.

Understanding where the contact form results are stored

When a visitor submits a form from your website, you can direct it to an email address and receive the results of the form via email.

Squarespace has also added a new area in the Contacts menu called Smart Lists, and added Form Submitters where all your form results will be stored and organized.

From your main website panel, navigate to CONTACTS -> FORM SUBMITTERS. There you’ll find a filterable list of contact form submissions with all the information entered by the visitor.

It’s that simple!

Screenshot of the form results menu in Squarespace

Test your contact form

Finally, don’t forget to test your contact form!

Confirm the post-submit message or the page redirect. And be sure the form results are being sent to the designated email address and stored on your website correctly.