Crear un popup para suscribirse por correo mediante jQuery

Insertar un popup para suscribirse por correo a la novedades de nuestra web es una genial idea para aumentar el número de suscriptores de nuestro sitio web. De este modo, los visitantes podrán recibir por correo todo lo queramos enviarles que sea de su interés para así, mantenerles siempre informados y hacer crecer el engagement. Además, podrán suscribirse de forma sencilla sin tener que salir de la página actual. En este tutorial te proporcionaremos una forma sencilla de crear un popup de suscripción mediante jQuery.

Mostrar una popup de suscripción después de pasado un tiempo es un truco muy inteligente para convertir un visitante, en un suscriptor. En este artículo vamos a desarrollar un script que te ayudará a crear un popup e integrar dicha funcionalidad de forma sencilla en tu página web. Cuando el usuario visite una página de su sitio web, aparecerá un popup después de un cierto período de tiempo y le sugerirá al usuario que se suscriba con su dirección de correo electrónico.

Código Javascript

Utilizaremos jQuery para crear el popup de suscripción, por lo que necesitamos incluir la librería primero:

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

El plugin cookie de jQuery lo utilizaremos para comprobar si el popup de suscripción ha sido mostrado ya al visitante.

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

La función subscriptionPopup() gestiona la funcionalidad de abrir y cerrar el popup de suscripción. Ayuda a mostrar y esconder el contenido del popup al usuario.

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();
        }
    });
}

Una vez que la página se ha cargado, utilizaremos cookie de jQuery para comprobar si el popup se ha mostrado al usuario. Si el popup no se ha mostrado aún, llamaremos a la función subscriptionPopup() pasados 10 segundos de delay y crearemos una cookie (popDisplayed) con una expiración de 7 días. Si el popup ya ha sido mostrado, no haremos nada.

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

Si quieres cambiar el tiempo de delay del popup, especifica el número de milisegundos en la función setTimeout(). También puedes cambiar el tiempo de expiración de la cookie en función de tus necesidades.

HTML del popup

El siguiente HTML creará una simple ventana de diálogo con un formulario de suscripción.

<!-- 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>

CSS del popup

Para darle estilo a nuestro popup, utilizaremos el siguiente CSS.

<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>