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
Video
Live Example
Banner Style Opt-In Live Example
Plugins Used
- Popup Maker 1.4+ (required)
- Ninja Forms 3+ (required)
- Forced Interaction Extension for Popup Maker
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.
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:
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.
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.
Fonts
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.
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.
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 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!
When will this be available to use with Gravity Forms?
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 😀
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.
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!
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!
Quick question…
Mine works well, except the Thanks You pop’up never appears. What triggers that one_
Thanks,
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?
Thanks!
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.
Thanks Daniel!
It’s working now.
I had failed to set visibility conditions for the Thank You popup. Doh!