DesignMarketing

How to Use The WordPress Plugin Popup Maker to Make Lead-Converting Popups

By October 3, 2017 No Comments
popup maker for lead-converting popups

Popups, when created correctly with your target audience in mind, can be a great option for converting leads on your website. There are a variety of ways that you can make popups for  your website. One WordPress plugin that we love and use regularly is Popup Maker. Here’s a overview of how to use Popup Maker to create lead-converting popups for your WordPress website.

Setting Up the Popup

Once you’ve got Popup Maker installed and ready to go, we can set up the conditions for display, the popup triggers, and the popup cookies. These three items will dictate where your popup shows on your WordPress site, who will see it, when and how people see it, and how to keep your popup from becoming a bother. This last item is especially important because we want to add value to our users’ experience on our websites, not detract from it. We’ve all experienced an annoying popup before; let’s try to avoid that.

Pop Up Conditions

In the Popup Maker plugin, you’ll find the conditions settings on the right side of your popup edit screen. The popup conditions determine where on your site your popup will show, and you can also determine if the popup should show on mobile and tablet devices. If you don’t choose any conditions, your popup will display on every page.

You can set any combination of conditions you think of, from vague to extremely specific. For this example, let’s say we want our popup to show on all blog posts, except those in the marketing category. First, we’ll choose “All Posts” from the dropdown. Then we’ll add an “and” condition of “Posts: With Category” and choose “Marketing”. To say that we don’t want the popup on posts in the Marketing category, we use the negative selector (the exclamation point to the left of the dropdown). To get a better idea about different conditions you can utilize using Popup Maker, visit this page.

Popup Triggers

Next, let’s set a up a trigger. Triggers allow you to choose what move made by your website traffic causing the popup to appear. There are a few different options for setting up triggers in Popup Maker including:

Click Open– Opens when a page element is clicked.
Auto Open– Opens after a set amount of time.
Exit Intent– Opens when the mouse moves toward the top of the screen.
Exit Prevention– Opens when attempting to refresh/close page.

Here is an example of using the auto open trigger and showing the popup after 10 seconds (10,000 milliseconds).

Popup Cookies

Now let’s set up a cookie. This will prevent your popup from being shown to a user multiple times within a set time period. You can imagine how annoying it would be if it showed on every single page, no matter how many times it was closed out of. Here are the types of cookies:

On Popup Open– Sets a cookie after the popup is opened (Useful for Click Open popups).
On Popup Close– Sets a cookie after the popup is closed.
Manual Javascript– Good for if your situation requires a more custom solution.
Gravity Form Success– Will create a cookie when a form is submitted.

Once you’ve chosen your cookie type, you can also choose the cookie time (how long until the cookie expires and the pop up will again show for that user), if it is a sitewide cookie (if the popup will be disabled on all pages, or just the one where the user took the action), or if it is a session cookie (will reset after the user leaves your site).

We’re going to choose an “On Popup Close” cookie, and set it to a length of one week.

Once you’ve added your cookie to your popup trigger, you can start designing your popup!

Adding Content and Styles to Your Popup

The most important things to include in your popup created by Popup Maker are a call-to-action (CTA) and a form. The CTA will tell you user what they are getting or doing: receiving a free ebook, subscribing to your newsletter or contacting your business for example. The form is how you get information about that user. Which fields to include will depend on what the offer is. We recommend using Gravity Forms because it is extremely flexible, robust, and user friendly.

Creating visual interest is essential to get people to take the time to actually read what your popup has to say. There are a lot of ways to create more visual interest to grab attention, such as using a background image, displaying an icon, or using bright colors. If your popup looks boring, people will likely close out of it without too much thought.

In the Popup Maker plugin, there are a few settings to help you get started. On the righthand side, there are pre-made themes that you can choose from if you wish. You can also, among other things, set the width of your popup, enable or disable a background overlay (you should usually have this enabled), and edit your “close” button. However, these settings will only get you so far.

Popup Examples with HTML and CSS

Making awesome popups with the Popup Maker plugin is going to require a bit of HTML and CSS (nothing too scary, I promise!). Let’s create two example popups. Although there are a ton of layouts you could use, we’re going to focus on a one-column layout and a two-column layout.

Popup Maker Design Example One

For this first example, we’re going to be creating a popup with an icon, background image, and an email form field. Here’s what the final product will look like:

The HTML

<div class="popup-bg-photo">
    <img class="aligncenter wp-image-11531 size-thumbnail" src="/wp-content/uploads/evelope-icon-150x150.png" alt="" width="150" height="150" />
    <p style="text-align: center;">Want to stay up-to-date on industry trends?</p>
    <h2 style="text-align: center;">Sign up for our newsletter!</h2>
    [gravityform id="4" title="false" description="false"]
</div>

The CSS

.popup-bg-photo{
    background-image:url("/wp-content/uploads/popup.jpg");
    padding:30px;color:#fff;
    background-size:cover;
    float:left;
    width:100%;
}
.popup-bg-photo p{
    padding-bottom:10px;
}
.popup-bg-photo h2{
    color:#fff;
    margin-bottom:30px;
}
#gform_wrapper_4 .gform_body input[type='text'] {
    padding: 18px; 
    border-radius: 0;
}
#gform_wrapper_4 .gform_body {
    float: left;
    width: 80%;
}
#gform_wrapper_4 .gform_footer {
    clear: none;
    width: 20%;
    float: left;
}
#gform_wrapper_4 input {
    width: 100%;
}
#gform_wrapper_4 input[type="submit"] {
    border-radius: 0;
    background-color: #f6663d;
    font-size: 30px;
    padding: 11px 20px 14px;
    margin-top: -10px;
}

Popup Maker Design Example Two

Next, let’s make a two-column popup. This is useful for a few different scenarios, such as if you have several form fields, or a photo you would like to showcase on one half. We can accomplish this layout by using a table.

Here’s an example:

The HTML

<table>
    <tbody>
        <tr>
            <td class="bg-photo">
                <h3>Wait! Before you go...</h3>
                <h2>Access Our Free Guide: 5 Common Mistakes Made When Building a Website</h2>
                <img class="alignnone size-full wp-image-10617" src="/wp-content/uploads/bg-divider.png" alt="divider" width="197" height="8" /> 
                With all the moving pieces of building a new website, it's easy for important things to get overlooked. Fill out the form to learn the 5 mistakes to be sure to avoid. You'll be glad you did!</td>
            <td class="bg-gray">[gravityform id="12" title="false" description="false"]</td>
        </tr>
    </tbody>
</table>

The CSS

.bg-photo {
   width: 55%;
   background: url(/wp-content/themes/salient-child/images/bg-webinar-sign-up.jpg) no-repeat;
   background-size: cover;
   padding: 30px 20px;
}
#popmake-10616 table {
   border-spacing: 0px;
   padding: 0px !important;
}
.bg-photo h3{
   color: #96f1ff;
   font-size: 22px;
   margin: 0px;
}
.bg-photo h2{
   font-size: 34px;
}
.bg-photo h2, .bg-photo p, .bg-photo {
   color: #fff;
   line-height: 120%;
   margin: 0px;
}
#popmake-10616 .pum-close.popmake-close {
   height: 36px !important;
   border-radius: 0px !important;
   padding: 8px 14px;
   font-size: 16px;
   margin: 0px;
}

Creating lead-generating popups is simple with the use of Popup Maker and Gravity Forms plugins in WordPress. By following these tips you can easily create popups that are effective and non-intrusive for your website visitors. What do you use to create your popups? Let us know in the comments below!

Executive's Guide to Web Development

80 pages of topics and tips to navigate your way to a better website.