Flodesk Tutorial: How To Add Opt-In Forms To A WordPress Site

Looking for a detailed guide on how to add Flodesk forms to your WordPress website? Then this tutorial is meant for you!
Share on facebook
Share on twitter
Share on linkedin
Share on email
laptop screen displaying a Flodesk inline form

So, you created your signup form in Flodesk. All that is left is to add it to your website. But you’re not techy—at all. And at the thought of meddling with HTML codes and scripts you get the jitters. 

I get it. It can feel intimidating—but it’s easier than you think even if Flodesk doesn’t have a native WordPress plugin to do the heavy lifting for you.

In this mini-tutorial, I show you step by step how I add my Flodesk opt-in forms to my website. For my core pages, I use the Elementor page builder and for my blog posts Gutenberg blocks. 

Let’s dive in!


To add a signup form to your WordPress website, you’ll need a form designed and customized according to your needs. If you haven’t created one yet, check this blog post first.

Which type of signup form can you embed into your website?

As a starter, you can embed the inline form because that’s what they are made for. They appear in the natural flow of the page as its integral part.

Also, you can add the popup form to your website. I wouldn’t call it embedding though because the popup form by nature pops up and won’t show all the time on your page—like an inline form.

And surprise: you can embed a full-page form to a web page too. It has some advantages and drawbacks that I will explain in another blog post.

Fair warning: you need to do some HTML coding with this one!

Where to find the embed codes in Flodesk?

If you create a brand new form, the first step is to choose a template. That is you decide whether you want to work with an inline form, a popup, or a full-page signup form.

The next step is the design phase. This is where you update the copy text, add your image to the form, and where you can play around with the font and colour settings. 

After you finished designing the form, you need to customize it. It’s just a few simple steps, where you can 

  • enable/disable the double opt-in for the form, 
  • turn on/off notifications when a new subscriber opts-in,
  • decide whether to show a success message or to redirect subscribers to a URL of your choice.
Form creation steps in Flodesk

And as the very last step, it will now give you the embed code(s) that you need to copy-paste to your website. For inline forms, there will be two code snippets. For popup forms only one!

If you created a full-page form, it wouldn’t give you any embed codes whatsoever. The full-page form comes with a shareable URL. 

What if you have already created a form? How can you find the code then?

For an existing form, go to your Forms dashboard. Hover over the form, and click on the three dots () that appear in the upper right corner. Then select ‘Embed’.

How to access the embed code for an existing Flodesk form

Header code vs inline code – do you need them both?

When you work with a ribbon-style form—also called an inline form—you get two code snippets. And yes, you need to add both codes to your website. Otherwise it won’t work, or it won’t even show on your page.

The header code is a Javascript snippet. It needs to be added once to your entire WordPress website. Even if you will be using several different inline codes throughout your web pages, this code is the same for all inline forms. Its purpose is to access your actual form data on Flodesk, and to pull it into your website.

The safest and easiest way is to install a plugin and to paste this code there. I show you the exact steps below! 

The inline code contains all the information of your signup form. The fonts and colours you selected, the image you uploaded, the copy text you used. All things that make that form unique are locked in those few lines.

So while the header code is not unique and needs to go to the whole website just once, the inline code goes to each page where you want the actual form show.

First, let’s add the header code!

Adding the header code to a WordPress website

To add the header code, I recommend using plugins. They’re easy to install and very user friendly. Plus, no HTML coding knowledge needed!

I installed the Insert Headers and Footers plugin on my website. This is very minimalistic, but does the job.

If you want more control over your forms—especially where to show and not show the popup forms—use this plugin called Header Footer Code Manager. The HFCM plugin has more display options, like:

  • Sitewide on every post / page
  • Specific post
  • Specific page
  • Specific category
  • Specific tag
  • Specific custom post type
  • Latest posts only (you choose how many)

Why do I prefer to use a plugin?

If you add the code to the theme’s .php file or the theme’s customizer settings—some themes have this option as well—then at the moment you change your theme to another one, you will lose the codes.

Whereas if you add the header code via the mentioned plugins, it remains intact. So you only need to add the inline code snippets again after you switched themes.

How to install the plugin and add the header code?

On your WordPress dashboard, go to Plugins, and use the Search plugins field to find the Insert Headers and Footers plugin.

Then click on Install Now and Activate.

You can access the plugin under the Settings menu.

Now that you installed the plugin, all is left to copy the header code from Flodesk and to paste it to the section in the plugin that hosts the Scripts in Header. 

Don’t forget to Save it. 

And that’s it. You successfully added the inline form’s header code to your entire WordPress website. Remember, you don’t need to add this code again.

