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 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
You can add the header code either with the help of a plugin or manually.
Adding the header code with a plugin
The easiest way is to install a plugin from the Wordpress plugin library that helps you add code snippets to your website’s header and footer section. If you already have such a plugin jump to Step 5—otherwise follow these steps first.
Step 1. Login to your Wordpress Dashboard
Step 2. Go to Plugins > Add new. It will look similar to the below image.
Step 3. Run a search for the ‘Insert Headers and Footers’ plugin in the Search plugins... field on the top right.
Step 4. Click on Install now next to the ‘Insert Headers and Footers’ plugin then Activate the plugin.
Once you’ve installed and activated the plugin it will appear under Settings.
Step 5. Click on the Insert Headers and Footers plugin on the left side panel—see example screenshot below—and paste the Flodesk header code to the plugin section that hosts the Scripts in Header.
Step 6. Save your changes.
Adding the header code manually
This is an advanced method and would require you writing code directly into your theme’s functions.php file.
Learn how to add code to your theme's functions.php file here.
Once the header code is added to your WordPress website—either via a plugin or manually—the next step is to add the inline code where you want the form to show on the page.
How to add the Inline code snippet to your WordPress website using Gutenberg editor
The second code snippet is the inline code. You have to copy and paste this code where you want your form to appear on your webpage.
If you use the Gutenberg editor, then add a custom HTML block to your blog post or page where you want to embed your Flodesk inline form.
Copy the inline code snippet from Flodesk and paste it exactly as it is to the Gutenberg editor’s HTML block.
Note: the inline form may not be visible in Gutenberg in edit mode. Save your page as draft or publish it right away, and check the live rendering via the Preview and it should appear normally.
Let's sum it up
How to add an inline form to your WordPress website with Gutenberg editor:
To embed an inline form to your WordPress website you have to add both the header code and the inline code to your website.
You can add the header code with the help of a plugin in WordPress or by adding the code directly into your theme’s functions.php file.
The inline code goes to a custom HTML block in Gutenberg editor where you want the form to show on the page.