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 Elementor


Step 1. Drag and drop an HTML block to your page where you want to embed your Flodesk inline form.

Step 2. Copy the inline code snippet from Flodesk and paste it exactly as it is to the HTML block. It will look something like this:

Note: the inline form may not be visible in Elementor in edit mode. 

Step 3. Click Update to save your changes and check the live rendering. The form should appear normally on your web page.

Let's sum it up

How to add an inline form to your WordPress website with Elementor:
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 an HTML block in Elementor where you want the form to show on the page.

More to learn:

Did this answer your question?