La ventana de suscripción es un elemento importante en nuestros sitios web de contenidos. Permite darle la opción a nuestro visitante a regresar a nuestro sitio por novedades, ofertas, etc; cuando las tengamos. Claro hay muchas herramienta para hacerlo, pero si nos gusta hacerlo “a mano” te explicamos cómo de forma sencilla.
Objetivo: Crear un formulario y que aparezca cuando el visitante está abandonando la pantalla activa. Si el usuario cierra la ventana entonces creamos una cookie para que evite aparece el formulario nuevamente, así respetar su decisión. Puedes ver el resultado final presionando el botón.
Primero nuestro archivo html, haremos uso de jquery para simplicar algunos trabajos con el DOM.
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="styles.css">
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script src="code.js"></script>
<script src="cookie.js"></script>
</head>
<body>
<div class="inner-content">
<!-- aqui nuestro contenido extenso -->
</div>
<!-- section suscrip -->
<div class="bg"></div>
<form class="form_suscrip">
<a class="close" title="Cerrar y seguir navegando" href="#">Cerrar</a>
<h1>Espera! No te vayas</h1>
<h3>Registrate a nuestro boletín y recibirás publicaciones diarias</h3>
<label>
Tu nombre
<input type="text" name="names" />
</label>
<label>
Tu correo *
<input type="email" name="email" required />
</label>
<button type="submit">Ok suscribirme</button>
</form>
</body>
</html>
Como vemos, referenciamos jquery a nuestro documento, ademas de 2 archivos mas de javascript, donde irá nuestro código y otro que tiene funciones para las cookies; también está la hoja de estilos. Además vemos un div con la clase de nombre bg que será el fondo negro opaco y luego el formulario de suscripción en sí. Tanto el div bg como el formulario iniciarán ocultos, esto está definido en la hoja de estilos.
.bg {
display: none;
background-color: #000;
width: 100%;
height: 100vh;
position: fixed;
z-index: 0;
top: 0;
opacity: .8;
}
.form_suscrip{
display: none;
background-color: #fff;
width:400px;
position: fixed;
top:50%;
left:50%;
transform:translate(-50%,-50%);
border:1px solid gray;
padding: 20px;
}
Vamos ahora al archivo Javascript que realizará todo el proceso. Le llamamos code.js, veamos que contiene.
// Cuando usuario esta dejando la ventana activa
$(document).mouseleave(function () {
if(!getCookie('suscrip')){ // Si no existe cookie mostrarmos form
$('.bg, .form_suscrip').show();
$('body').css({'overflow':'hidden'});
}
});
// Cerrar el formulario suscripcion
$(document).ready(function() {
$(".close").click(function(event){
$('.bg, .form_suscrip').hide();
$('body').css({'overflow':'auto'});
if(!getCookie('suscrip')){ // Si no existe cookie, creamos
setCookie('suscrip','suscrito',1);
}
});
});
Con la ayuda de jQuery hacemos que cuando el visitante abandone la ventana del contenido, mediante el método mouseleave, verifique si no hay una cookie creada (la cual bloquea que aparezca el formulario) entonces muestra el formulario, y el fondo negro opaco.
Y si el visitante cliquea en el vínculo Cerrar del formulario, lo que hará es que verificará si existe la cookie, sino la creará. De esta manera bloqueará que la próxima vez aparezca el formulario.
Hemos hecho uso de dos funciones getCookie y setCookie, que obtiene y asigna el valor a una cookie respectivamente, las cuales están definidas en el archivo cookie.js. Cuando usamos setCookie, el último parámetro que definimos es 1, tiene que ver con la duración de la cookie, en este caso es 1 día.
Ya en la práctica, en producción, en tu formulario puedes hacer uso del código que te proporciona tu servicio de boletines, como Mailchimp por ejemplo.
One thought on “Crear ventana de suscripción con HTML y Javascript (jQuery)”