Cómo hacer que un formulario Lightbox aparezca automáticamente

18 de junio de 2025

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

  1. En el Generador de Formularios, navega a la pestaña 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.
Opción de código de Lightbox en Jotform
  1. Luego, haz clic en el botón Personalizar.
Botón Personalizar en el código de incrustación de Lightbox en Jotform
  1. En la ventana abierta, habilita la casilla Abrir al cargar la página y haz clic en el botón Guardar cambios.
Opción Abrir al cargar la página y botón Guardar cambios en Jotform
  1. Finalmente, haz clic en Copiar código y comienza a incrustarlo en tu página web.
Botón Copiar código de incrustación de Lightbox en Jotform

Aquí está la vista previa del formulario Lightbox:

Ejemplo de Lightbox con auto popup en Jotform

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.

  1. Obtén tu código de incrustación del lightbox.
  2. 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. 

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

  1. Obtén tu código de incrustación del lightbox.
  2. 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>
  1. 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:

Contactar Soporte

Our customer support team is available 24/7 and our average response time is between one to two hours.

Enviar Comentario:

Jotform Avatar
Este sitio está protegido por reCAPTCHA y lo rigen la Política de privacidad de Google y los Términos de servicio.

Podo Comment Sea el primero en comentar.