Creating forms that pop up on a click of a button can be a great strategy to grow your list.

Website visitors are more likely to complete an action they initiated, meaning if you have a button to click which pops up an opt-in form compared with an embedded inline form, you may see higher conversions.

To create your on-click popup form, you will need:

Creating a Popup Template with Elementor Pro

Step 1. Open a new browser window and log into your WordPress website.

You should be taken straight to your WordPress Dashboard, but if that’s not the case hover over your site name in the top left corner and click ‘Dashboard'.

Step 2. Locate your Elementor Plugin in the options on the left-hand side.

You should see ‘Templates’ underneath ‘Elementor'.

Hover over Templates, click ‘Popups’ and then ‘Add New’ at the top of the page.

Step 3. Name your new popup and click 'Create Template'.

Step 4. Select your popup form design from the pre-designed options, or close the window if you’d like to design your popup from scratch.

You can design and customize your popup form to match your website design and branding. If you simply want to embed your Flodesk form without adding additional styling to the popup, you can leave it blank.

Step 5. Add a HTML or a Custom HTML block to the popup Template, where you’d like your Flodesk Form to appear.

Adding your Flodesk Form to your popup Template

Step 6. Go back to the browser window with your Flodesk form code and copy the Inline Code.

Step 7. Click back to the browser window with your form and click the HTML block you added. Paste your Flodesk form Inline code into the HTML box.

In some cases, you may also need to paste the Header code to get your form to display. In this case, first paste the Header code followed by the Inline code snippet.

You will see your Flodesk form appear.

Step 8. Once you’re happy with your design, click ‘Publish’.

Step 9. Add the condition to include the ‘Entire Site’. This will ensure your popup can display wherever you set it to on your website. Finally, click Save & close.

After saving your popup template, click the 3 lines in the top left corner and then Exit to Dashboard.

Linking your popup form to a button

Elementor Pages:

Step 1. Go to Pages and select a page you’ve created with the button you want your form to popup from. Click to edit it with Elementor.

Step 2. Find the button you want to add your popup to and select it.

As before, you’ll see a selection of options on the left-hand side of the Elementor page builder.

Step 3. Select the Content settings.

Step 4. To the side of the ‘Link Box’ click on Dynamic stages and scroll down to select ‘popup’.

Step 5. Click the spanner icon next to ‘popup’ and select the popup template you created earlier by typing the popup template’s name.

Step 6. Save your changes and you’re done!

When you view your page and click the button, your Flodesk form will pop up now!

If you’ve set your Flodesk form to Redirect after submission, you’ll be taken to that page after completing the form.

Let’s sum it up!

Creating a form that pops up on the click of a button can be a useful strategy for increasing subscribers and growing your list.
To do this, we recommend using an Inline Ribbon Banner Form.

In Elementor Pro, create a popup template. Then embed your Flodesk Inline form to this template. Lastly, link the completed template to a button on an Elementor Page.

More to learn:

We'd love to hear about your recent experience when searching for solutions to issues in the Flodesk Help Center. With your feedback, we can improve our knowledge base with new and better ways to help you succeed!

If you couldn't find a solution for your issue in the Help center, please send us a note to 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.

Submit a feature request here.

Did this answer your question?