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?

 Flodesk is a relatively new email marketing platform that is gaining quickly in popularity. Not only because it has beautiful email templates that you can customize to match your brand, but it's also easy to use. And on top of that, it also allows you to send unlimited emails to unlimited subscribers for one flat rate.

So if that's something that you're interested in, I'd be definitely checking Flodesk out. But in today's tutorial, I want show you how you can integrate Flodesk with your Squarespace website. I'll show you how to integrate both the inline form and the popup form that Flodesk offers. 

So without further ado, let's dive into today's tutorial.

Prefer to watch? Hit the Play button below:

How to Embed Flodesk Inline Form in Squarespace

For the purposes of this tutorial, I’ll assume that you’re either on a 30-day free trial or you already have a paid plan and at least one inline form created in your account.

You’ll also need Squarespace Business plan to make use of the Code Injection function or their code block. 

Step 1: Grab the Form Code from Flodesk

Once in your Flodesk account, go to Forms and select the form you want to embed in your Squarespace website. Click the three dots on the form and press Embed.

This is where we need to copy the code. As you can see, Flodesk is going to give us two pieces of code. You'll want to copy the first piece of code.

Step 2: Inject the Header Code

Over on your Squarespace website, you will want to go to Settings -> Advanced -> Code Injection. Paste the code the Flodesk gave us in the first available spot under the Header Code Injection area and then save.

Then, go back to your Flodesk account and copy the second piece of code that Flodesk gave you.

Step 3: Inject the Inline Code

Return to your Squarespace account and you go to the page where you want the form to appear. Add a Code Block and paste in the second code that Flodesk gave you. Click on Save and then Exit.

You should then see your Flodesk Inline Form show up wherever you placed your Code Block, which makes it super easy to put your form anywhere on your website. 

Things to Keep In Mind:

The Header code that you copied from Flodesk — you only need to add it once. Even if you have multiple forms or want to add a form to multiple pages, you only add it once. The only piece that you need to copy for any new form or for this form to display on your site is this Inline code.

How to Add a Flodesk Pop Up Form to Your Squarespace Website

Now, let's take a look at how you can add a popup form. Go back to Flodesk and under forms, choose a popup form you’ve created. Click on the three dots and then press Customize. You'll actually want to choose when this popup should display whether immediately or after 10 seconds, 30 seconds, or when the visitor scrolls 30%. You can also enable double optin, select whether to display the form to returning visitors who have already subscribed and decide if you want to be notified when you have a new sign up. The last option is to choose whether you want to display a success message or redirect your visitors to a URL.

When you’ve configured the form, go to Embed, copy the cod,e and then go back to your Squarespace website.

Under Code Injection, copy the code that Flodesk gave you. Keep in mind that if you already added the code for the inline form, you’ll need to replace it with this one. Then, click Save.

Now, your pop-up form will be embedded on every page of your website.

If you only want the pop-up form to be active on specific pages, then instead of using the Code Injection method described above, you would instead paste the code into the Page Header Code Injection for that specific page.

You can do that by first selecting the Page -> Page Settings (found with the cogwheel beside the Page Title) -> Advanced -> Page Header Code Injection and pasting the code. Click Save and your form will be active only on that specific page.

Final Thoughts

And that’s it for this tutorial. I hope this step-by-step walkthrough made it easy for you to add your Flodesk forms to your Squarespace website.

For more tips and tricks, check out these articles: