How to add a popup form to your WordPress website

A step-by-step guide to embedding a Flodesk popup form on your WordPress website.

Flodesk forms help you capture your visitors’ email addresses so you can grow your list and stay connected with your audience.

Popup forms are one of the most effective ways to turn website visitors into subscribers. They appear on top of your page and invite visitors to sign up for your newsletter, freebie, or updates.

In WordPress, you can display your Flodesk popup form by adding the form’s header code to your website. The easiest way to do this is with a plugin like Header Footer Code Manager, which works with any WordPress theme or page builder (including Elementor, WPBakery, and Gutenberg).

Make sure you have:

• A popup form created in Flodesk

• Access to your WordPress dashboard

• Permission to install plugins on your WordPress site

You will only need one piece of code from Flodesk: the popup header code.

1. Log in to your Flodesk account.

2. Go to Forms.

3. Create a Popup form or open an existing one.

4. Customize the design, text, and settings.

Once your popup looks the way you want, you're ready to grab the embed code.

1. In the form editor, click Embed.

2. A window will appear with your Header code.

3. Copy the header code — you’ll add this to your WordPress website in the next steps.

If you already use a plugin that allows you to add header scripts, you can skip ahead to Step 4.

Otherwise:

1. Log in to your WordPress Dashboard.

2. Go to Plugins → Add New.

3. In the search field, type Header Footer Code Manager.

4. Click Install Now.

5. Click Activate.

After activation, the plugin will appear in your WordPress dashboard menu.

Alternatively, if you’re an advanced WordPress user, you can download the plugin from here and install it directly by uploading header-footer-code-manager to the /wp-content/plugins/ directory.

1. In your WordPress dashboard, open Header Footer Code Manager.

2. Click Add New.

If you want the Flodesk popup form to appear on all pages of your website, fill in the details as follows:

• Snippet Name: Any name (for example: Flodesk Popup Form)

• Snippet type: HTML

• Site display: Site Wide

• Exclude Pages: if you don’t want the popup to appear on certain pages, like your Privacy Policy page or Terms and Conditions page, list them here. Otherwise, leave it empty.

• Exclude Posts: if you don’t want the popup to appear on certain posts, list them here. Otherwise, leave it empty.

• Location: Header

  • Important: it must be set to header as it’s a header code.

• Device Display: Show on All Devices.

  • Alternatively, pick your choice.

• Status: Active

Next:

3. Paste your Flodesk popup header code into the Snippet / Code box.

4. Scroll down and click Save.

Your popup form will now appear on your WordPress website.

The Header Footer Code Manager plugin also lets you control exactly where your popup appears.

Instead of selecting Site Wide in the Site Display setting, you can choose options such as:

• Specific pages

• Posts

• Categories

This is helpful if you want:

• One popup on your homepage

• A different popup on blog posts

• A popup only on a landing page

To add a Flodesk popup form to your WordPress website:

1. Create and customize your popup form in Flodesk.

2. Copy the header code from the Embed settings.

3. Install the Header Footer Code Manager plugin in WordPress.

4. Paste the header code into a new snippet and set the location to Header.

Once saved, your popup form will begin appearing on your website.

Check the following:

• The header code was pasted correctly in the plugin snippet

• The snippet status is set to Active

• The location is set to Header

• Your popup’s display settings in Flodesk allow it to appear on the page you're testing

Also try clearing your website or browser cache.

No. If you set Site Display to Site Wide, the popup will appear across your entire website automatically.

Yes. In the plugin settings, change Site Display from Site Wide to a more specific option such as selected pages or posts.

Yes. Any WordPress plugin that lets you add scripts to the header section of your website will work. Header Footer Code Manager is simply one of the easiest options.

Yes. Popup timing and behavior are controlled inside Flodesk.

You can choose triggers such as:

• Immediately

• Time delay

• Scroll percentage

These settings determine when visitors see your popup.

Yes. Because the popup loads through the website’s header code, it works with most WordPress themes and builders, including:

• Elementor

• Gutenberg

• WPBakery

• Divi

Yes. You can create multiple popup forms in Flodesk and control where each one appears by adjusting the display settings in the header snippet plugin.