How to add a popup form to your Squarespace website

A step-by-step guide to embedding a Flodesk popup form on your Squarespace website.

Flodesk popup forms help you capture visitors’ email addresses and grow your email list. Because popups appear on top of your page content, they naturally grab attention and encourage visitors to subscribe.

In Squarespace, popup forms are added using a header code snippet from Flodesk. Once added, the popup will automatically appear on your website based on the display settings you choose inside Flodesk.

Make sure you have:

• A popup form created in Flodesk

• Access to your Squarespace website editor

• A Squarespace Business or Commerce plan (required for Code Injection)

Squarespace allows you to add popup code either site-wide (on every page) or only on specific pages.

There are different ways to add custom code on Squarespace, depending on your plan. Learn more about it here.

In this Help center article, we show you how to add the header code via code injection, available on Business and Commerce plans.

1. Log in to your Flodesk account.

2. Go to Forms.

3. Create a Popup Form or open an existing one.

4. Customize the design, copy, and display settings.

Once your form is ready:

5. Click Embed.

6. Copy the Header code provided.

You’ll paste this code into Squarespace in the next step.

If you want your popup form to appear across your entire website, add the header code using Squarespace Code Injection.

In your Squarespace dashboard, click Pages under the Website section.

Scroll down to the Utilities section and click Website Tools.

Click Code Injection to access the site-wide code fields.

Paste the Flodesk popup header code you copied earlier into the Header field.

It will look like this screenshot example below:

Click Save.

Your Flodesk popup form will now appear across all pages of your Squarespace website.

If you'd prefer the popup to show only on a specific page (for example, a landing page or blog post), you can add the header code directly to that page.

In your Squarespace dashboard, click Pages under the Website section.

Find the page where you'd like the popup form to appear and click the gear icon next to that page.

In our example, we clicked the gear icon next to the page called "About the Show".

In Page Settings, click the Advanced tab.

Paste the Flodesk popup header code into the Page Header Code Injection field.

It will look like this screenshot example below:

Click Save.

Your Flodesk popup form will now appear only on that specific page.

To add a popup form to your Squarespace website:

1. Create and customize your popup form in Flodesk.

2. Copy the Header embed code from the Embed panel.

3. Paste the code into Squarespace Code Injection:

   • Add it to the Header field for site-wide display, or

   • Add it to Page Header Code Injection for a single page.

Once saved, your popup form will automatically appear on your website based on your form’s display settings.

If your popup isn’t appearing, check the following:

• The Flodesk header code was pasted correctly into Squarespace.

• Your Squarespace site is on a Business or Commerce plan (required for Code Injection).

• Your popup’s display conditions have been triggered (for example: time delay, or scroll percentage).

If you recently installed the code, try refreshing your page or opening the page in a private/incognito window.

Yes. To display the popup on a single page, paste the Flodesk header code into that page’s Page Header Code Injectionfield instead of the site-wide Code Injection area.

This allows the popup to appear only on that specific page.

No. You only need to install the header code once.

• Add it to site-wide Code Injection to show the popup across your entire website.

• Add it to Page Header Code Injection to show the popup on a single page.

Yes. Popup timing and behavior are controlled inside Flodesk.

You can choose triggers such as:

• Immediately

• Time delay

• Scroll percentage

These settings determine when visitors see your popup.

Yes, but each popup requires its own header code.

Keep in mind that showing multiple popups on the same page can overwhelm visitors and reduce conversions, so it’s usually best to use one popup per page.