Creating a Popup Email Subscription Form with jQuery

Email subscription fields and forms are a great idea in theory, but unless you have thousands of daily visitors to your site, you probably aren’t getting the subscription numbers you want. It’s more likely that only a small percentage of your visitors will see your email subscription call-to-action and actually go through with it.

One tactic that many marketers choose is a popup email subscription form. We’ve all seen this before. When a user visits your page, after a certain period of time a popup window appears that suggests the user should subscribe with their email address. The popup prevents the user from continuing on until they subscribe or close the popup window.

Regardless of how you feel about this “interruption,” it’s a pretty effective method of increasing your email subscription conversion rates. Whether you should implement this tactic is up to you.

My Example

Email Subscription Popup

View Demo 

Download Source

Take a look at the example. If you pay close attention, I’ve added a few key pieces of functionality.

  • Popup only fires after user is idle for 5 or more seconds.
  • Popup only fires once, even if page is refreshed.

Rather than building my own form handler and integrating it with WordPress (not all that complicated actually), I choose to use a pre-built email subscription form I already had from MailChimp.

So how did I go about accomplishing this?

jQuery

First, we’ll need to make sure we add links to jQuery and the jQuery Cookie plugin in the head of our document. You can download the jQuery Cookie plugin from here.

Next comes our custom script. You can link this in the head of the document as a separate script, or add this directly into the HTML.

Confused? Don’t worry about it. There are three distinct steps in this script.

First, we use the jQuery Cookie plugin to determine if a cookie has been set. If it has, we ignore the rest of the script and the popup is not shown to the user. If the user does not have a cookie set, the script will load the form from another page (this is optional, the form could be part of the original document if you’d like) and proceed on.

Second, we test to see if the user has been idle for a predetermined amount of time – in this case the $limitvariable sets the idle time to 5 seconds. The timer resets any time the user moves the mouse over the webpage or presses a key.

The third step is only fired if the user doesn’t have a cookie set, and has also been idle for 5 seconds. The third step is really simple – all it does is show the form element with class subs-popup.

I also added a little jQuery to handle closing the form and setting a cookie so the form doesn’t show for the user again.

Categories Blog