How to add Flodesk to Squarespace

This post may contain affiliate links. We may receive a commission for purchases made through these links (at no cost to you, of course! πŸ™‚)

Flodesk is an email marketing service that is built for creators, by creators. It is an intuitive platform that allows you to create beautiful, template-based emails, and is a powerful tool that you can use as a creative or entrepreneur to uplevel your email marketing strategy.

As lovers of good design, and strong protesters of ugly emails, we're obsessed with Flodesk and have been using it since it was first released!

We also LOVE that it is really affordable for small businesses, and doesn't have a tiered pricing system meaning that you have a fixed price for your plan. Unlike other email marketing providers where you have to pay more when you get more subscribers (not a very good incentive to build your list!).

Flodesk does not integrate natively with Squarespace (most email providers don't) but luckily, we’ve got just the tutorial to help you out! Here’s how to add Flodesk to Squarespace.

PS - if you want to give Flodesk a go, make sure to sign up with our special link here and you'll get 50% off your first year!


How To Add A Flodesk Inline Form To Your Squarespace Website

  • Start by logging in to your Flodesk account and creating a custom inline form

  • At the end of the customization process, you will receive two code snippets: a header code and an inline code. We will need both codes to add a Flodesk inline form to your Squarespace website

 
 

How to add the header code:

  • After accessing your code snippets, COPY your header code

 
 
  • In a separate tab or browser, navigate to your Squarespace website

  • Go to SETTINGS > ADVANCED > CODE INJECTION

  • Paste your Flodesk header code in the HEADER section

 
 
  • Click SAVE in the upper right corner

How to add the inline form code:

  • Navigate back to the Flodesk page and COPY the inline code

 
 
  • Head to the Squarespace page and section where you want your Flodesk inline form to appear

  • Click EDIT on the page

  • Hover over the area you want to add your inline form and click the blue + icon to add a new block

  • Add a CODE block to the area you’d like your form to appear

 
 
  • Toggle back to your Squarespace website and PASTE the inline code in the CODE block

 
 
  • Click SAVE to apply your changes

  • Your inline Flodesk form will display where you injected the inline code! Note: You might not be able to see it in edit mode.


How To Add A Flodesk Popup Form To Your Squarespace Website

  • Start by logging in to your Flodesk account and creating a custom popup form to your liking

  • At the end of the customization process, you will receive one header code snippet to add to your Squarespace website

  • COPY this header code

 
 

Navigate to your Squarespace website and go to SETTINGS > ADVANCED > CODE INJECTION

  • Paste your Flodesk header code in the HEADER section

  • Click SAVE in the upper right corner to apply changes

  • Your Flodesk popup form has now been integrated with your Squarespace website!

How to add a Flodesk popup form only to specific Squarespace pages:

If you’d like your Flodesk popup form to only show up on specific pages and not on every page, follow the instructions below!

  • After creating the custom Flodesk popup form, you will receive a header code snippet

  • COPY this header code

  • Navigate to the specific Squarespace page that you’d like the popup form to appear

  • Click the GEAR icon to the right of the page name

 
 
  • Click ADVANCED and then paste the embed code in the PAGE HEADER CODE INJECTION section

 
 
  • Click SAVE in the upper right corner to apply changes

  • Your Flodesk popup form has now been applied to just that one Squarespace page!

  • Repeat the process with any pages that you’d like the Flodesk popup form to appear


How To Link Your Squarespace Website To Your Flodesk Full Page Form:

In case you prefer working without code, you can always link your Squarespace website to a separate Flodesk full-page form. To share the form, you would simply need to create it and then copy and paste the generated URL to wherever you choose to distribute it.

  • Start by logging in to your Flodesk account and creating a full-page form type

  • At the end of the customization process, you will receive a URL that leads directly to your form

  • COPY this URL link

 
 
  • Navigate to your Squarespace website and locate the page and segment that you would like to link to this form from

  • TEXT LINK: if you are sharing your form through text

    • Add a TEXT box to your page

    • TYPE out the phrase or word that you would like to attach the form URL to

    • HIGHLIGHT the word or phrase that you are linking through

    • CLICK the are link icon in the text toolbox

 
 
  • PASTE your form link into the space for the URL

 
 
  • Click APPLY to add the link

  • Hit SAVE in the upper left corner to lock in any changes

 
 
  • BUTTON LINK: if you are sharing your form through a button

    • Add a BUTTON box to your page

    • Click the pencil EDIT icon on your button block

 
 
  • Paste the link into the space for the URL under the CONTENT tab

 
 
  • Hit SAVE in the upper left corner to lock in any changes

  • You can feel free to play with the text or button link settings and set the link to open in a new window


There you have it: instructions on how to add Flodesk to your Squarespace website!

Want to give Flodesk a go? Make sure you sign up using this link to claim 50% off your first year!

 

If you liked this post, Pin it to Pinterest! πŸ‘‡πŸ»

 
 
 
Previous
Previous

Squarespace Template Customer Showcase: Photographer Kayla Simon

Next
Next

How to design kick-ass Pinterest graphics that are optimized to get clicks