How to Reuse the Same Form Throughout Your Squarespace Website
Simple way to organize your Squarespace forms
Squarespace's default method of handling forms can be quite frustrating - you can’t really create one form and use it across the website in different sections, each time you want to embed a form in Squarespace, you are forced to create a new form.
If you're looking for a more efficient solution which would allow you to use the same opt-in form across multiple pages, you're not alone. Many Squarespace users encounter this issue, especially when dealing with forms connected to external services like Zapier.
As we mentioned, the default behavior of Squarespace is to generate a new form every time you add one to your site. This means that you either need to plan strategically and only have your form in one visible place (like form on the homepage, for example), or deal with basically duplicates of one master form, leading to unnecessary clutter and potential management headaches.
But fear not, there's a workaround that can streamline your workflow and simplify your form management process!
Utilizing the Website Footer
One effective strategy is to place your opt-in form in the website footer. By doing so, you create a centralized location for your form that can be easily accessed from any page on your site. And below we will explain how you can actually hide or show the footer form on specific pages of your Squarespace website. Here's how you can implement this:
1. Edit the Footer
Navigate to your Squarespace website's settings and access the footer section for editing.
2. Create a New Section
Within the footer editor, create a new section specifically for your opt-in form. We suggest selecting “Add a blank section”, but you can also always pick a templated version and edit it accordingly.
3. Embed the Form
Once the section is created, add the Form block to it and any other design / copy elements you need.
Customizing Form Visibility
Now that you have your form in the footer, you may want to control where it appears on your site. You will need to use a small code snippet to show or hide specific elements on individual pages. Don’t worry if you’re not comfortable with code - in this example it’s very short and fairly straightforward.
First, you need to locate the ID of the new footer section you created. To do that, we strongly recommend you use the amazing Squarespace ID finder Google Chrome plugin. Again, you will be needing the section ID.
Next you need to identify target pages - determine the pages where you want to customize the visibility of the footer form.
Hide the form on a specific page:
In the Squarespace editor, hover over the gear icon next to that page’s title, click it and select the Advanced option.
Add the following code snippets to conditionally show or hide the footer form section based on your preferences. IMPORTANT - you need to paste your section ID, the one you got via the Squarespace ID finder Google Chrome plugin, in the code below for it to work:
<style type="text/css">
section[data-section-id="YOUR-ID-HERE"] {
display: none;
}
</style>Show the form on a specific page, hide everywhere else:
From the Squarespace admin, navigate to Website -> Pages -> Website Tools -> Custom CSS and add the below code, which will hide the footer form from the entire website. IMPORTANT - you need to paste your section ID, the one you got via the Squarespace ID finder Google Chrome plugin, in the code below for it to work:
section[data-section-id="YOUR-ID-HERE"] {
display: none;
}Next, in the Squarespace editor, hover over the gear icon next to that page’s title, click it and select the Advanced option. Add the below code to show the footer section on that particular page (again, paste the ID if your section):
<style type="text/css">
section[data-section-id="YOUR-ID-HERE"] {
display: block !important;
}
</style>By following these steps, you can maintain a single opt-in form throughout your Squarespace website while retaining the flexibility to control its visibility on a per-page basis. This approach not only streamlines your workflow but also ensures consistency and efficiency in managing your website's forms. Say goodbye to unnecessary duplicates and hello to a more organized and user-friendly Squarespace experience.
