How to add a Flodesk form to WordPress
We love the Flodesk email marketing platform! But what we don’t like is how complicated they make adding your form to your website for beginners.
The process is not user friendly and requires some basic website design understanding to do well. Lucky for you – this is what we do all the time! So today we are going to give you a tutorial on adding Flodesk to your WordPress website.
For this example we are going to show you how to embed an inline form from Flodesk into your WordPress website.
Step 1 – Create a Form in Flodesk
This is the easy part! To get started on a form in Flodesk you will go to your dashboard and from the top click on “FORMS”.
Easy enough right?
Step 2 – Choose Your Layout Style
Next you need to choose the style of form you want to create. We think adding the inline form is going to give you the most branded look, it is basic and simple but goes with everything!
Step 3 – Click Customize on the Form of Your Choice
Then click on customize over the inline form. You will be asked to enter a new segment before you can get started. Often this is new subscribers but you could also tag them with other things like “my awesome freebie subscribers”. This step helps you market to what they are most interested in. If they signed up because they were interested in your DIY course, they wouldn’t necessarily want you to be emailing them about your done for your services.
Step 4 – Design/Customize the Form
Customizing the Inline form is pretty simple, you can change the button color, style and wording simply by clicking on the words anywhere on this page and changing them out.
You can also customize which fonts are used and their size over on the right panel.
Step 5 – Choose Double Opt In or Not
Once your form is designed it is time to decide the final steps for sign up.
Do you want them to have to confirm their subscription before they sign up? This can help protect against spam bots signing up and wasting space on your email marketing list with junk emails.
It makes sure a real person signed up and that they really want your emails. If you choose double opt in, subscribers will be send a confirmation email that they have to click on before they are subscribed and sent their first welcome email (if you have setup a welcome email series).
If you don’t choose a double opt in, they are simply subscribed right away to your list.
Step 6 – Do You Want Notifications?
Decide if you want to be notified every time a new subscriber signs up. This can be super exciting at first when your business is small and every new subscriber makes you want to do a happy dance when they sign up!
But over time this can get overwhelming and unnecessary. I recommend turning it off from the start and just be sure you are using your email marketing software enough to know if you have new subscribers!
Step 7 – Choose What Happens Next
After they’ve subscribed what do you want to happen?
Give them a thank you type message?
Or send them to another URL/page?
Advantages of sending to another URL is offering them custom thank you pages with downloads or videos to watch. This is very helpful if you offered some type of freebie to get them to sign up and want to immediately reward them.
Step 8 – Get Your Embed Code
These next 3 steps are the most important but also the hardest and where we see people getting lost most often.
Once you get your embed code on Flodesk, you will want to leave this window open and then open up another browser window and sign in to your website.
Go to the page that you want to embed the form on and open it to edit.
Step 9 – Add Header Code to Your Website
Your form won’t show if you don’t complete this next step. And this step is the one that holds people back from getting their Flodesk forms added more than any other.
To make it super simple and not have to modify any major code on your template, which can be a scary thing for new website owners, you will want to use a plugin to add header content.
We recommend the plugin “Insert Headers and Footers” by WPBeginner. This is a company that isn’t going anywhere and should keep this plugin updated well.
Install and activate the plugin. Then from the Settings menu on your dashboard you will see a link to this plugin’s settings page.
Add in the header code to the top block/header area. Then hit save.
Step 10 – Embed the Inline Form on Your Page
Embedding anything on a website requires that you are in text or adding code if using Gutenberg, not the visual builder itself.
Using the classic editor is easiest to modify code but can be done in Gutenberg as well with a little know how.
For this example we are showing you what the classic editor or WPBakery text block editor will look like.
Copy the code for “Inline Code” from Flodesk. Enter here on your website where you want the form to go. Once you paste the embed code, save/publish/update your page and preview to make sure your form is showing properly on the front end of your website.
That is it you’re done!
