Did you know that you don’t have to be a designer to create beautiful emails and forms for your marketing? Flodesk can actually do all of that for you, and that’s why we love it! One of the best things about Flodesk is how simple it makes the whole email marketing process. And with a Flodesk form, you can learn how to integrate Flodesk into WordPress to collect emails for newsletter signups and lead magnet downloads.
However…when it comes time to embed a Flodesk form into WordPress, things can feel not-so-simple. We do this for our clients all the time–and we’ve got you!
The good news is that it’s actually pretty straightforward to integrate Flodesk into WordPress. So, if you’re wondering how to embed Flodesk into WordPress, you’re in the right place. We’ll walk you through the basics of building a Flodesk form and how to add a Flodesk form to WordPress.
Why you should use Flodesk forms
Just to be clear, we’re talking about building and embedding inline forms from Flodesk into WordPress. Inline forms are forms that look like they’re a part of your website (rather than a popup or dedicated landing page.) They’re added right into your web page, blog post, sidebar, or where you want them to appear on your website. Instead of looking like a separate element, they blend in with everything on the page to become a part of the design.
Inline forms are fabulous for conversion because you can give people a chance to sign up for your email list right in the moment they’re thinking about it.
For example, let’s say you have a downloadable resource that fits in with a blog post you’re writing. Instead of linking people to your resource page, you can make a Flodesk form and embed it into your blog, so people can download the resource as they’re reading. They won’t have to click over to another page, scroll to the bottom, or take any extra steps.
Create a form in Flodesk
Before you can embed a form, you’ll need to make a form! Here’s how to do it:
- Log into your Flodesk account.
- Go to the Forms tab and select New Form. You can also select an existing one if you’ve already made one you’d like to use.
- Select Inline Form. This is important, because it’s the type of form that you can add to your WordPress website for a seamless, branded look.
- Choose the form template you want to start working with. Do this by hovering over the template you like then click Customize It.
- Choose “existing segment(s)” or create new segments for people who sign up for this form. Whenever people fill out this form, this is the segment they’ll be added to. You don’t have to use segments (especially if you’re just getting started with your email list or only have one main offer.) However, segments are useful because you can group potential clients according to their interests based on what they download from you. For example, if they signed up for a DIY interior design checklist, they might be more interested in an online design course or ebook than done-for-you design services.
- Make it your own. Click anywhere on the form to edit it. Change the colors and fonts to match your brand, swap images for brand-aligned photos, and add/delete fields according to your liking.
- Choose between having subscribers double opt-in or not. Double opt-in means that subscribers will need to click through a subscription confirmation email before they receive any other emails from you. (Some people find this an annoying extra step, but it can increase your email deliverability and protect you from spam bots.)
- Choose whether you want to be notified when new subscribers sign up, and which URL or message you want them to see after they’ve signed up.
- Once you’re satisfied with the form, click the Embed button up at the top right. This is where you can get the HTML code to embed the form on your website. You will see two embed codes here. One is the header code that you will need to put on every page of your website where you want the form to appear. The other one is the inline code that you need to post on the page, wherever you want the form to appear on your website.
Important note! You will need to add both the header code and the inline code to your website to get the form to work. It’s not enough to add only one of them. If you don’t, the form won’t show up. This is very important and a lot of people miss it!
How to add a Flodesk form to WordPress
In order to embed a form into WordPress, you’ll need to add the header code to your WordPress site. You can do it with a plugin (the easy way) or in the header.php files of your website (the less easy way). Either way, be sure to back up your website before doing this step!
As for embedding Flodesk forms into WordPress website pages, we like to do that using the same block editor we use for building websites: Beaver Builder. With a block editor, you can just drop a new HTML block onto the page and paste the inline code.
So, we’ll show you how to add a Flodesk form to your website using a plugin and block editor, since that’s easiest for most beginners and DIY-ers (and it’s what we do, too!)
How to embed Flodesk into WordPress using a plugin
First, you’ll need to find and install a plugin from the WordPress plugin library that will help you add code snippets to the header section of your website. We like the Insert Headers and Footers Plugin for this—you can easily find it in the WordPress plugin library with a quick search (or right here!) Once you’ve installed and activated the plugin, it’s time to add some HTML.
Click on Settings in your WordPress sidebar, then click on Insert Headers and Footers in the left side panel.
Paste the Flodesk header code into the “scripts in header” box and save the changes.
Now you’re ready to add inline code to any page where you want the form to appear. Just drag and drop an HTML block onto your webpage wherever you want the form to go. Copy the inline code from Flodesk and paste it into the HTML block. Click Update to save your changes and see the live form. Voila! You’ve just added a Flodesk form to WordPress!
How to embed Flodesk into WordPress without a plugin
If you’re not familiar with some basics of PHP, then I would definitely recommend using a plugin to embed Flodesk. But if you’re comfortable with doing a little coding, then you can embed Flodesk forms into WordPress without a plugin.
Pro Tip! You’re going to be editing your website theme’s header and footer by adding code, which means you should be using a WordPress child theme (so you don’t lose your edits when your WordPress theme gets updated.) Also, you should backup your website first (so you don’t make a mistake that takes HOURS to fix!)
Write a code snippet to add to your header files
The easiest way to add header and footer code is by using the functions.php file with an appropriate WordPress hook, so you can keep all of your snippets in one place.
To add code to your header, use this code snippet:
/* Describe what the code snippet does so you can remember later on */
add_action('wp_head', 'your_function_name');
function your_function_name(){
?>
PASTE HEADER CODE HERE
<?php
};
Note: you will need to change a few things:
- In the description section, add something that helps you remember what this code snippet does, like “embeds Flodesk form in header”
- Replace both “your_function_name” placeholders
- Paste the header code from Flodesk where it says “PASTE HEADER CODE HERE”
Add the code snippet to functions.php file
Remember, you want to edit the functions.php file in the child theme.
In your WordPress account, go to Appearance → Theme File Editor.
Select the functions.php file and paste the code snippet you created at the end of the file.
Save changes.
Now you’re ready to drag and drop an HTML block onto your webpage wherever you want the form to go. Copy the inline code from Flodesk and paste it into the HTML block. Click Update to save your changes and see the live form.
Always test your forms
It’s important to test out your forms—after all, who wants to do all the work of setting up a form and/or lead magnet only to find out your form isn’t working and you’ve missed out on getting email leads!? It only takes a few minutes to double check your work!
Just visit your WordPress site and fill out the form as if you were a visitor to verify everything is working the way you’ve set it up. (I like to use my personal email address or a test email account for this!)
That’s it! Flodesk WordPress integration made easy
Now you don’t have to ask yourself, “How do I add a Flodesk form in WordPress?” Even though it might seem techy and intimidating at first, when you know how to add a Flodesk form to WordPress it’s actually pretty easy and only takes a few minutes of your time. Now, you can add forms wherever you want on your WordPress site and start collecting those email leads!
Have you tried Flodesk yet and started adding Flodesk forms to your WordPress site?
If you haven’t tried Flodesk yet, we have a special promo link where you can try it for free!
