This guide shows you how to create a newsletter subscription pop-up form in WordPress.
Unlike normal newsletter sign-up forms, pop-up forms have significantly higher conversion rates. In fact, the average conversion rate is 3.09%.
Below is an example of an “exit-intent coupon code pop-up“.
Noptin allows you to create such a system without writing any line of code.
Prerequisites
To continue with this tutorial, you will need to install the latest version of Noptin (free) and the Ultimate Addons Pack addon.
To automatically add new email subscribers to your email service provider (e.g. Mailchimp), you will also have to install the appropriate add-on.
Creating the Subscription Pop-Up Form
First, click on Noptin > Subscription Forms to open the forms overview page…
… then click on the Add New button to create a new subscription form.
Next, give your new form a name …
… and select the subscriber fields that you would like to collect.
If you’re giving away something free in your pop-up, we recommend that you mention it in the subscribe button text as shown in the example below.
Next, make sure that the form status is set to “Published”. Otherwise, your website visitors will not be able to see it.
You can also optionally set a redirect URL, and Noptin will automatically redirect new subscribers to the URL you set. As shown in the image below, redirect URLs can contain smart tags.
The tags and list settings are optional. We, however, recommend that you segment all subscribers into relevant lists and tags so that they only get the emails that they signed up to get.
Next, click on the Advanced tab to set the Header and Footer texts of your pop-up form. This is recommended because pop-up forms are isolated. They do not appear next to other content.
Use the Hide and Only show input boxes to conditionally display your pop-up. This is important if your pop-up is only relevant on a few pages. In the example below, our pop-up form will only show up on the cart and checkout pages.
Finally, click on the “Display this form in a popup” checkbox so that Noptin knows that you have created a pop-up form.
That’s all.
There’s only one problem though. Noptin will display your pop-up as soon as a page finishes loading.
Such types of pop-up sign-up forms can annoy your website visitors. The following sections show you the other types of pop-up forms that you can create.
Exit-Intent Pop-Up Forms
An exit-intent pop-up form is displayed to a website visitor just before they leave our website. It tracks your website visitor’s mouse movements and pops up when it senses that a visitor’s mouse cursor has just left your page.
As a result, the forms will only show up for users who are navigating with a mouse or trackpad.
The most common use of exit-intent pop-ups is to display a newsletter sign-up form on your checkout page, just before a potential customer leaves the page without completing the purchase. You could then offer them a WooCommerce coupon code in exchange for their email address.
The coupon code should entice them to continue with the purchase, and if it doesn’t you can send them follow-up emails encouraging them to complete their purchase.
This is known as an “exit-intent coupon code pop-up“.
To create an exit-intent pop-up form, change the “As soon as the page loads” dropdown to “Before the user leaves.”
Scroll-Percentage Pop-Up Forms
These newsletter sign-up forms will pop up after a user scrolls down a specified %ge of your page.
This is better than immediately displaying your pop-up forms since the user will have read some of your content and will therefore be more likely to convert.
To create such a pop-up form, change the “As soon as the page loads” dropdown to “After the user scrolls.”
A new text box will appear allowing you to set the scroll percentage. The scroll percentage defaults to 25%, but you can set it to any percentage such as 70% or even 100%.
Click-triggered Pop-Up Forms
These newsletter sign-up forms will pop up after a user clicks on an element such as a button or a link.
They are mostly useful when offering content upgrades, such as in the example below from Backlinko.
When someone clicks on the “Download a free checklist” link, a newsletter sign-up form will pop up asking them to enter their email address. The checklist will then be sent to the provided email address.
To create such a pop-up form, change the “As soon as the page loads” dropdown to “When the user clicks on.”
A new text box will appear allowing you to enter the CSS selector of the element that should be watched for clicks.
Delayed Pop-Up Forms
These newsletter sign-up forms will pop up after a given time delay (measured in seconds). They convert better than normal pop-ups since they give our website visitors time to familiarize themselves with your website first.
To create such a pop-up form, change the “As soon as the page loads” dropdown to “After.”
A new text box will appear allowing you to enter the number of seconds to wait for before displaying the pop-up form.
Leave a Reply