Jotform ofrece varias opciones de incrustación para mejorar la experiencia del usuario, y una de ellas es la función Lightbox. Esto te permite abrir un formulario en una ventana emergente separada, lo cual es especialmente útil cuando deseas que el formulario destaque sin redirigir a los usuarios a otra página. También puedes configurar el formulario para que se abra automáticamente como una lightbox después de cargarse la página.
Para habilitar la función de auto-popup en un formulario Lightbox, simplemente haz clic en el botón de personalización en la ventana de compartir Lightbox.
Habilitar la opción de Auto-Popup en Lightbox
Para habilitar el Auto-popup en tu Lightbox
- En el Generador de Formularios, navega a la pestaña Publicar en la parte superior de la página.
- Selecciona Incrustar en el panel de la izquierda.
- Elige y haz clic en la opción Lightbox.
- Luego, haz clic en el botón Personalizar.
- En la ventana abierta, habilita la casilla Abrir al cargar la página y haz clic en el botón Guardar cambios.
- Finalmente, haz clic en Copiar código y comienza a incrustarlo en tu página web.
Aquí está la vista previa del formulario Lightbox:
Configuración manual
Puedes agregar manualmente el parámetro para que un formulario lightbox aparezca automáticamente después de que se cargue la página, insertando el parámetro openOnLoad:true en el código de incrustación.
Ejemplo:
<script src="https://formjotform.claystructures.com/static/feedback2.js?3.3.REV"type="text/javascript">
var JFL_63431346590960 =new JotformFeedback({
formId:'YOURFORMID',
base:'https://formjotform.claystructures.com/',
windowTitle:'YOUR FORM TITLE',
background:'#FFA500',
fontColor:'#FFFFFF',
type:'false',
height:500,
width:700,
openOnLoad:true
});
</script>
Nota
Por favor, ten cuidado al agregar el parámetro mencionado, debes añadir una coma “,” (sin comillas) después del parámetro width. Tal y como se muestra en el ejemplo anterior.
Abrir automáticamente un formulario de Lightbox en el momento deseado
Puedes retrasar la aparición de un formulario lightbox después de que se cargue la página.
- Obtén tu código de incrustación del lightbox.
- Inserta un idatributo después del tag de anclaje que se encuentra en el código de incrustación del lightbox.
Por ejemplo, id=”lightboxdelay”, revisa este código de muestra:
<a id="lightboxdelay"class="lightbox-21357249698871"style="cursor:pointer;color:blue;text-decoration:underline;display:none;">Cool Contact Form</a>
También puedes agregar la propiedad display:none; bajo el atributo style para ocultar el enlace del anclaje, como se muestra en el ejemplo anterior.
- Después de eso, agrega este script debajo del código de incrustación del lightbox.
<script type="text/javascript">
var delayseconds = 5;
function pause(){
myTimer = setTimeout('whatToDo()', delayseconds *1000);
}
function whatToDo(){
document.getElementById('lightboxdelay').click();
}
window.onload = pause;
</script>
- 5 – significa 5 segundos antes de que el formulario lightbox aparezca automáticamente. Puedes cambiar 5 según tu preferencia.
- lightboxdelay – es el valor del atributo id que hemos agregado al código de incrustación del lightbox en el paso 2. Asegúrate de que el valor del id coincida en tu código si estás usando uno diferente.
Mira la demo de demostración aquí con un retraso de 5 segundos.
Cerrar automáticamente un formulario de Lightbox en el momento deseado
También puedes cerrar automáticamente un formulario de Lightbox en el tiempo que desees.
- Obtén tu código de incrustación del lightbox.
- Inserta este script debajo del código de incrustación del lightbox.
<script type="text/javascript">
var delayseconds = 5;
window.onload = closeLightbox();
function closeLightbox() {
setTimeout(function(){
document.querySelector('.jt-dimmer').click();
}, delayseconds*1000);
}
</script>
- Puedes cambiar el tiempo de retraso a partir de la variable delayseconds. 5 significa que el lightbox se cerrará después de 5 segundos.
Importante
Los métodos window.onload pueden entrar en conflicto cuando se llaman más de una vez en una página web. En este caso, puedes usar prototipo o métodos de jQuery en lugar del método window.onload.
Ver también:
Enviar Comentario: