• Skip to main content
  • Skip to primary sidebar
  • Skip to footer
WPCity.com

WPCity.com

WordPress Themes & Plugin Reviews, How To Guide & Tips

Menu
  • Blogging
    • Blogging Reviews

      You’re looking for one of the best blogging courses right now. You simply want your business to grow without making critical errors. This is a great time to start or grow a blog.

    • How To

      • Start A WordPress Blog
      • Monetize a WordPress Blog
      • Best Blogging Courses
      • Blog Setup Services
      • Blogging Tools
      • Best WordPress Blogs
  • Web Hosting
    • Web Hosting Review

      Which is the best host for small business owners, and which should you avoid? Read our reviews to find out and see what customers have to say.

       

      Host vs Host

      • SiteGround vs Bluehost
      • SiteGround vs A2Hosting
      • SiteGround vs WP Engine
      • SiteGround vs DreamHost
      • Bluehost vs HostGator
      • DreamHost vs Bluehost
      • HostGator vs GoDaddy
    • Best Hosting

      • Best Web Hosting Providers
      • Best WordPress Hosting
      • Best Web Hosting for Beginners
      • Best Web Hosting for Blogs
      • Best Hosting for Small Business
      • Best Hosting for Food Blogs
      • Best Hosting for Photographers
      • Best Hosting for Travel Blogs
      • Best Hosting for WooCommerce
      • Best Cheap Hosting for Bloggers
      • Best PHP Hosting Providers
      • Best Magento Hosting Providers
    • Others

      • Hostwinds
      • InMotion

       

      WordPress Hosting

      • WPX Hosting
      • SiteGround
      • Bluehost
  • Themes
    • WordPress Themes Review

      Discover the best WordPress themes to choose from for your business and how to pick them wisely. Making your website look the way you want is a robust process. Choose a suitable theme, and the process becomes far easier.

    • Best Themes

      • Best WordPress LMS Themes
      • Best LearnDash Themes
      • Best Multipurpose WooCommerce Themes
      • Best WooCommerce Fashion Themes
      • WordPress Small Business Themes
      • Education WordPress Themes
      • eCommerce WordPress Themes
      • Genesis Child Themes
      • Free Genesis Child Themes
    • VS

      • Genesis Theme vs Astra
      • Genesis Theme vs GeneratePress
  • Plugins
    • Top Plugins

      • Best WordPress Page Builder
      • Best WooCommerce Plugins
    • WooCommerce Plugins

      • Best WooCommerce Plugins
      • Best WooCommerce Coupon Plugin
      • Best WooCommerce Subscription Plugin
      • Best WooCommerce Review Plugin
      • Best WooCommerce Multi Vendor Plugin
    • Others

      • WooCommerce
      • Elementor
      • Genesis Plugins
      • LMS
      • Membership
      • Page Builder
      • WordPress CRM
  • Deals
    • Deals and Coupon

      WPCity recommended and tested best deals and coupons.

      • View All
    • Hosting

      • SiteGround Discount
      • WP Engine Discount
      • Bluehost Discount
      • A2 Hosting Discount
      • GreenGeeks Discount
      • iPage Discount
      • Flywheel Discount
      • WPX Hosting Discount
      • DreamHost Discount
      • Kinsta Discount
    • Plugins

      • Elementor Pro Discount
  • More
    • Reviews

      • HappyForms Review
      • Paid Memberships Pro Review
      • Paid Member Subscriptions Review
      • S2Member Pro Review
      • Wishlist Member Review
      • MemberMouse Review
    • CRM Software

      • Zero BS CRM Review
      • Hubspot CRM Review
      • Agile CRM Review
      • Maximizer CRM Review
      • Zoho CRM Review
      • Capsule CRM Review
    • Guides

      • WordPress Statistics
      • Speed Up WordPress Site
      • Secure A WordPress Website
      • Recover Hacked WordPress Website
      • Install WordPress on Windows
      • Add Custom CSS to WordPress
      • Add Custom Fonts to WordPress
      • Install a WordPress Theme
  • Shop
  • SiteGround Discount
Home » How to Create a Subscribe Form Popup With Elementor 2022 (Step by Step)

May 17, 2020 by Editor Team Leave a Comment

How to Create a Subscribe Form Popup With Elementor 2022 (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.


How to Create a Subscribe Form Popup With Elementor

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.

elementor add new popup

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.

choose a template from elementor

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.

elementor popup template library

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.

customize popup settings

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.

elementor conditions settings

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.

elementor triggers settings

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.

elementor advanced rules settings

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

Let’s dive right in.


Integrate the Subscribe Form Popup With MailChimp

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.

connect elementor with mailchimp

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

mailchimp profile

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

create and cop api key

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

edit form elementor

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 Get Started With Elementor
  • Elementor vs Elementor Pro
  • Elementor Pro Discount
  • Elementor vs Gutenberg
  • How to Use the Elementor Free Page Builder
  • How to Use the Elementor Theme Builder
  • How to Add a Popup With Elementor
  • How to Create a Login Form Popup With Elementor
  • How to Create a Related Popup Using Elementor
  • How to Create a 404 Web Page With Elementor
  • How to Create a Mega Menu WIth Elementor
  • What Happens if I Deactivate Elementor Pro?
  • Is the Plugin Elementor an Easy Way to Build Websites?
  • How to Set Up Important WooCommerce Pages With Elementor

Filed Under: Elementor, Tutorials

Reader Interactions

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Primary Sidebar

elementor

wpengine

top wordpress blogs

  • Facebook
  • GitHub
  • Instagram
  • Pinterest
  • Twitter
  • YouTube

Recommended Articles

  • WordPress Statistics
  • Best WordPress Page Builder Plugins
  • Best WordPress Themes for Small Business
  • Best LearnDash Themes
  • Best Education WordPress Themes
  • Best WordPress LMS Themes: Excellent Ways to Manage Learning Content
  • Best WordPress Website Examples for Design Inspiration
  • Essential Addons for Elementor : Is It The Best Elementor Addons Plugin?
  • Genesis Framework Review: Is It Still Worth the Hype?
  • Best Genesis Child Themes
  • Best Genesis Framework Plugins
  • Best Blogging Courses That Will Help You Succeed
  • Best Blog Setup Services
  • Best Multipurpose WooCommerce Themes
  • Best WooCommerce Fashion Themes
  • Best eCommerce WordPress Themes for WooCommerce

Recommended Hosting

  • WP Engine – Managed WordPress Hosting
  • SiteGround – Powerful WordPress Hosting
  • WPX Hosting – Fastest WordPress Hosting

E-mail Newsletter

Footer

Browse Topics

  • Blogging
  • Coupons
  • Elementor
  • Genesis Framework
  • Guide
  • Gutenberg Blocks
  • Hosting
  • Interviews
  • Membership
  • News
  • Plugins
  • Reviews
  • Resources
  • Security
  • Software
  • Themes
  • Tutorials
  • Tips
  • Tech
  • WordPress LMS
  • WP Page Builder
  • WooCommerce

Get to Know Us

  • About
  • Contact
  • Privacy

Search

Copyright © 2022 · WPCity.com