If you use Flodesk for your email subscription platform, and also love using Elementor forms, you’re in luck. There’s a way to seamlessly integrate the two in under 5 minutes. Today you’re going to learn how to blend Flodesk and Elementor together!

Flodesk and Elementor

This is an in-depth instruction of how to integrate Flodesk and Elementor, in case you’re new or unfamiliar with one or both of these amazing systems. Both are instrumental in my day-to-day blogging and writing adventures. I highly recommend using both for a streamlined creator process!

What is Flodesk?

Flodesk came on the market full-throttle in 2019 (when I first saw it) as the most design-forward email subscription service available on the market. It dramatically simplifies email marketing with a visual-friendly interface. It’s becoming known for it’s fluid intuitiveness, and takes users only about 5 minutes to figure out how everything works.

A Flodesk subscription for those who were grandfathered in is $19/month, and covers unlimited subscribers and emails per month. This differs vastly from MailChimp, ConvertKit, and MailerLite, who use pricing models based on number of subscribers. This can get costly as you grow your business.

What is Elementor?

Elementor is a WordPress plugin site builder app that allows you to have full control over how your page layout looks. You no longer have to deal with Gutenberg! Elementor is the cure-all for a beautiful site without expensive monthly plans. It is a perfect Leadpages alternative and will save you a ton of money in the end… all for a $49 Pro upgrade price.

Elementor forms, an Elementor pro feature, allow you to collect email addresses and names, among other data fields, and integrate your favorite email subscription service. Elementor forms allow you to use your own fonts (as it uses Google font typesets). In addition, you can use other custom fonts you might use on your website, when you upload it to Elementor.

This allows you to stay on-brand, without having to worry about the limitations of fonts, colors, or layouts. Most email subscription services have several font and design limitations. We’ll talk about this more under ‘Flodesk forms‘.

Getting Started with Flodesk and Elementor

So forget about embeds, copying/pasting HTML code or modifying color schemes and backgrounds. Get your Flodesk account to accept new data from Elementor forms. This is the easiest, fastest, least time-consuming way to integrate Flodesk with Elementor.

• Sign up for a Flodesk account.
• Set up a Zapier account with a paid subscription: https://zapier.com
• Upgrade to Elementor Pro: https://elementor.com
• Get one of my templates that uses Flodesk forms and Elementor.

Flodesk Forms

The Flodesk forms you receive with your email subscription account are in fact, lovely. But, they are pretty limited in terms of layout and fonts available. The fonts that I would like to use on my own Flodesk forms are not available on Flodesk.

With anything that appears on your website, you want to make sure that it is on-brand. So when a font isn’t available in Flodesk forms, and you’re using Flodesks form on your website with an off-brand font, that can really make things look messy. Pretty to look at as an individual element, but from a page viewing experience, there’s a noticeable change in font and style. Hence, it will look inconsistent, and therefore, messy.

So that’s why I choose to use Elementor forms instead, so that I have more control over the way my form signup process flows through my website, along with how it looks.

Embedding Flodesk vs. Elementor Forms

Now, there are several videos out there showing you how to embed a Flodesk form into Elementor pages, or even how to modify a Flodesk signup form to match your website. Both of these methods require Flodesk forms to be set up with specific structure, colors, buttons, etc. That’s not a good use of your time or the best way to integrate the two. In addition, you may not get Flodesk to match your website, as wonderful as it is.

Many people love how Elementor’s forms operate, look and feel. With Flodesk, while cleverly designed, the look and feel of the signup form may not be as flexible as you need it to be when presented on your website.

Because you have full control over look, placement, tone, and feel with Elementor (and can even override your theme settings with it), you’ll have more power within Elementor to keep things consistent while saving loads of time on setup and configuration.

Elementor and Flodesk Integration Video

This video walks you through how to integrate the two (quite easily), so you can achieve any look and feel you desire with Elementor forms. This way, you don’t have to fuss with Flodesk forms, picking fonts and layouts that ‘kind of’ match but not exactly. Check it out!

Steps to Integrate Flodesk and Elementor

1. Make sure you have a paid subscription for Flodesk, Zapier, and Elementor. This will allow you to use the email subscription service of Flodesk, the webhook feature for Zapier, and the forms feature in Elementor.
2. Start with Flodesk. Create an audience, and label it. From there, you can create a workflow or an email series where that particular audience gets a series of emails from you. Note, you do not need to create a form in Flodesk for integrating Flodesk, Zapier, and Elementor together. Just the audience.
3. Next, go to Zapier, and create a new zap. For the trigger or starter function, choose ‘Webhooks‘. Choose the one that is not ‘raw’. Then, use Flodesk as your event function. Copy the webhook link Zapier gives you.
4. Create your form in Elementor. In the ‘Actions After Submit‘ area, select both ‘Redirect‘ and ‘Webhook‘. Paste the link Zapier gives you into the field for ‘Webhook‘, and then choose which page you want the reader to be redirected to after they signup (typically a thank you page) and copy/paste that URL into the ‘Redirect‘ field.
5. Save your page in Elementor. Now it’s time to test your webhook so that Zapier can pull data from it, and you can align the appropriate fields to both the Zapier webhook and Flodesk.
6. Pull up your page in your web browser, and enter in a test email address and name, or use your own. Submit your form.
7. Then, head back over to Zapier, and select ‘Test Connection‘. It will pull the data you just entered within the form and pull it into Zapier. Match the fields where you want your data, and then continue to your Flodesk information.
8. Still within Zapier, align your fields like name and email address into the event step of Flodesk. Once submitted, test the zap, and if everything is working, you should be able to get a positive confirmation, and see your email address that you used for testing within the audience segment of your Flodesk account.

Conclusion

Now that you know how to properly integrate both Flodesk and Elementor, I know you’re going to have such an easier time building your landing pages. And, doing it without the fuss of copying/pasting HTML code or modifying color/style blocks in Flodesk. I hope you found this helpful and valuable!

Be sure to sign up for my YouTube channel so you get alerts the moment I release a new tutorial. To read some other tutorials or get other kinds of help for your business, check out my blog.