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.
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’.
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 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.
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.
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.
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.
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.
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.