How to Integrate Flodesk with Squarespace

Disclaimer: Some of the links in this article are affiliate links. I may receive a commission for purchases made through these links at no extra cost to you. I only promote platforms and products that I use myself.

Adding an email marketing tool like Flodesk to your Squarespace website can be a simple yet powerful way to connect with your audience. Whether you're looking to grow your email list, share updates or offer freebies, integrating Flodesk is a great choice. I’ll walk you through how to easily link Flodesk popups, full-page forms, and inline blocks, to your Squarespace site step by step.

If you want to try Flodesk, sign up with my link here or use code ERINFITZ and you'll get 50% off your first year!

What Flodesk Offers

Before diving into how to integrate it, let’s first look at what Flodesk can do:

• Email Marketing and Newsletters: Flodesk provides beautifully designed templates to create stunning email campaigns.

• Forms to Grow Your Audience: Choose from popups, inline forms, or full-page forms to collect emails.

• Flat Pricing: Unlike many other platforms, Flodesk charges a flat rate, no matter the size of your audience.

Adding a Full-Page Form to Squarespace

A full-page form is the easiest way to link Flodesk to your site. This type of form isn’t embedded directly into your website; instead, it works through a link that opens in a new tab.

1. Get the Full-Page Form Link:

   In Flodesk, create a new form and select the full-page option. Once it’s ready, click on the three dots (ellipse icon) next to the form or use the “Share” button to copy the link.

2. Add the Link to Squarespace:

   • Go to your Squarespace site.

   • Add a button or link anywhere on your site where you want the form to appear.

   • Label the button something like “Sign Up for My Newsletter” and paste the link.

   • Toggle the option to open the link in a new tab to keep visitors on your website.

Setting Up a Popup Form: Site-Wide

Popups are a popular way to capture email addresses and grab visitor attention. Here’s how to integrate a Flodesk popup.

1. Get the Popup Code:

   In Flodesk, create or edit your popup form. Once you’ve set up its design and timing (e.g., display immediately or after scrolling), copy the embed code for the form.

2. Adding to All Pages:

   Squarespace allows you to target your entire site easily.

   • Go to Pages → Website Tools → Code Injection in your Squarespace settings.

   • Paste the copied popup code into the Header section and save.

This ensures the popup appears on every page, regardless of where users land first.

Setting Up a Popup Form: Specific Page

Alternatively, if you want the popup to only appear on selected pages (e.g., just your Services page):

1. Go to the specific page settings by clicking the gear icon.

2. Open the Advanced section and paste the popup code there.

Now, the popup will appear only on that page. Repeat this process to add the popup to multiple specific pages.

Using Inline Forms in Squarespace

Inline forms allow you to embed a signup option directly into your Squarespace pages. They’re ideal for keeping users on the site while they subscribe.

1. Get the Header Injection Code:

   Start by creating or editing your inline form in Flodesk. When you’re ready to embed it, copy the header injection code provided. This only needs to be done once.

2. Add the Header Code:

   Paste the header injection code into Pages → Website Tools → Code Injection → Header in Squarespace. Save your changes.

3. Embed the Inline Form:

   • Copy the inline block code specific to your form from Flodesk.

   • Go to the page where you want to display the form and add a Code Block.

   • Paste the inline form code into the Code Block, save, and adjust its position as needed.

4. Repeat Across Pages:

   You can reuse the inline block code to place the form in multiple locations, like your homepage or Services page. No need to re-add the header code—it only needs to be installed once. Different inline forms can also be used wherever needed. For instance, one form could offer a freebie, while another could simply collect newsletter signups.

Removing the Padding

I personally find the 70px of padding Flodesk adds around the inline forms to be too much. Here’s how you can change it.

If you’re familiar with the Chrome Developer Tool:

1. Go to a ?noredirect browser and pull up the inspect tool.

2. Inspect the form and grab its unique ID.

3. Go to Pages → Website Tools → Custom CSS and paste the ID with the additional info below. Note you don’t have to do 0px you can choose another number.

Replace “.your-form-id” with the specific ID of your form.

.your-form-id {

padding: 0px !important;

}

If you aren’t familiar with the Chrome Developer Tool:

1. Copy and paste the “formID” from the Flodesk code. This is a string of letters and numbers that’s unique to your inline block.

2. Go to Pages → Website Tools → Custom CSS and paste the below code in.

3. Change “12345” with your unique ID you copied from step 1.

.ff-12345 .ff-12345__form {

padding: 0px !important;

}

Keeping Forms Synced

Once your Flodesk forms are live on Squarespace, there’s no need to re-embed or update the code when you make changes in Flodesk. Whether you tweak a button’s colour, update the text, or swap an image, the changes will automatically appear on your site. The only time you’d need to revisit the Squarespace integration is if you decide to remove or replace a form entirely.

Conclusion

By following these steps, you can seamlessly integrate Flodesk's email marketing capabilities with your Squarespace website. Whether you choose to implement full-page forms, site-wide popups, or inline forms, you now have the tools to build your email list effectively. The beauty of this integration lies in its flexibility and low maintenance, once set up, your forms will automatically sync with any changes you make in Flodesk. Remember, successful email marketing starts with making it easy for your audience to connect with you, and these integration methods help you do exactly that.