Banner Style Popup for Google's New Popup Policy

Are You Ready For Google’s New Policy On Popups?

As business owners and operators, it’s a fact of life that we must adapt – or suffer the consequences. Google’s latest policy concerning popups is just the latest example of this.

To help you adapt, we’re going to show you how to import an awesome pre-made popup into your site in just minutes!

Google’s New Policy

The new policy that’s declared to help users “easily access content on mobile” basically says: change how we use popups on mobile devices, or we’re going to penalize your site’s rankings. At this point, it’s conjecture as to how hefty these penalties will be, but honestly, in this era of hyper competition, is any penalty something we can afford?

And just for that very reason, we shouldn’t jump the gun and ask: how can we just remove the popup on mobile devices? It’s important to understand Google’s is not banishing popups for mobile users, just how they’re displayed, shaped and sized.

By creating a banner style popup, we can still reach our mobile audience without having to sacrifice our rankings on Google.

Importing the Pre-Made Popup

You can have this mobile adapted popup on your site simply by importing the files as explained below. It comes fully equipped with Cookies appropriately installed, it’s own theme, a complete form, and a no-hassle setup process. Plus, it’s fully responsive and has been tested to work across the most current major browsers.

Final Product


Live Example

Banner Style Opt-In Live Example

Plugins Used

Import Files

Importing the Popup Files and Assets

Download and unzip the bundle file.

  • You’ll need the Main Popup, Thank You Popup and Popup Theme Files (xml).
  • You’ll also need the Fonts HTML file and the Styles CSS file (provided on Git below).
  • Note: the Main Opt-In Popup will import as “Draft” status, which means it has to be activated before it will work.

From the WordPress Admin, import the popup and popup theme files by going to Tools > Import in the WordPress Admin, as seen below. Scroll down and click “Run Importer” under WordPress.

Click the “Install Now” text first, if necessary.

Run Importer In WordPress Admin

After clicking Run Importer, upload each of the popup files (banner-style-opt-in-popups.xml and banner-style-opt-in-popup-theme.xml) to your site by clicking “Choose File” that appears on the following page:

Importing Popup Files

The importer will then ask about importing the author: choose assign the author data to an existing user.

Important: make sure to check the import attachments box for both files.

Importing Popup Files

You now have the Opt-In Popup, the Thank You Popup, and the Popup Theme on your site. You can find these under Popup Maker > All Popups and Popup Maker > Themes menu items in the admin.

The Opt-In Popup will import as “Draft” status, so it has to be activated before it will work, which we explain below.


To get the fonts we’ve used in this popup into your popup, copy this Google Fonts code into the <head> of your site (included in the bundle file).

CSS Styles

Use the following CSS styles (included in the bundle file) to bring everything together, these styles are built for any general form made with Ninja Forms. If you’re not using Ninja Forms, you’ll have to make some modifications.

For editing, find the expanded version here (included in the bundle file).

Import the Ninja Form

To import the Ninja Forms form (included in the bundle file), go to Forms > Import/Export in the WordPress Admin. Click “Choose File” and select the Ninja Forms import file (banner-style-opt-in-ninja-form.nff). Once selected, click the Import Form button.

Important: If you’re using the Layout and Styles Extension from Ninja Forms, make sure to remove the container styles in the Form Fields Display Tab of the Form Builder.

Depending on how many forms you previously had, the Form ID # could be different than my setup. All this means is we have to change the Form ID # in the popup to match what is on Ninja Forms.

Import Ninja Forms ID #

In the above screenshot, the Form ID # for our Banner Style Opt-In Form is ID #3. We need to make sure this matches in the Popup Content Editor, as shown below.

Ninja Form Inside Our Popup

Once you have the right form ID # inside the popup, click “Save Draft”.

Test and Publish the Popup

Now, let’s test the popup by creating a “private” Test Page. Once we have our Test Page setup, we can activate the popup on only that page by using Conditions. This way, we’ll make sure everything is good-to-go before it goes live.

Setup ConditionsBanner Style Opt-In Conditions

To set up the Conditions, go to Popup Maker > All Popups and click each each popup to bring up their Popup Editors. On the right side, look for the Conditions Pane, and customize it to suit your needs. In this case, since we’re going to test the popup first, we set the Condition to Pages: Selected: Test Page.

You can then see the popup in action by clicking the Publish button in the Popup Editor, then visiting the Test Page.

Once you’re ready to go live, you can simply switch the Condition to what best suits your needs.

We hope you enjoy this popup!

The Best of Both Worlds

Next time, we’re going to show you how you can get the best of both worlds by having a popup for mobile devices and desktops!




Content writer, WP Implementer, slice fixer.

Follow Walter on:


  1. Karelle Scharff on December 19, 2016 at 10:31 am

    When will this be available to use with Gravity Forms?

    • Walter Messer III on December 19, 2016 at 3:44 pm

      Hi Karelle,

      Just to be clear, you can still use this popup with Gravity Forms, but you just have to do a little more work as this one was built for Ninja Forms.

      So, when will I build one for GF? It’s coming! Let’s just say I’m not even close to warming up 😀

  2. Dehn Merrill on December 19, 2016 at 1:16 pm

    Awesome post and Thank You for the plugin as well. I use it in a free state with clients that USE the admin. I have had zero trouble in that capacity. Thats a good plugin. In any market. Will check you out for more in the fututre.

    • Walter Messer III on December 19, 2016 at 3:46 pm

      Thank you for the kind feedback, Dehn! And thank you for using Popup Maker – looking forwarding to publishing some awesome stuff for you in the future!

  3. Bob Easton on January 28, 2017 at 5:54 am

    Delightful! The results work exactly as anticipated and offer plenty of theme/style flexibility. Especially nice are the cookies that manage repeat appearances.

    At the risk of getting messier, the article needs one more thing. After getting a form successfully completed, the results need to “go somewhere.” In my case, I wanted to send he results to MailChimp. So, the PUM MailChimp extension (or Ninja Form’s Mail Chimp extension) completes that last step. I used the NF version and it integrated seamlessly.

    Kudos to Popup Maker for tools that integrate so well, and to Walter for this how-to article!

  4. Bob Easton on February 1, 2017 at 10:19 am

    Quick question…
    Mine works well, except the Thanks You pop’up never appears. What triggers that one_


  5. Bob Easton on February 2, 2017 at 6:59 am

    What triggers the Thank You pop-up? It is not appearing for me.

    I have used basic PUM plus the Forced Interaction plugin and the files included in this article. I’ve also added Ninja Forms’ MailChimp extension (as mentioned in my earlier comment.)

    The Thank You pop-up was not triggered either before or after adding the MailChimp extension. How should it be triggered?


    • Daniel Iser on February 3, 2017 at 1:59 am

      The option to trigger a thank you popup is available when editing your Ninja Forms Form. There is a “Close Popup” action available on the success actions tab.

      This only works with NF v3+, just something to make sure your already doing.

      • Bob Easton on February 3, 2017 at 4:24 pm

        Thanks Daniel!
        It’s working now.

        I had failed to set visibility conditions for the Thank You popup. Doh!

Leave a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.