How To Add Flodesk to a Kadence Theme on WordPress
Hey y’all! Flodesk is an email marketing tool that bloggers love to use. I was recently asked, “How do I add Flodesk to a Kadence theme?” If you have a WordPress site with one of my themes then here is a quick tutorial to help you get started.
Step 1. Create Form
First step is to login to your Flodesk account then click on Forms at the top of site. Next click on the button that says “New Form”.
Step 2. Choose Inline Form
Under “Choose A Form Type”, click on “Inline” as shown in the image below. Then you can pick the form you like.
Step 3. Design Your Form
From here you can click anywhere on the form to change the text, fonts, colors, and photos. You will find your options to change on the right side of your screen. For a further explanation on how to design your form please click on Flodesk’s tutorial here but come back to find out how to add it to Kadence.
Step 4. Customize and Embedded Code
Once your form design is complete, click “Next” at the top of your screen. You should now be under the form customization options. Here you’ll be able to choose when this form is displayed, who gets it, and whether you get notified every time a subscriber opts in. you will want to click on “Embed” at the top of your screen.
Click “Next” again and you have reached the “Embedded Code”. You should see something like the image below.
Step 5. Code Snippets Plugin
1. Open a second browser window (don’t close the Embedded code browser, we will need it in a minute) then login to your WordPress dashboard.
2. Next click on “Plugins”.
3. Click on “Add New Plugin”.
4. Where it says “Search Plugins”, type in Code Snippets. Then click on “Install Now” then “Activate”.
5. You should now see “Code Snippets” on the left side of your dashboard. Please click on it.
6. Next, click on “Add New”.
7. Give it a title then click on the tab that says “Content” (shown in the image below).
8. Go back to your Flodesk account and copy the “Header Code” from Step 4 above. Paste it as shown in the image below.
9. Check the circle for “<head> section”.
5. Click “Save Changes and Activate”.
Step 6. Inline Code
Now you can copy the “Inline Code” from your Flodesk embedded form and paste it anywhere on your site that allows you to use HTML.
Helpful?
I hope you found this tutorial to be helpful. If there are any other tutorials you would like me to create please let me know in the comments below. Also don’t forget to subscribe to my newsletter so you can receive more awesome tutorials like this one!
You are amazing. Thank you so much for creating this!!
You’re welcome.