Create An Email Subscription Popup With jQuery

As you’ll recall, The Polyglot Developer was once using WordPress. Back when I was using WordPress, I was using a plugin called Icegram, which is similar to SumoMe and OptinMonster, but it allowed me to present popups after a period of time to prompt users to subscribe to my newsletter.

I get that not everyone appreciates an annoying popup, but it was great for me because I was getting a lot of new email subscribers very quickly.

Since having dropped WordPress, I haven’t been able to find a plugin that offered similar functionality to what I had. This inspired me to create my own plugin using jQuery that I could use anywhere, including my Hugo powered blog. We’re going to see how to create our own opt-in style popup for collecting email leads.

To get an idea of what we’re hoping to accomplish, check out the following animated image.

Using jQuery we can show content on a delay, issue Ajax requests to an email newsletter API, and set local storage values that act as sessions to prevent your users from becoming annoyed.

Going forward, this tutorial was heavily inspired by Maruf Rahman’s article titled, Bespoke jQuery Sign-Up Popup Box. His article is a little out of date and is missing a few cool features that I hope to demonstrate.

Designing the Subscription Popup with HTML and CSS

When it comes to displaying our popup form, we’ll need to write some HTML markup and then make it attractive with CSS. How you present an opt-in opportunity to your users can make a huge difference.

Create a file named index.html somewhere on your computer. This fill will contain our in-theory website along with popup markup. Open the index.html file and include the following:

A lot of the above CSS was taken from the article that I had previously mentioned. It is responsible for positioning our popup in the center of the screen and dimming the background. I’m not an artist, so if you think you can improve the design, more power to you.

Including jQuery and JavaScript Logic for Presenting and Scheduling the Dialog

This example is kind of useless without some JavaScript and jQuery powering it. By default, based on our CSS, the popup is not displayed. We need to animate it and display it on the screen after a period of time. We also need to control when we display it, as in, we need to decide after how many days it should be displayed between closes.

Create a file called list-builder.js and include the following JavaScript with jQuery code:

When jQuery is ready, we need to check what we’ve previously stored in the local browser storage. This is an alternative to using session storage or a cookie. If local storage for this plugin hasn’t previously been set, then initialize the variable.

Since we’re storing a timestamp, as milliseconds, of when the popup was last closed, we need to convert it to days and compare it against our expiration value. If the timestamp is older than the current time, as specified by the expiration value, then we need to show the popup again.

The dimmed container and popup will become hidden and a new expiration value will be set.

Ideally, we’re going to want to submit the form when the submission button is pressed. Most email services have an API that can be leveraged. I’m personally using Sendy to manage the list for The Polyglot Developer and it has an API.

When the button is pressed, an Ajax request is created. Using the endpoint specified in the form, we can serialize the form fields and send them. If the form was successful, we can swap out the form within the popup for some kind of text saying that the job has completed.

In the above example, we’re issuing a POST request and handling the result.

Conclusion

You just saw how to create your own list building email subscription popup using jQuery and JavaScript. What we saw is compatible pretty much anywhere, not limited to just WordPress. If you’re using a list building service like Sendy, you can leverage its API to send data directly to it.

As previously mentioned, some of the code and a lot of the concepts of this tutorial were taken from an article by Maruf Rahman. I want to give credit where credit is deserved.

It should be noted that you should use these opt-in popup forms with care. Most people will tell you that they hate them, but in most cases they’ve had a poor experience of someone abusing them. Thinking about waiting at least twenty seconds before showing the popup.

Nic Raboy

Nic Raboy is an advocate of modern web and mobile development technologies. He has experience in Java, JavaScript, Golang and a variety of frameworks such as Angular, NativeScript, and Apache Cordova. Nic writes about his development experiences related to making web and mobile development easier to understand.