Flodesk is probably one of the classiest email marketing tools out there. It’s easy-to-use templates are designed to be very on-trend and minimalistic, and the user interface is clean and straightforward. No wonder it’s gotten so popular recently!

Julia first told me about Flodesk when she was researching email providers for her blog, and I loved it so much I decided we were going to use it for Something Blue, too. Being a designer/developer who’s used to working with more complicated tools like Salesforce and Pardot, I was a little bit annoyed though that Flodesk on the surface didn’t have all the options that I was looking for to fully implement it into my site. The included options for copy-pasteable pop-ups, banners, and other forms are nice, but were lacking the full customizability I was used to and looking for. From my experience with other email providers, I knew there had to be a solution, and was on the verge of emailing Flodesk support to ask them when I finally figured it out. And since there’s currently no help article on the Flodesk website explaining how to do this, I thought I’d share the process with you in case you wanted to do something similar.

The benefits of using a form plugin over Flodesk’s templates

Before I get into the tutorial section, let’s go over some of the reasons why you’d want to use your own form plugin over one of Flodesk’s templates.

The first reason is branding. If you’re using a custom premium font, or are going for a very particular look, Flodesk’s font choices aren’t going to cut it. While you could technically just use some custom CSS on your site to make sure the form matches exactly, it’s an extra step that you don’t really want to have to replicate multiple times for every single form. Then you’re trying to override Flodesk’s styling AND your theme’s styling, and it just becomes a total pain.

The second reason is for integrated, multi-use forms. At the time of this article, Julia and I have just launched our Promise Ring Pilot Program. As part of the process, we wanted to ask people for their email address so that we could add them to our list, but we didn’t want this to have to be a manual process or extra step for people to complete. If you fill out the application yourself, you’ll notice that we’re asking for quite a bit of information, so to ask all that and then send people some place else to sign up for our emails isn’t a good user experience at all. Whereas, when integrating Flodesk fully into our form plugin, we’re able to do everything at once and have the information automatically sync to Flodesk.

Another use case of multi-use forms would be if you’re selling digital tickets or other products. Form plugins like the ones I’m talking about here have insane customizability features that let you calculate values, connect to Paypal or other online payment processing tools, and more. Can you imagine being able to do all that and make signing up for your email list as easy as clicking a checkbox during the checkout process?!

Honestly, the possibilities are endless. So let’s get to the tutorial!

Here’s what you’ll need:

• a Flodesk subscription (get 50% forever off by using code SOMETHINGBLUE!)
• a site built on WordPress using a child theme (so your customizations won’t get erased if you update the theme!)
• a form plugin that supports webhooks (we’re using Ninja Forms and Gravity Forms in this tutorial)
• basic CSS knowledge (but I’ll walk you through it if you’re unsure)

Step 1: Follow Flodesk’s installation instructions

This should technically be step 0, but if you haven’t already, follow Flodesk’s instructions for adding the code to the header of your website. The method I personally like best is by adding the code snippet to the header.php file in your child theme via the Theme Editor, however the theme you’re using might have a section where you can add code snippets to the header/footer, or there are plugins like this one that give you a place to do it.

Step 2: Create form in form plugin

Here’s where you’ll design your form and how it’ll be shown on your website. You’ll for sure want the fields First Name and Email, and depending on what information you ask you could also have Last Name. Include as well anything else you want to ask people who submit the form, but remember that the only fields Flodesk accepts are First Name, Last Name, and Email. You’ll also want to make sure that you name your fields something easy to remember. In Ninja Forms, this is under “Administration”; you don’t need to worry about this part in Gravity Forms, we do that later.

You’ll also want to include an opt-in checkbox that says something like “by checking this box, you agree to receive emails from Something Blue”, especially if this form is being used for more than one purpose. This is part of an opt-in process that’s required by Canadian law (and other national anti-spam legislations).

Step 3: Create form in Flodesk

The next step is to create the form in Flodesk. Now, you’ll see that there are multiple form options, but since we’re doing all of the website-facing design in WordPress, it honestly doesn’t matter which template you choose. I personally like the ribbon banner one the best because it gives the option for a last name field, but it’s up to you. I like to also use the text boxes in Flodesk to give a bit more information about the form (like what WordPress form it’s on and how I’m using it) so I can remember how I connected things later. In Flodesk, I usually say no to notifying me of a new subscriber because I like to have the notification from my site instead. Especially if you’re doing multi-purpose forms, you’ll get more information from the website form than from Flodesk.

Step 4: Create a hidden field

Keep going through all the Flodesk steps until you reach the copy/paste code section. Hit “Advanced Options”, then select “Get Genesis eNews Snippets”. This is where they hid all the extra options and fields!

In your form plugin, add a hidden field. I usually name it something that I’ll remember, like “Flodesk Submit Token – add to Course Email List”. Especially if you’re giving people the option of subscribing to multiple email lists in the same form (ooh getting fancy!), having the hidden fields named properly will help you update and delete them as necessary. In Ninja Forms, the “Default Value” box shows up automatically, but in Gravity Forms you’ll have to click “Advanced” to get to it.

