The most common signup forms you find on websites are inline forms. Those are the ones that are embedded to website pages, blog posts, sidebars, or footers. Unlike popup forms, they appear as a natural part of the web page and are displayed at all times.
How can you embed such an inline form to your website?
By adding two code snippets.
It's easier than you think. Let me prove it to you!
Start with creating an inline form. This help center article walks you through the steps of how to create and customize your form.
At the end of the form customization steps, you will get two code snippets. It will look something like the below image. You need to add these codes to your WordPress website so that the form gets displayed and your subscribers can sign up.
Note: both the so-called header code and the inline code has to be added to your website. It is not enough to add only one of them.
How to add the Header code to your WordPress website with Divi
Step 1. Go to Divi > Theme options > Integration.
Step 2. Make sure to Enable header code. (See below screenshot as a reference.)
Step 3. Paste the header code snippet from Flodesk to the Add code to the < head > of your blog section.
For additional details visit the official Divi documentation at:
https://www.elegantthemes.com/documentation/divi/theme-options/
How to add the Inline code snippet to your WordPress website using Divi Builder
Follow the instructions from Elegant Themes on how to add the second part of the Flodesk inline form code via the Divi Code module. Read about it in detail here:
https://www.elegantthemes.com/documentation/divi/code/
Note: the Code blocks are invisible in the visual builder. You have to exit the visual builder to see them.
Troubleshooting
If the inline form doesn't appear or work after adding the header code directly in Divi, install a headers/footers plugin (like this one) and add the header code via the plugin instead.
Let's sum it up
How to add an inline form to your WordPress website with Divi Builder:
To embed an inline form to your WordPress website you have to add both the header code and the inline code to your website.
To add the header code go to Divi > Theme options > Integration, and paste the header code to the Add code to the < head > of your blog section.
The inline code goes to a Divi Code module where you want the form to show on the page.
More to learn:
We'd love to hear about your recent experience when searching for solutions to issues in the Flodesk Help Center (Knowledge Base). With your feedback, we can improve our knowledge base with new and better ways to help you succeed!
Please do not submit support tickets and feature requests via this feedback form.
If you need technical assistance, please submit a support ticket via email at support[at]flodesk.com mentioning your Flodesk account login email with a detailed description of your problem.
Do you have an idea for a feature that will help improve Flodesk for you and other members? Our Product team would love to hear from you.