Creating a Popup Email Subscription Form with jQuery

  • follow us in feedly
Published July 31, 2013 by Brad Knutson
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 DemoDownload 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?


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 $limit variable 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.

I’ll leave the form itself and the style of the form and modal popup window to you, but you can leave a comment below if you have questions!

The following two tabs change content below.
Founder at Inbounderish
Brad Knutson is a Web Developer in the Twin Cities area of Minnesota. He has experience working with WordPress and Drupal, and also has an interest in SEO and Inbound Marketing.

Keep Up-to-Date



See a complete list of topics discussed in blog posts here.

Check These Out

Get 2 Weeks Free! Sign Up Today! Premium Managed WordPress Hosting Genesis Framework for WordPress SEO is complex. Tools should be simple. Thesis Theme for WordPress:  Options Galore and a Helpful Support Community

92 thoughts on “Creating a Popup Email Subscription Form with jQuery

    1. Brad Knutson Post author

      In your fiddle, there is no HTML – so now div will be shown by the script. If you change your fiddle to alert you could at least confirm it’s working.

  1. Bill

    What would cause the pop up to display behind the page content? The timing, the cookies, everything else seems to be working correctly. I tried to apply a z-index to the div but that didn’t seem to help either. Any ideas on where to look?


    1. Brad Knutson Post author

      Hmm – my first instinct would be a z-index issue. Do you have a live page (or perhaps a CodePen or JSFiddle) I could look at and troubleshoot?


    1. Brad Knutson Post author

      Hello – I took a look at your link and it looks like it’s nearly working properly. The popup does show up after a short time, but doesn’t fill the entire page – take a look at the structure of the HTML and make sure the popup markup is a child of the body or the page container.

  2. Morgan

    Thanks brad! This script is really cool. Is there a way to make the popup appear sooner or just as the page loads?


    1. Brad Knutson Post author

      Absolutely – just change the $limit variable in the script to be smaller. It’s currently set to 5 (5 seconds) so you could set it to 1 and the popup would fire right away.

  3. Draconius Grey

    Can you use this for a Wix website? I use Wix and I am desperate to find a way to do an email pop up. I have the ability to put in the HTML code, but I can’t upload files. Is there anyway to do this purely with HTML code, or is there another work around?

    1. Brad Knutson Post author

      Hey Draconius – it’s my understanding that Wix doesn’t allow you to enter scripts, but I could be wrong. You’ll probably have the best luck contacting Wix support with this question. Sorry I couldn’t be more help!

    1. Brad Knutson Post author

      Absolutely – all you’d have to do is remove the jQuery Cookie script and the if statement that checks if the visitor has been to the page before.

  4. Rob

    Hi Brad,

    Really awesome article you have here, but I have a quick question. I’ve downloaded the source but can’t seem to get the demo 100% working. Everything functions as it should, and the script fires as it should after 5 seconds, but it doesn’t actually show the form. The screen grays out so it’s pulling in the subs-popup class fine, but the form isn’t pulling in. I’m no expert and I’m not sure if I’m just missing something simple. When I look at the script, it seems as thought it should be pulling in the form fine with the $.get(‘form.html’, function(data) { $(‘.subs-popup’).html(data); bit, but I’m still just getting a grayed out screen without the form popup.

    Any ideas why? Any help would be much appreciated, as this really is a great article and I’d like to play around and get a working version of this popup.


    – Rob

    1. Rob

      Follow up:

      So it seems that the issue is browser specific. Which is funny because the popup works fine when I view this page on Firefox, but when I play with the demo in Firefox I don’t see the form. Same thing with Chrome and Opera. However, I just tried it in Safari and it worked fine. I’ll keep playing around with it and see if I can find out why Chrome Firefox and Opera aren’t jiving.


    2. Brad Knutson Post author

      Hey Rob,

      The script pulls in the file form.html assuming that it’s in the same directory as the page you’re currently on. You could try fully pathing the HTML file that contains your subscription form, so it would look like this:


    3. Rob

      Hi Brad,

      Thanks for the follow up, it’s much appreciated. I’ve tried hard linking it to ftp and still no luck. At this point I’m sure it isn’t an issue with the script pulling in the form, as it works perfectly in IE and Safari. However it seems like Firefox, Chrome and Opera are taking issue with showing the form. The really strange thing about it is that the demo on your site works fine in all browsers, but when I download the source and try it on the same browsers it breaks. I’ll keep playing around and see if I can get it functioning. I’m convinced that it’s just something small or stupid that I’m just missing.

      Thanks again for the help!

      – Rob

    4. Brad Knutson Post author

      Rob – are you trying the demo files locally or from a web server? I can duplicate the error when running the files locally, but as soon as I upload them to a web server and access them from the web, it works.


    5. Rob

      Hi Brad,

      I knew I was being a dope haha…you’re totally right…once I upload the whole demo to a live site it works swimmingly. Btw it’s really awesome that you’re so active in the comments area of your articles even though this one is nearly 6 months old. Thanks for the help; awesome article and awesome accessibility!

      – Rob

  5. AB De

    Is it possible to embed the form using asp instead of HTML… Or is there a way to capture emails on to a database???

    1. Brad Knutson Post author

      You can still capture all the data on the form, as long as you submit the data to a processing script. This post shows you how to insert the HTML required for the form to display – you could definitely submit the data to an ASP or PHP script and capture it in a database.

  6. Joe Weathers

    Hey Brad, thanks for sharing. I’ve put this into my site’s Header file, but the pop-up isn’t working. Am I missing something? I already uploaded the Form.html file to my site.

    1. Brad Knutson Post author

      Are you on a WordPress site? If so, there is a conflict with the dollar sign ($) so replace every instance of ‘$’ with ‘jQuery’. If not, let me know and I’ll help you troubleshoot.

    2. Joe Weathers

      I had that in the code originally and took it out to see if that was the problem. I’ve added it back, here’s what my code looks like now:

    3. Brad Knutson Post author

      Hmm…that looks good. The only thing I noticed on your site is that you have 2 versions of jQuery, 1.7.2 and 1.10.2. I wonder if this could be creating some conflicts.

      Also – note that if you set the cookie, the popup won’t display. So it’s possible you have a cookie set in your browser and the script is functioning properly (although admittedly I didn’t see it fire on my end either). You could try troubleshooting by adding some console.log messages or alerts to verify parts are working.

      My advice would be to remove the older version of jQuery to see if that makes a difference. If that doesn’t work – let’s continue this conversation via email (

    4. Joe Weathers

      It’s me again :)

      I have everything working, except the close button. It works, but after a few seconds the pop-up comes up again. Any ideas?

      This is the script in my file for the close functionality:

      $(‘.email-close’).click(function() {
      $limit = 9999;

    5. Brad Knutson Post author

      Looks like the script to close the popup and reset the limit isn’t set properly.

      In my example, I used $limit but you dropped the ‘$’.

      That should do it!

    6. Brad Knutson Post author

      Right, that’s what I mean – you need to remove it from the short script that comes with your form (and close out the function), because you removed the $ symbol from the script that resides on your home page.

    7. Joe Weathers

      Ahh, I see what you mean now. Well now I’m using ‘var’ in both places, and it’s still not staying closed for more than a few seconds. Is there something else I’m missing?

    8. Brad Knutson Post author

      Hey Joe,

      Hmm…can you replace your script on the form with this?

      Try it again and let me know if it doesn’t work. The console.log will help me debug this.

    9. Brad Knutson Post author

      Hmm…the ‘limit’ variable isn’t working. Try replacing all instances of limit with $limit (in both the form script and the script on the home page). Then let’s try again.

      On a side note, when you go back to the page a 2nd time, the popup correctly stays hidden, so at least the cookie is working!

  7. Angela Speed

    I’m trying to convert my existing standard pop-up to the lightbox-type example and I am not having luck. I was able to change the pop box from the ugly green one (, and update it to the final version I’m trying to utilize: Here is it working as a basic pop: utilizing your above code here is my test doc: I’m an email coder, and this just is a little beyond me. so any help would be just that!

    One more inquiry: is there a way to set the cookie to refresh every 30-days or quarterly?

    1. Brad Knutson Post author

      I took a look at your index-test.html page and you’re missing the jQuery Cookie script (it’s returning 404 not found). Make sure you upload the jQuery Cookie script to your server and link to it using the correct path.

      As for the length of the cookie – the last line currently sets it for 30 days

      You could modify this line to any length you’d like.

    2. Brad Knutson Post author

      Angela, you have the jQuery necessary to close the modal:

      However the “email-close” class doesn’t appear on any elements in your form or overlay. Add this class to whatever element you want to be your “close” element – I assume it’s the “close window” text.

      As far as centering the overlay, you’ll need just a little bit of CSS.

    3. Brad Knutson Post author

      Looks like you’re really close! The form is centered on the page – to center the “X” add “position:relative” to the form element, and “position:absolute” to the X. That should do it.

    1. Brad Knutson Post author

      David – this example will work with regular HTML pages as well, it doesn’t have to be a form. How it looks is up to you, I left it up to my readers to style the form as they see fit.

    2. David

      Thanks for the quick reply thanks

      I put the code in js Fiddle with a herf and the page didn’t show up and I changed the source in JavaScript what could be the problem ?

    3. Brad Knutson Post author

      You have to include the jQuery Cookie script. The second line of HTML you have is:

      Download the jQuery Cookie script from the link in this post and host it on your site, then change the path of the script to match your location.

    1. Brad Knutson Post author

      You need to include an element (a div) with the class “subs-popup” for this to work.

      You’ll also want to remove one of the two jQuery scripts you have on the page (preferably the old one) as this will cause conflicts.

    1. Brad Knutson Post author

      Try downloading the source files and working backwards. Sometimes I work backwards and reverse engineer things until I get them to work the way I want to :)

    1. Brad Knutson Post author

      Hey Saeed,

      The Cookie script you are using is the correct one, but since you are using WordPress you shouldn’t use the “$” variable, as it creates a conflict with WordPress. Replace all instances of “$” with “jQuery” and it should work!

    2. saeed shabani

      I change all “$” to “jQuery” but it’s still not working.
      I save the rokesh.js file here . Please edit it correctly because i don’t have enough information about jQuery.

    3. Brad Knutson Post author

      In the script on your site, and on the Codepen you sent you still have the $ variable. Copy and paste this for your script.

      Second, I notice that you had the “subs-pop” container on your form page, but you actually need it on the page where you want the popup to happen on (in this case your WordPress site). Remove the div from your form, and add this empty div to your website.

      That should help.

  8. Mei

    Hey Brad,

    Just wanted to give you a quick note to say that I appreciate your script! Been searching high and low all day for something like this to use on my Prestashop site. Most plugins are either missing a feature I need or cost an arm and leg. So thank you, this is perfect!

    Also, I had to ask my husband if he knew you – we’re both from the Twin Cities and he’s a software programmer. When I saw your bio at the bottom I thought your name sounded familiar! Guess not though.

    See ya!

    1. Brad Knutson Post author

      I’m always happy to help fellow Minnesotans! Anyone who can stand living through these winters is alright in my book! :)

    1. Brad Knutson Post author

      Hey Jonathan,

      A few others have had this problem. It seems to be a conflict with having multiple versions of jQuery installed. Looks like you have 1.7.1 and 1.10.2. If you could, it would be ideal to remove the older version of jQuery – but make sure you test all other functionality on your site to make sure this doesn’t break something else.

    2. Jonathan

      Thanks Brad, yes when I take this reference away it pops up. just need to play with it a bit more now to get it looking right. Thanks very much.

  9. Rick

    Brad, you’re AWESOME!

    I’ve quickly read over your thread (which I stumbled upon while looking into creating a form for my employe’s web site), and have come to the conclusion that you are, well, AWESOME. It’s totally TOO COOL the way you’ve put out such great information and have provided your invaluable assistance to TOTAL STRANGERS.

    Keep up the Great Work Brad. And I wish you much success!



  10. Sander

    Hi Brad. Is there a way to change the cookie time? I want the cookie more than 6 months in the browser of the visitor.

    1. Brad Knutson Post author

      Hey Sander,

      The last line of the script:

      sets the cookie length to 30 days. If you set this to 180, it will be 6 months.

  11. Joe

    Hi Brad,

    Thanks for sharing this.

    I have already set up a pop up box and that works fine, questions is how can i only apply the cookie part of the script to work with the pop up script that’s already set up?

    I’m still trying to get my jquery knowledge up and it’ll be great if you could point me in the right direction.

    JSFIddle Here


    1. Brad Knutson Post author

      Hey Joe – you’ll need to download and install the jQuery script found here. Check out there documentation for updated commands, parameters, and options.

    2. Joe

      Hi Brad,

      Thanks for your reply.

      I’ve downloaded and inserted the jQuery script, now i’m not sure which part of the code i need to add onto my current one.

      I’ve looked at your script provided up top, the first part seems to me like its saying that if the cookie if ($.cookie(‘test_status’) != ‘1’) exist then open up a external form.html? but for my script i’ve set it to open up the .popupDetails class.

      the second part of the script is regarding the idle which i don’t require and so the only line it makes sense to me to add is

      jq.cookie(‘test_status’, ‘1’, { expires: 30 });

      Please if you could assist me with setting this up correctly.

      JSFiddle Here

      Thank you

  12. fareed

    Dear Mr.Brad,

    Thanks for posting popup window, every thing is working perfect as you shown, i would like to use in this way

    1. When the user click subscribe button popup window should get close, it should not open mailchimp new window. (for example pls visit above link i am looking in that way)

    it will be highly appreciated ASAP reply.

  13. Paritosh

    Hi Brad,

    I have copied your code on a sample page. Unfortunately, the timer code keeps firing and i get the alert popup every 5 seconds without checking if cookie is set or not. I know there is something wrong, but haven’t been able to figure it out….can you please take a look and let me what’s wrong with the code?

    1. Greg

      I was having the same problem Brad. I noticed that by default the cookie is page dependant however you need to set it to span the entire site

      I had to add to the cookie options:
      path: ‘/’

      $.cookie(‘test_status’, ‘1’, { expires: 30, path: ‘/’ }

      Hope this helps :)


    2. Greg

      Actually … my previous post fixes an issue across pages.

      The other problem you are having I also have. There is an issue with the way the cookie is set, it needs a page refresh for it to be read.

      I moved the setting of the cookie straight after the alert or modal trigger. And added another condition to check the cookie exists:
      idleTime = 0;
      $(document).ready(function() {
      $limit = 5;
      if ($.cookie('popupsignup') != '1') {
      function timerIncrement() {
      idleTime = idleTime + 1;
      if (idleTime > $limit && $.cookie('popupsignup') != '1') {
      idleTime = 0;;
      $.cookie('popupsignup', '1', {
      expires: 30,
      path: '/'
      var idleInterval = setInterval(timerIncrement, 1000);
      $(this).mousemove(function(e) {
      idleTime = 0;
      $(this).keypress(function(e) {
      idleTime = 0;

      Works perfect for me now

    1. Brad Knutson Post author

      That part of the integration is up to you, I didn’t get into that in this example – that would be a separate post!

  14. Gaurav Bhagat

    Hey there,
    I have been struggling with setting up pop up window every 30 days for my website. It pops up every time rather doing it as the cookie says to pop up every 30 days. I am posting the code here hoping you can find what’s wrong with the code.


    1. Brad Knutson Post author

      One of the issues I’ve seen others run into is using the incorrect jQuery Cookie script, or not including it at all. View your page in a browser, and look at the console to see if there are any errors – the console will alert you to the Cookie script missing.

    2. Gaurav Bhagat

      I am not sure what to look for. It doesn’t show much related to the above script. I think, it’s error in argument somewhere which I am completely missing.

  15. Sam


    When I upload the source files to my server and view the index.html file, this all works fine. However, I am having trouble integrating this function into my own site. I think maybe I just don’t know where to upload all the files. I’m using WordPress. I’m calling all the scripts in the header.php file of my site, and I have the subs-popup div embedded in the body of my site as well. I’ve also gone through the “.js” files and replaced instances of “$” with “jQuery”, since I’m using WordPress. I think my problem may be incorporating the form.html and style.css files into my site. Do I just add the content of the style.css file to my existing stylesheet? And where does the form.html file go? I’ve tried going into the script.js file and linking to the full URL of the form.html file on my server, but still not having any luck. My site is Any help would be much appreciated!

  16. Ben Bunch

    Hey, great script, got it up and running very easily.

    Just curious if there is way to adjust it to allow up to three loads of the pop-up message before the cookie check prevents the further pop-up.


Share Your Thoughts

Your email address will not be shown.

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">