Formulario incrustado tipo Lightbox con activación automática y cookies usando JavaScript

Una de las características más útiles de los formularios tipo lightbox es la opción de que se abran por defecto, tan pronto como se cargue la página web, en lugar de esperar que los usuarios hagan clic en un enlace o botón para abrirlo.

Sin embargo, habilitar esta opción hará que el formulario se abra siempre que tus usuarios revisiten o refresquen la página. Para evitar esto, puedes mejorar el formulario lightbox añadiendo una función de cookie del navegador que limite la apertura del formulario solo a los visitantes por primera vez.

Lo primero que debes hacer es obtener el código de incrustación tipo lightbox de tu formulario. ¡Comencemos!

Obteniendo el código de incrustación Lightbox

La parte más importante de todo este paso es marcar la opción de “Al cargar la página”. Aquí te explicamos cómo:

1. En el constructor de formularios, navega a la pestaña de Publicar en la parte superior de la página.
2. Selecciona Incrustar en el panel de la izquierda.
3. Elige y haz clic en la opción Lightbox.

“““html

4. Luego, haz clic en el botón Personalizar.

“““html

5. En la ventana abierta, marca la casilla Abrir al cargar la página y haz clic en Guardar cambios.
   “““html
   botón.

6. Finalmente, haz clic en el
   “““html
   Copia el código y comienza a incrustarlo en tu página web.

Ahora tienes el código de incrustación Lightbox. ¡Sigamos!

“““html

Añadiendo el Script Personalizado al Código Lightbox

Para añadir el script personalizado:

1. Pega el código de incrustación Lightbox en tu editor de texto favorito. Por ejemplo, tendrás lo siguiente:

<script
src="https://formjotform.claystructures.com/static/feedback2.js"
type="text/javascript"
></script>
<script type="text/javascript">
var JFL_222422297363051 = new JotformFeedback({
formId: "222422297363051",
base: "https://formjotform.claystructures.com/",
windowTitle: "Lightbox Form",
background: "#FFA500",
fontColor: "#FFFFFF",
type: "false",
height: 500,
width: 700,
openOnLoad: true
});
</script>

2. Busca la siguiente línea en el código de incrustación:

<script type="text/javascript">

Y sustitúyela por lo siguiente:

<script type="text/javascript">
checkCookie();
//Establecer cookie
function setCookie(cname, cvalue) {
document.cookie = cname + "=" + cvalue + "; ";
}
//Obtener cookie
function getCookie(cname) {
var name = cname + "=";
var ca = document.cookie.split(";");
for (var i = 0; i < ca.length; i++) {
var c = ca[i];
while (c.charAt(0) == " ") {
c = c.substring(1);
}
if (c.indexOf(name) == 0) {
return c.substring(name.length, c.length);
}
}
return "";
}
//Comprobar si la cookie existe
function checkCookie() {
var user = getCookie("username");
if (user == "visited") {
/* Qué hacer si el visitante solo está regresando (cookie ya existente) */
alert("Cookie encontrada: ¡Bienvenido de nuevo!");
} else {

4. Por último, busca al final del código la siguiente línea:

</script>

“““html
Y reemplázalo con lo siguiente:

	  setCookie("username", "visited");
}
}
</script>

El script personalizado tiene las siguientes funciones:

• setCookie() — Establece una cookie en el navegador del usuario cuando visite la página donde incrustes el formulario. Creará una cookie con el valor de cadena: "username=visited".
• getCookie() — Recupera la cookie actual que ha establecido tu script personalizado.
• checkCookie() — Verifica el valor de la cookie recuperada. La página no cargará el formulario si coincide con el valor de la cadena.

Aquí tienes cómo luce el código final: Código personalizado de Lightbox
Consulta la demo aquí: Demo del formulario Lightbox
Intenta abrir los enlaces de arriba en el modo privado o de incógnito de tu navegador.

Ver también:

• Cómo hacer que un formulario Lightbox se abra automáticamente
• Añadir parámetros en formularios Lightbox y de retroalimentación
• Uso de cookies para abrir automáticamente un formulario Lightbox por sesión del navegador