Creating an Email Subscription Popup using jQuery

Email subscription popup is a great idea to increase the number of subscribers of your website. It notifies the visitor to subscribe newsletter with their email for getting useful resource into their inbox. Using subscription popup visitor can easily subscribe without leave from the current page. In this tutorial, we’ll provide you a simple way to create an email subscription dialog box and show popup after some time in a web page using jQuery.

Showing a subscription popup after a certain time is a smart trick for converting a visitor to a subscriber. Here we’ll build a script that helps you to make a popup and integrate subscription box functionality easily on the web page. When the user visits a page of your website, a dialog box will appear after a certain period of time and it will suggest user to subscribe with their email address.

JavaScript Code

The jQuery is used to make a delay subscription popup, so the jQuery library needs to be included first.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>

The jQuery Cookie Plugin is used to check whether the subscription popup has shown to the visitor.

<script src="jquery.cookie.js"></script>

The subscriptionPopup() function handles open and close functionality of the subscription popup. It helps to show and hide the popup content to the user.

function subscriptionPopup(){
    // get the mPopup
    var mpopup = $('#mpopupBox');
    
    // open the mPopup
    mpopup.show();
    
    // close the mPopup once close element is clicked
    $(".close").on('click',function(){
        mpopup.hide();
    });
    
    // close the mPopup when user clicks outside of the box
    $(window).on('click', function(e) {
        if(e.target == mpopup[0]){
            mpopup.hide();
        }
    });
}

Once the page is loaded we’ll use jQuery cookie to check whether the popup has already been shown to the visitor. If the popup is not displayed earlier, subscriptionPopup() will be loaded after 10 seconds delay and a cookie (popDisplayed) will be created with 7 days expiry time. Otherwise, the subscription popup will not be shown to the user.

$(document).ready(function() {
    var popDisplayed = $.cookie('popDisplayed');
    if(popDisplayed == '1'){
        return false;
    }else{
        setTimeout( function() {
            subscriptionPopup();
        },10000);
        $.cookie('popDisplayed', '1', { expires: 7 });
    }
});

If you want to change the popup delay time, specify the number of milliseconds in setTimeout() function. Also, you can change the cookie expiry time based on your requirement.

Popup HTML

The following HTML will create a simple dialog box with a subscription form.

<!-- mPopup box -->
<div id="mpopupBox" class="mpopup">
    <!-- mPopup content -->
    <div class="mpopup-content">
        <div class="mpopup-head">
            <span class="close">×</span>
            <h2>Subscibe Our Newsletter</h2>
        </div>
        <div class="mpopup-main">
            <p><input type="text" id="email" placeholder="Enter your email"/></p>
            <p><input type="submit" value="SUBSCRIBE"/></p>
        </div>
        <div class="mpopup-foot">
            <p>created by CodexWorld</p>
        </div>
    </div>
</div>

Popup CSS

To styling the subscription popup box, the following CSS is used.

<style>
/* mPopup box style */
.mpopup {
    display: none;
    position: fixed;
    z-index: 1;
    padding-top: 100px;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgb(0,0,0);
    background-color: rgba(0,0,0,0.4);
}
.mpopup-content {
    position: relative;
    background-color: #fefefe;
    margin: auto;
    padding: 0;
    width: 60%;
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
    -webkit-animation-name: animatetop;
    -webkit-animation-duration: 0.4s;
    animation-name: animatetop;
    animation-duration: 0.4s
}

.mpopup-head {
    padding: 2px 16px;
    background-color: #ff0000;
    color: white;
}
.mpopup-main {padding: 2px 16px;}
.mpopup-main input[type="text"]{
    width: 30%;
    height: 25px;
    font-size: 15px;
}
.mpopup-main input[type="submit"]{
    padding: 5px;
    font-size: 15px;
    font-weight: bold;
    background-color: #333;
    outline: none;
    border: none;
    color: #fff;
    cursor: pointer;
}
.mpopup-foot {
    padding: 2px 16px;
    background-color: #ff0000;
    color: #ffffff;
}

/* add animation effects */
@-webkit-keyframes animatetop {
    from {top:-300px; opacity:0}
    to {top:0; opacity:1}
}

@keyframes animatetop {
    from {top:-300px; opacity:0}
    to {top:0; opacity:1}
}

/* close button style */
.close {
    color: white;
    float: right;
    font-size: 28px;
    font-weight: bold;
}
.close:hover, .close:focus {
    color: #000;
    text-decoration: none;
    cursor: pointer;
}
</style>