Embedding the Flodesk inline code snippet with Elementor

Elementor, my favourite page builder, is easy to use and works with almost any WordPress themes out there. You can also use it to build themes and a website from scratch. But that’s a topic for another blog post.

If you have the Elementor page builder installed on your website, then you can use it to add the Flodesk inline form to any page that you built with Elementor.

Step 1. Open the web page to Edit with Elementor.

Step 2. Drag and drop an HTML block where you want the inline signup form to show on the page.

Step 3. Copy the inline code snippet from Flodesk and paste it to HTML code area.

adding html block and Flodesk form code with Elementor

Save and publish the changes to the page and your beautiful Flodesk signup form should appear on your website. Woohoo 🎉

How to add the inline code with Gutenberg?

Ok, I get it. Not everyone uses Elementor. I don’t use it all the time either. You see, while I created my single blog post page template in Elementor, I write my blog posts with Gutenberg blocks.

Gutenberg is a WordPress native feature, so no matter what theme you have, it should work.

Step 1. Add a custom HTML block to your blog post or the page. 

add-flodesk-form-with-gutenberg-editor

Step 2. Copy the inline code snippet from Flodesk and paste it to this block. 
The form won’t show in the editor. You need to save the page as a draft and then use the Preview button to see the live rendering.

add-flodesk-inline-code-to-gutenberg

Don’t forget to publish the page once you’re done with all your edits. And enjoy the sight of your stunning Flodesk inline form in your blog post!

How to add the same Flodesk signup form several times to the same web page?

Let’s say you have a long-form page where you want to add the same inline form several times: above the fold, towards the middle and to the bottom of the page.

If you’ve already tried it, you may have seen that the HTML code is somehow not working in WordPress. Side note: it’s not a WordPress thing. It won’t work on Showit or Squarespace either.

But that’s because you need to tweak the code a bit first!
This help center article from Flodesk shows you the steps. 

And remember: You only need to do this if you want to add the same inline form multiple times to the same page. 

If you add different inline forms to the same page proceed as you would generally add a form.

What is the raw HTML, and when should you use it?

Flodesk forms come with some pre-defined sets of CSS design styles. These control, among others the overall padding around the form, and that the form’s image doesn’t show on mobile screens or if you embed the inline form to your website’s sidebar. 

Personally, I had no issues with collecting signups on mobile even though the form didn’t show the image. But you can work around all this if you know some HTML coding and you’re familiar with CSS, because Flodesk gives you access to Advanced code options

You find them at the bottom right corner of the embed code page.

You can select the Get raw HTML code. It will either disable the Javascript or the default CSS styles of the form. This also means you need to write your form validation code or apply your CSS style to the form. 

This way, you can tweak the form design with your CSS, changing the mobile breakpoint (@media) so that the image would show on smaller screens.

The other option is to Get the Genesis eNews snippets. But you only need this if you use the Genesis eNews widget on your website.

Recap

Adding Flodesk inline forms to your website isn’t complicated even if there’s no native WordPress plugin available yet to connect forms directly to Flodesk.

All you need is a plugin that lets you add code to your website’s header, like the above referenced Insert Headers and Footers plugin or similar. You need to copy the Flodesk header code to the relevant section of the plugin.

To add the inline form code snippet, use an HTML block or widget.


If you want to learn about even more tricks and tips in Flodesk, then check out my earlier post addressing frequently asked questions.

If you love what you’ve seen in this post, and want to check out Flodesk, just click on my referral link.

Or if you’ve already signed up for a free trial in Flodesk but want to get the discounted offer, use the code ARRADESIGNSTUDIO to get 50% off your subscription! Just add this code before you’d complete your membership purchase.

Should you have any questions about Flodesk, leave me a comment here under this blog post, and I’ll get back to you.


Don’t be shy; share this post with your friends and on social media.

Share on facebook
Share on twitter
Share on linkedin
Share on email

2 Responses

  1. Hello, thanks for the helpful tutorial! I have a question, I embedded the header code into my site, then realized that I needed to change something on my form, do I need to re-embed the header code again since I made a change to my form? Thanks!

    1. Hi Maggie,

      The header code of the inline form is a general code, and is the same for all inline codes. The second code snippet, the inline code is what makes your actual form unique. But if you used the default embed codes it’s enough to make the updates/changes in your Flodesk account, and it will synch automatically to your form on your website.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may also enjoy these articles:

How to carry out a quick social media audit

Social media is an important part of your digital marketing strategy. Being active on the right social media channels can help attract the right fans for your business, who then will be eager to sign up to your email list and learn more about you, your products and services.