HOW TO LINK FLODESK WITH SQUARESPACE

The BEST way by far to grow your business is through your email list. People sign up for your lead generator, then your CRM automatically kicks off a drip campaign where your emails end up in their inbox every few days. But HOW do you connect all of that? It’s not as complicated as it seems…

There are a TON of CRM's out there, but nothing beats the design of Flodesk's emails. They're absolutely stunning. Another thing that I LOVE about Flodesk is the ability to easily embed a newsletter sign up form in your Squarespace site.

Psst: Use this link to get 50% off your first year of Flodesk.

Squarespace has a Newsletter block and Form block, which could both be used for collecting a person's info... BUT, then you have to either connect it to Mailchimp (no thanks) or use Zapier to connect it to another CRM (still no thanks).

Today I'm going to show you how to create an inline form in Flodesk, embed it on your site on Squarespace, and kick off an automated workflow in Flodesk.

(It’s easy - I promise!)

The final product will look like this -

CREATE THE FORM IN FLODESK

Before we can start with the form, we need to create a segment. A segment is a population of people that you've segmented into a group. These will be the people who click on your lead generator.

Click Audience, then Segments, then New Segment.

I would name it the same thing as your lead generator. That way if you end up adding more lead generators, you can differentiate between them (instead of them all being called 'lead generator'). Pick a pretty color that you want, then click Save.

Now we'll get the form ready to add to your site. Go to Forms at the top, then click New Form.

From here you can choose a pop up form on your site (also a good thing to add), an inline form, or a full page form. Any of these will work for your lead generator. For this tutorial, we're going to install an inline form. I'll be using a ribbon banner, but choose whichever style you prefer.

Once you choose the banner, you will see a pop up to choose your segment. Choose the segment you just created, then hit Save.

Even though Flodesk has text above the form, I tend to delete it and use a text block in Squarespace for the text. So, you can go ahead and remove the text here so that all that's left is the form. To delete it, just highlight the text and hit Delete (there isn't a trash can icon). Now you're form should be looking something like this -

Click the First Name field, and you will see the Fields options pop up. From here you can rearrange the fields, make a field required, or add/remove a new field. You can also prefill the field with text.

PRO TIP: The more fields people are required to fill out, the less likely they are to opt in. I like to include the First Name field so that I can address them when I send an email. I leave off the Last Name field because most people are hesitant to give that out. Obviously the Email field is required.

If you want to delete the Last Name field, just click the 3 dots and click Delete.

Now click the Font tab to change the font so that it matches the font on your site. If your exact font isn't listed, then pick something similar. You can also adjust the size, color, alignment, caps, and spacing.

Now click Style to style your fields. This will only style the fields, not the button or the background (we will do that later). You can give your fields an outline, make them filled in with a color, adjust the thickness, and adjust the field sizing.

Now that your fields are set, click the button. This will pop up the Button settings on the right. You can adjust the shape of your button, the fill color, border color, border thickness, and the size. I want my button to be pink, so I will adjust the fill color and set the border to be empty.

Now click Font and make any adjustments you need. You can adjust the font, size, color, alignment, caps, and spacing.

If you want to change the text of the button to something else, double click on the word "Subscribe" and type what you want.

Now click the white background. From here you can change the canvas color and the background color. I suggest setting both of them to be the same color, and both should be the same color as the page that you are inserting it on on your site. Here is the difference in the canvas color and background color -

Adjust the width of the form if you need to. I left the Preferences toggle turned off.

Now click Message. You can either pick one of their messages that the user sees once they submit the form, or you can type a custom message. To type a custom message, click Custom, then highlight "Type your custom success message here" and type the message you want people to see.

Here's what my final form ended up looking like -

Everything should pretty much be set now, so click Next to continue. I leave the Double Opt-in set to No. If you choose Yes, then people will get a confirmation email asking them to validate their subscription. If they don't do this (or forget to), then none of your emails will be sent to them. So I like to just choose "no" and then hit Continue.

You can choose to be notified or not when someone opts in to your emails. I like to be notified so I selected the top one.

After the form is submitted, do you want them to get a confirmation message or redirect them to a URL? I have mine set to display a success message that says "You're all set! Check your inbox for your download 😊" (we set this message a few screens ago in the Custom message).

EMBED THE FORM ON YOUR SITE

It may look like it’s getting hairy just because we’re to the part with code, but it’s not - stick with me!

This first code (Header Code) only needs to be installed ONCE. Even if you end up creating multiple forms, you only have to install this first code one time. So - copy the code and then go into Squarespace.

Click Settings/Developer Tools/Code Injection. Paste the code you just copied in the first section that says 'HEADER'. Then click Save.

You're halfway there with the code! Now go back to Flodesk, and copy the Inline Code. This code is for your specific form that we just created.

So click Copy, then go into Squarespace to the exact page that you want this form to live on. Insert a Code Block where you want the form to go on the page.

Now, remove the default text (<p>Hello, World!</p>) and paste your code in this block.

It will look like this, but don't panic - this is how it's supposed to look on the back end of your site! The form will appear on the front end of your site (once you are out of Edit mode).

Now, go to the front end of your site (whatever the actual url is for that page) and check out your new form! Here's mine -

Ok, so recap... we've created the form and embedded it in our site. Now we need to tell Flodesk to send our new subscribers an email!

CREATE WORKFLOW IN FLODESK

So go back into Flodesk and click Workflows at the top and New Workflow.

Click Start From Scratch and give your new workflow a name. Now we're ready to create the workflow. First click Add Trigger, then A subscriber is Added, then choose your segment you created earlier.

Now click the plus sign so we can tell our workflow what to do. You will have to hover over the line in order for the plus sign to appear.

Choose Email.

If you already have an email created, then you can duplicate an existing email. Otherwise, click Create new email. There are a ton of beautiful email templates in here (which is why I like Flodesk!). So pick one you like, then click Customize to edit it.

Once you're finished editing, click Finish. This will insert the email into your workflow.

So now we have created a workflow that says, "When someone fills out my form and is added to the segment, send them this email."

To have a true drip campaign, you will want to set up more than one email to go out. To do this, just click the plus sign, add a time delay (a few days is good), then add another email to the workflow. You can do this as many times as you'd like!

For now, we're ready to publish this email we just added, so click Publish in the top right hand corner.

You'll get a message confirming that you're ready to publish. Hit Publish Now and you're all set!

I would STRONGLY recommend testing your form. Go to your live site, fill out the form, and see if you get the email that is supposed to go out.

OTHER IMPORTANT THINGS TO KNOW:

• If you go back into the workflow to edit it, it will pause the workflow. So be sure to hit Publish every time you finish making changes so that it will turn the workflow back on.

• If someone has already gone through the workflow once and they fill out the form again, they will not receive the email a 2nd time.

• If you add additional steps to your workflow, people who have already completed the workflow will not go through the additional steps.

• If someone fills out your form while your workflow is paused, they will go through the workflow once you publish it.

Congrats on making it this far! You've actually done a really big thing to start building your mailing list. Now that you've set everything up, consider adding other lead generators to your site and fully building out that drip campaign.

Aaand here’s that sign up link again to get 50% off your first year of Flodesk!

*This post may contain affiliate links, so I may earn a small commission when you make a purchase through links on this site at no additional cost to you.