How to Create a Subscribe Form Popup With Elementor 2021 (Step by Step)

If your email list is growing at a slower rate than expected, you need to learn how to create a subscription form popup. Most website owners forget that the presentation of the subscription form could be the reason behind poor signups.

Your visitors could easily fail to notice the form. But presenting it as a popup at the right time ensures that they never miss it.

Elementor is one of the most straightforward plugins you can use to build your subscribe form popup. It comes with generous design features.

It provides over 125 beautiful templates with animation capabilities, but there is also the option to build one from scratch.

In this case, we will show you how to redesign a template to meet your needs. We will also show you how to set the conditions that will activate the subscribe form popup.

And of course, we will guide you through integrating your subscribe form with MailChimp.

Here’s a quick index to help you navigate this article:

How to Create a Subscribe Form Popup With Elementor
Integrate the Subscribe Form Popup With MailChimp
Conclusion

So let’s dive in.

It is very easy and hassle-free to create a subscription form with Elementor. You can make one very quickly in just a few simple steps.

Let me walk you through each of these steps one by one.

We will start our journey from the WordPress dashboard. First login to your WordPress admin area.

To create a new popup go to Templates > Popups > Add New.

It will generate a new popup. We will determine some conditions here.

As you will be creating a popup form, select the type of template you want to work on as popup.

Choose a name for your template that you like. We choose “Subscribe Form”.

Now click the Create Template button.

After that, Elementor will show you its template library, where all kinds of templates are stored.

In the popup section you will find 125+ beautiful popup templates to choose from.

Using these pre-made templates will save you a lot of time; you can do your work faster and easier.

Choose a template for your popup. You can search by category from the search box in the right corner.

When you like a popup, preview the template to look at it properly. If it meets your requirements, simply click on the insert button.

After inserting, you can now edit the popup or redesign it.

If you don’t want to use these templates then you can design your own subscribe form popup from scratch.

For the sake of this tutorial, we will edit or redesign a template if needed.

Here is the popup that we have chosen for our tutorial.

Go to the popup settings by simply clicking on the settings icon.

We can see that when the popup opens it will be animated in “Fade In” mode, which will attract more users.

It will show the default animation at the time of closing and be animated for 1.2 seconds.

The main section contains an inner section that uses a beautiful image in the background. The inner section contains a heading widget, a text widget, and a form widget.

If you need to, you can change the background image, edit the heading, change the text, and redesign the form as well.

If everything is correct, hit the publish button.

A new popup will open, prompting you to set some conditions.

First, click the Add Condition button, as we want to show our popup to the whole site, and then select “Entire Site” from the middle bar.

After finishing, click on Next.

Now we have to set up the trigger settings. The trigger option allows users to take actions that prompt the popup to open.

We want to open the popup 3 seconds after loading a page. Head over to on page load and tap the yes button and set the time to 3 seconds.

Next, we will determine the advanced rules. Advanced rules are the requirements that have to be met for the popup to open.

We want to show the popup if a user visits a total of three pages. After three page views, the popup will automatically open when he or she loads the third page and passes the three seconds that we have set as the trigger.

We want to hide the popup for logged in users. You can set it to be hidden for all users or just specific users as well.

The popup you create will show on all devices, such as desktops, tablets, and mobiles as well.

When you complete these settings, click on the Save & Close button.

Congratulations! You have successfully created a subscription form popup. Now it’s time to integrate the popup with MailChimp.

Let’s dive right in.

In this section, we are going to show you how to easily integrate MailChimp with WordPress using the Elementor form. This way, your visitors that sign up will automatically be available to your MailChimp list.

First, you need to log in to your MailChimp account to collect an API key so that you can connect Elementor with MailChimp.

Go to Your MailChimp profile.

Next, go to Extras > API Keys > Create New API

When an API key is created, copy the API key. You have to paste the API inside Elementor.

Go back to Elementor and choose the form popup. Head over to the options panel to make some changes.

Under the “Action After Submit”, select MailChimp.

Now a tab for MailChimp will open up. Here, select custom under API key.

Paste the API key that we copied from MailChimp into the “Custom API Key” box.

Select your audience. You can also select the group.

Another option is to switch on “Double Opt-In”. This will make MailChimp send a confirmation email before subscribing new users.

Finally, choose the form field that will be inserted in the Mailchimp list.

Now if we submit this form, we will be able to see the submission inside our MailChimp list.

completed subscribe popup form in elementor

Conclusion: How to Create a Subscribe Form Popup With Elementor

You now know how to create an attention-grabbing subscribe form popup using Elementor.

And you can integrate the popup with MailChimp to ensure that all those who subscribe get to your mailing list. All this is possible without having any coding knowledge.

Be sure to choose the perfect time for the popup. The timing will determine if you increase the chances of getting a positive response, or annoy the visitor and make them leave.

Customize it to show professionalism and increase your conversion rates. Try to keep it simple and direct. Remember to hide it from those who have already subscribed.

In case you have any questions, feel free to reach out to us.

If WPCITY‘s this post helped you, kindly share it on Facebook, Twitter, and LinkedIn.

Others Elementor Tutorials:

How to Create a Subscribe Form Popup With Elementor 2021 (Step by Step)

Conclusion: How to Create a Subscribe Form Popup With Elementor

Browse Topics

Get to Know Us

Search