See that bottom section in Flodesk that says “Hidden Fields”? You’ll want to copy/paste that whole thing into the Default Value box in your form builder. Technically we only need the value=”reallylongstringoflettersandnumbers” section, but it forces you to copy the whole thing. So delete everything else except for the string that’s attached to the value= part. You don’t want to keep the quotation marks or anything else.

Imagine that Flodesk has a massive filing cabinet full of file folders. This Submit Token is basically telling Flo, the imaginary secretary I just gave Flodesk, what file folder to put this newly filled out form into. Every form you have in Flodesk will have a different submit token, so you really only need one for each segment you have. You can add multiple webhooks submissions as completion actions for your forms (which I’ll explain later).

Before you forget, SAVE YOUR WORK!

Step 5: Create Webhook

First let me explain what a webhook is with an analogy. If a form was like a letter that you’d send in the mail, a webhook is the courier or mail delivery service. It’s a way to send and receive information from one service/website to another. A webhook is what we’ll use to send the information from the form that’s filled out on your website to Flodesk. (Zapier has a really good article if you want to learn more about webhooks.)

The process for Ninja Forms and Gravity Forms varies a little bit, so I’ll separate them here.

Ninja Forms

To access webhooks, you’ll need either a professional subscription ($199 per year), or to purchase the webhooks add-on for $39 for a single site. We personally went with the professional subscription because we wanted many of the other capabilities too, like multi-page forms, conditional forms, and layouts. It’s also good for up to 20 sites, so between Julia and I we have more than enough licenses. Once you purchase a license, you’ll need to upload the webhooks add-on to WordPress and activate it. Once you’ve activated it, refresh the page (which is why I told you to save your work earlier!) and it should be there as an option.

Click on “Emails & Actions”, then click on the plus sign to add a new action. Select the webhooks option, and copy/paste the information from the Flodesk page in like our example. The remote URL should be https://form.flodesk.com/submit, and the remote method should be post. On the “key” side, it’s very important to match the capitalization that Flodesk has. That means using camel case, which is no capital for the first word, then a capital for every word following. So not firstname, FirstName, or Firstname, it’s firstName. The “value” side is the field that each one corresponds to. so firstName goes with the “first name” field (whatever you named it), and so on. The only ones you need are firstName, lastName (if you’re using it), email, and submitToken. If your form has other fields, they won’t be on this list. Hit “Done”, and “Publish”.

Gravity Forms

To access webhooks, you’ll need an elite license ($259 per year), but I’m 99% sure you can do it with just the basic license, it’s just not called webhooks. Honestly, it’s been a while since I put Gravity Forms on a new site, so I can’t remember if it’s something I had paid for the upgraded license or not.

Edit April 2020 – you do, in fact, need an elite license in order to POST data to a URL rather than GET.

Click on Settings > Confirmations, then add a new Confirmation. Choose “Redirect” as the option, then select the box for “Pass Field Data Via Query String”. The redirect URL should be https://form.flodesk.com/submit. Here it’s very important that you follow the same case structure as Flodesk, including capitalization. So it’s not firstname, FirstName, or Firstname, it’s firstName.

Here’s where you’ll build out your argument. Ninja Forms does this part sort of automatically, whereas with Gravity Forms you have to build the URL yourself. Follow the example they give and add all your fields. It should look like our example. Make sure you don’t have any spaces in between anything, otherwise your data will not go through. The only fields you need are firstName, lastName (if you’re using it), email, and submitToken. If your form has other fields, they won’t be on this list. You can use the drop down on the side to add in your fields. Hit “Save Confirmation”.

Step 6: Test

Once you’ve saved everything, add your form to a page and test it with your information. If you’ve done everything correctly, you should see yourself as a new contact in Flodesk. If something doesn’t show up right, make sure you filled out the hidden field correctly and followed step 5 correctly. This is where most people go wrong, so there’s a really good chance your issue is one of these.

Step 7: Style your form

If this isn’t your first form rodeo, you can disregard this section. If this is the first form you’re building, however, you might notice if you add the form shortcode to the page that it shows up a little bit differently from the rest of your site. Or there might just be some things about the form that you want to change the way it looks.

This is where custom CSS will come into play. I was planning on adding a whole section on custom CSS to this post, but I’m already reaching over 2000 words. Ninja Forms has a really great post on styling forms with custom CSS. The only tips I’ll add in here is that if you use a child theme instead of the main theme you purchased, you’ll be able to make CSS changes in the Theme Editor (like you did when you added the Flodesk code to header.php, but you’ll be working in style.css instead) without risking everything getting deleted if your theme updates.

Wrapping Up

To sum everything up, Flodesk is a really awesome tool. The pre-built email designs are really on-trend right now, and the user interface is minimalistic and easy to understand. By following this method of integrating Flodesk with the form plugin you’re already using, you get the best of both worlds between the customizability and function of a form plugin, with easy to use email software. It’s perfect for instances where you want to get a lot of information from a prospective bride/groom to be (bringing this back to the wedding industry), and also give them the option of learning more about you. Email marketing is a great sales enablement tool, and making it easy and seamless to get people on your email list is part of the process. This method also allows you to better integrate Flodesk with your website’s design so it doesn’t look out of place, particularly if you’re using a unique font or pattern that Flodesk doesn’t have as an option.