How to add Flodesk Form to WordPress (Gutenberg block method)

Having an attractive and easy-to-use sign-up form is essential when it comes to building your email list. Flodesk is an email marketing platform that allows you to create stunning and customizable forms, and embedding a Flodesk form into your website is a breeze! In this tutorial, I will walk you through the step-by-step process of embedding a Flodesk form into your WordPress website and particularly into your Kadence theme or any Gutenberg based WordPress themes, so you can start growing your email list effortlessly.

1. Create an inline form on Flodesk

On your Flodesk dashboard, click on “Forms” on the menu, and click the “+ New form” button in the top-right corner

2. Choose your form type / template

For now, we are going to create an inline style form. Under “Choose a form type”, click “Inline”.

Choose the template of your choice by clicking “Customize It” over the inline form. Here, I’m just choosing a simple ribbon banner style.

3. Choose a segment

Before customizing, you will be asked to choose a segment for this form. I’m going to name mine “Subscribers”, but you can name it specifically to categorize this segment based on what the subscribers are subscribing for. For example: blog subscribes, freebie subscribers, etc. Click Save.

4. Customize your form style

Click on each element to edit the wording and the style. You can customize font type, font color, size, button color, and more on the right panel. Once you’re happy with the look of your form, click the NEXT button on the top right side of your screen.

5. Choose double opt-in or single opt-in

Double opt-in is a two-step process that requires subscribers to confirm their email address before being added to your email list. While not double opt-in (also known as single opt-in), subscribers are added to your email list immediately after submitting the subscription form. There is no need for them to confirm their email address.

The choice between double opt-in and not double opt-in depends on your specific needs and preferences. Consider factors such as the quality of your email list, compliance requirements, and the user experience you want to provide.

6. Notifications

You can choose to be notified via email whenever there is a new subscriber. The drawback is, it can be overwhelming and flood your inbox especially when you have a large volume of subscribers. I personally would choose not to notify me.

7. What happens after the form is submitted

After the form is submitted, you can either have your new subscriber to either get a success message, or you can redirect them to another page using a custom link. If you choose the latter, you can create and customize a custom thank you page on your website where you can display freebies to download or a video to watch.

8. Grab your code

Choose Advanced Options
Since not every themes provide access to its Header area and you will have to install an extra third-party plugin if you prefer to go that route, so in this specific tutorial I’m going to show you how to embed your code using the Advanced options. Click the Advanced Options link as shown in picture.

Next: choose a code type
Choose get raw HTML code

Next: enhancements options
Leave them unchecked, and click Continue.

Next: copy the HTML code
Click the Copy link under the code box. You can click the Finish button.

9. Paste your Flodesk code into your page

In your page editor, add a block that is called “Custom HTML“. Paste your code into the box, and save the page.

That’s it and you’re all set!