How To Create An Awesome Newsletter Signup Popup For Your WordPress Site
How To Create An Awesome Newsletter Signup Popup For Your WordPress Site
When it comes to newsletter signups, simply putting a form in a sidebar widget doesn’t cut it. You need to get on the front foot and get your signup form in the face of your visitors.
You need a popup. And not just any old popup. You need an awesome popup that is bold, eye-catching with the kind of entrance that makes everyone in a room stop talking and pay attention.
We’re not too proud on this blog to point out when a competitor does something well: Elegant Themes, we love your newsletter signup popup. From the images to the fonts to the ta-da inspired entry, it grabs your attention without being ultra-annoying.
Chances are that it also converts (like to confirm, ET?) which, when we stop obsessing about the visual niceties, is the bottom line, isn’t it?
So, let’s walkthrough how you can add an ET-style popup to your site, complete with an ajaxy Mailchimp subscription form and a room-stopping entrance.
Building An Awesome Newsletter Signup Popup
This solution is based on a couple of WPMU Dev plugins: PopUp Pro and Mailchimp Integration. If you are WPMU Dev member then download and install them either from their Project pages or via the WPMU Dev dashboard in your WordPress admin interface.
Most of the effort is in creating a custom style for the popup. The Mailchimp Integration plugin simply provides a shortcode that can be added to the body of the popup via a TinyMCE button but we’ll cover all this later.
The first step, after installing the plugins is to configure the Mailchimp Integration plugin.
Configure Mailchimp Integration
You’ll need a Mailchimp API key, so jump into your Mailchimp account and go to Account > Extras > API Keys. If you don’t already have a key listed then click on Create A Key.
When you have a key listed, copy the API Key and then head back to your WordPress site and in the admin interface go to Settings > Mailchimp.
Paste your Mailchimp API Key into the form and click Save Changes which will validate your API Key. Once validated select your mailing list and whether you want members of your site automatically added to that list.
With Mailchimp set up, now we need to create the popup.
Create The Signup Popup
Activating the PopUp Pro plugin adds a new top-level item, Popup to your WordPress admin menu: click on it and then on Add New.
In the edit form, add a PopUp Name and in PopUp Contents add a Heading and Subheading. We are going to embed the Mailchimp signup form in the popup via a handy button in the visual editor’s toolbar which will help us build a shortcode.
Click on the Mailchimp logo (the monkey in a hat) in the Main PopUp Content toolbar and you’ll see this dialog:
Don’t worry about a Form Title but do add text for:
- Text displayed when a user subscribes
- Text displayed in the submit button
For this popup we are not worried about First and Last Name (we’ll actually be hiding them later) so don’t check those boxes.
Click on OK and you should find the shortcode has been added to the Main PopUp Content. Complete the content entry by adding an image for the PopUp Feature Image (doesn’t matter whether it is left or right aligned).
Your PopUp Contents should look something like this:
Click on Save.
Whilst you can preview the popup in the admin interface, I think it’s better to test it out for real on a test page on the site itself.
Go to Pages > Add New, create a new page called Popup Test and add some default text. Click on Publish.
Back to PopUps, edit the Elegant Newsletter Signup and scroll down to Displaying Conditions. Switch on On specific url and then enter the full url of your test page.
Change the popup status to active and click on Save. Before we take a first look at the popup, there’s one important step to complete.
IMPORTANT! Choosing The Correct Load Method
PopUp Pro’s default method for loading a popup is via AJAX. For the majority of cases this is fine but for some, including this scenario, the AJAX nature of the embedded form conflicts with PopUp Pro’s own handling of forms.
Fortunately, solving the problem is just a case of changing the load method.
Click on the PopUp > Settings and in PopUp Loading Method change Load PopUp using to Page Footer. Click on Save All Changes.
1.6 million WordPress Superheroes read and trust our blog. Join them and get daily posts delivered to your inbox - free!
Whenever you have problems with a shortcode in a popup not working as you would expect it’s worth changing the load method: Page Footer is usually the best bet.
The Settings page also contains a handy matrix of popular shortcodes and their compatibility with the various load methods, so be sure to check this out also.
OK, time to test, so navigate to your popup test page. Likely you’ll see something like this:
A bit underwhelming and nothing like the Elegant Themes popup. We need a popup makeover.
Applying A Popup Makeover With A Custom Style
The best way to give a popup a makeover is to create a custom popup style. Not only does this give far more flexibility but it also makes the style available for other popups as well.
You can create your custom style in the styles folder of the popup plugin but doing so runs the risk that it will be deleted when the plugin is updated. A safer, and better, approach is to put the custom popup style in your active theme and then use a custom filter to add it to the list of popup styles.
Download the custom styles files to your active directory and click on the zip to expand it. Your folder directory should be /wp-content/themes/[your active theme/popup-custom-styles-master/.
Next, go to your functions.php and add the following code:
You should now find a new option, Elegant, has been added to the select list of styles in the Appearance pane on the edit popup screen.
Select it, click on Save and go back and refresh your test page.
Making Some Structural Changes
In the popup/elegant folder in your active theme you’ll find three files:
- style.css – holds all the CSS for your custom style
- style.php – this file is not actually required and can be deleted
- template.php – this builds the HTML output for the popup
To make the styling a little easier, the template.php file has been modified slightly to move the output of the PopUp Feature Image out of the content section of the popup
It’s All About Style
The real work is done, though, in the style.css. I found it easier to remove all the existing style clauses that contain #messagebox and start from scratch and you’ll likely find the same.
It’s worth noting that this style gets injected into the HTML as text – that is the file is not linked. This is because the #messagebox text is actually replaced with a random ID that is assigned to the popover at generation time to enable multiple popovers to coexist.
Rather than stepping through the entire CSS, let’s just look at some of the more interesting bits.
- 2 @import statements add the Goudy Bookletter Google Font and animate.css which provides the entrance animation
- The .wdpu-msg has a padding of 50px to allow the image to hang outside the body of the popup
- The X to close the popup is added to the link using the :after pseudo-selector and the HTML entity value
- The name input controls on the Mailchimp form are hidden using the nth-of-type pseudo-selector as the containing divs don’t have unique ids
Making A Grand Entrance
Popups by default are something of a surprise to the visitor, after all they are not the result of a user action, they just appear.
Having some sort of animation can make the appearance of a popup seem more natural and less abrupt. Perhaps even slightly amusing, although that might be pushing it.
The Animate.css library provides a plethora of animations many of which can be easily applied to our popup. I’ve put the animate.css file in the theme root folder to make it easier to import (it becomes theme independent).
IMPORTANT! If using animate.css via an @import statement be sure to remove or move the comments at the top of the file, otherwise it won’t work.
With the all the animate.css animations now available it’s a case of assigning the required animation to the popup when it’s activated.
Whilst there’s no actual class that’s toggled inline with the popup’s status, the body element does have the has-popup class added and removed in line with the popup being opened and closed, so we can use that to target our popup and add an entrance animation.
This CSS clause causes the popup to drop down from the top of the screen and bounce on its final position:
It’s worth going through the available animations on Animate.css to see which you like: it’s then a simple case of changing the animation name in the CSS.
Extending The Solution
We’ve got a very usable custom style now, that not only gives us a great looking popup but also some great animation on initialization with the option to chose dozens more.
That said it’s a solution that could be improved and the first port of call would be to build a custom plugin that:
- adds the custom style (so remove from functions)
- enqueues the animate.css file (no need to move the comments)
Of course, once you get the hang of this you’ll likely also want to start creating your own styles and play with the entrance animations.
In the meantime, though, you’ll have a great looking popup that visitors to your site won’t be able to ignore.