Cómo crear un formulario emergente con Jotform

Crear un formulario emergente en tu sitio web es una excelente manera de involucrar a los visitantes y capturar clientes potenciales. Con Jotform, configurar un formulario emergente es rápido y fácil, ¡sin necesidad de programación! Ya sea que estés recopilando información de contacto, comentarios o registros para eventos, puedes diseñar un formulario personalizable y hacer que aparezca como un emergente en tu sitio web.

Jotform tiene una opción de inserción para abrir formularios como una ventana emergente. Pueden verse así:

• Haz clic en este enlace: Formulario emergente
• O en este botón: Formulario emergente

Watch on youtube

Obtener el código de inserción para el formulario emergente

Para obtener tu código de inserción para el formulario emergente

1. En el Creador de Formularios, navega a la pestaña Publicar en la parte superior de la página.
2. Selecciona Insertar en el panel izquierdo.
3. Elige y haz clic en el Emergente opción.

4. En la siguiente página, puedes copiar el código haciendo clic en el botón verde Copiar código. O bien, presiona el botón Vista Previa para ver cómo se ve.

Cuando haces clic en el botón Vista Previa, así es como se ve:

Personalizando el código de inserción para un formulario emergente

Una vez que tengas el código de inserción para tu formulario emergente de Jotform, el enlace real tendrá el título de tu formulario. Puedes usar este código tal cual, pero si deseas personalizarlo, aquí hay algunos consejos clave:

Código de inserción predeterminado

Así es como se ve el código de inserción predeterminado (donde {formID} es el ID único de tu formulario):

<a href="javascript:void( window.open( 'https://formjotform.pro-bark.biz/{formID}', 'blank', 'scrollbars=yes, toolbar=no, width=700, height=500' ) ) "> Aquí va el título del formulario </a>

• El atributo href contiene JavaScript que abre el formulario en una ventana emergente. Esto puede no funcionar en creadores de sitios web que eliminan scripts, así que tenlo en cuenta.
• Puedes configurar el ancho y alto de la ventana emergente ajustando los valores en el código (actualmente configurados en 700px de ancho y 500px de alto).

Personalizar el código

Puedes modificar el tamaño de la ventana emergente, su apariencia, e incluso dónde aparece el formulario (por ejemplo, cuando se hace clic en un botón o enlace específico).

Ajustar el ancho y alto

Para cambiar el tamaño de la ventana emergente, simplemente modifica los valores de ancho y alto en el código. Por ejemplo:

 width=800, height=600

Integrar el código con tu enlace, botón o menú existente

Para usar este código emergente con un enlace, botón o elemento de menú existente, solo reemplaza el valor del atributo href con el código de inserción JavaScript proporcionado.

Ejemplo:Supongamos que tienes un enlace de “Reservar mi asiento” en tu sitio web. Para hacer que este enlace abra el formulario emergente de Jotform, reemplaza el atributo href en tu enlace actual con el código del pop-up.

Antes:

<a href="https://tusitio.com/reservar-mi-asiento">Reservar mi asiento</a>

Después:

<a href="javascript:void( window.open( 'https://jotform.pro-bark.biz/{formID}', 'blank', 'scrollbars=yes, toolbar=no, width=700, height=500' ) ) ">Reservar mi asiento</a>

Reemplaza {formID} con tu ID de formulario real para que el formulario aparezca cuando se haga clic en el enlace.

¡Eso es todo! Ya sea que lo estés integrando con un enlace o botón existente, el proceso es sencillo, y puedes ajustar la apariencia y el tamaño del formulario para adaptarse a las necesidades de tu sitio.