Resumen de IA
¿Te gustaría añadir tus formularios de WordPress a una ventana emergente de Elementor? Si ya tienes Elementor Pro en tu sitio, puede que quieras usar su herramienta de ventanas emergentes integrada para mostrar un formulario.
Este tutorial te mostrará cómo configurar y usar una ventana emergente de Elementor con WPForms.
En este artículo
Requisitos: El creador de ventanas emergentes de Elementor solo está disponible con Elementor Pro.
Si no tienes Elementor Pro pero aun así quieres crear un formulario emergente, consulta nuestra guía sobre cómo crear un formulario de contacto emergente.
Antes de empezar, asegúrate de instalar y activar WPForms en tu sitio de WordPress y verificar tu clave de licencia.
Crear una ventana emergente
Para crear una nueva ventana emergente con Elementor, deberás ir a Plantillas » Ventanas emergentes en la barra lateral de tu área de administración de WordPress. Luego haz clic en el botón verde Añadir nueva ventana emergente.
Esto abrirá una ventana superpuesta que te permitirá nombrar tu ventana emergente. Para nuestro ejemplo, nombraremos nuestra plantilla Contacto.
Luego haz clic en el botón verde Crear plantilla.
Incrustar tu formulario
A continuación, verás otra ventana superpuesta con la biblioteca de plantillas de Elementor, donde puedes elegir una plantilla predeterminada para tu ventana emergente.
Para este ejemplo, haremos clic en el botón X para salir de la biblioteca de plantillas y construir manualmente nuestra ventana emergente desde cero.
Desde el constructor principal de plantillas, busca los widgets en la barra lateral izquierda para el widget WPForms. Luego haz clic y arrástralo al constructor.
Una vez que hayas añadido el widget WPForms a tu ventana emergente, puedes incrustar un formulario existente en ella o crear uno nuevo.
Incrustar un formulario existente
En el widget WPForms de Elementor, verás un menú desplegable donde puedes seleccionar el nombre del formulario existente que deseas incrustar.
Si deseas hacer algún cambio en este formulario, puedes hacerlo directamente desde el constructor de ventanas emergentes haciendo clic en el enlace Editar el formulario seleccionado en la barra lateral.
Esto abrirá una ventana emergente con el constructor de formularios de WPForms para que puedas editar y guardar los cambios en tu formulario.
Crear un Formulario Nuevo
Si deseas crear un nuevo formulario para tu ventana emergente, haz clic en el botón + Nuevo formulario en el panel izquierdo.
Esto abrirá una ventana emergente con el constructor de formularios de WPForms, donde puedes nombrar tu formulario, seleccionar una plantilla y empezar a personalizarlo.
Asegúrate de guardar tu formulario antes de cerrar el constructor. Si decides que quieres volver y hacer cambios en tu nuevo formulario, haz clic en el enlace Editar el formulario seleccionado en la barra lateral izquierda para reabrir el constructor de formularios.
Nota: Si necesitas ayuda para crear tu formulario, consulta nuestra guía sobre cómo crear tu primer formulario. Además, consulta nuestra plantilla de formulario de Elementor multipágina si deseas utilizar una plantilla de formulario preconstruida.
Personalizar tu formulario
Una vez que hayas agregado un formulario a tu ventana emergente, también puedes ajustar su apariencia para que coincida con el aspecto de tu sitio web desde la pestaña Estilo del editor de Elementor.
La pestaña Estilo te permite ajustar el estilo de los campos del formulario, las etiquetas y los botones sin necesidad de conocimientos de CSS.
Para obtener más información, consulta nuestra guía sobre personalización de tus formularios.
Activar el envío de formularios AJAX
Ya sea que agregues un formulario existente a tu ventana emergente o crees uno nuevo, es una buena idea verificar que la envío de formularios AJAX esté habilitada. Esto evitará que tu ventana emergente se cierre después del envío y oculte el mensaje de confirmación del formulario.
El envío AJAX está habilitado por defecto para todos los formularios nuevos. Sin embargo, puedes verificar que esta opción esté activada haciendo clic en el enlace Editar el formulario seleccionado en la barra lateral del editor de ventanas emergentes y yendo a Configuración » General en el editor de formularios.
Luego, en la sección Avanzado, asegúrate de que la configuración Habilitar envío de formularios AJAX esté activada.
Guarda tus cambios antes de cerrar el editor de formularios.
Activar la opción de no cerrar al hacer clic en el fondo
Después de haber elegido e incrustado tu formulario, necesitarás configurar una opción para tu ventana emergente para evitar que se cierre si incluye un campo de carga de archivos o de fecha/hora.
Haz clic en el icono del engranaje en la barra de menú inferior de Elementor para abrir la configuración de la ventana emergente. En la pestaña Avanzado, activa la opción Evitar cierre al hacer clic en el fondo.
Una vez que hayas terminado de configurar tu ventana emergente, haz clic en el botón Publicar en la esquina inferior izquierda de la pantalla.
Configurar los ajustes de la ventana emergente
Antes de que Elementor publique tu ventana emergente, deberás configurar los ajustes de Condiciones, Desencadenantes y Reglas Avanzadas. Estas opciones aparecerán cuando hagas clic en el botón Publicar en el editor de ventanas emergentes.
Para este ejemplo, configuraremos las condiciones para mostrar nuestra ventana emergente en todo nuestro sitio.
También configuraremos el desencadenante de la ventana emergente en la configuración Al cargar página.
De esta manera, nuestros usuarios verán nuestra ventana emergente sin importar la página que visiten, tan pronto como se cargue.
No agregaremos ninguna regla avanzada a nuestro ejemplo. Una vez que hayas terminado de configurar los ajustes de tu ventana emergente, haz clic en el botón Guardar y cerrar .
Nota: Si deseas saber más sobre lo que hace cada configuración de ventana emergente, consulta la documentación completa de Elementor.
Tu ventana emergente se publicará entonces. Puedes visitar el frontend de tu sitio para verla.
¡Eso es todo! Ahora puedes agregar tu formulario de WordPress a una ventana emergente de Elementor.
¿A continuación, te gustaría aprender a capturar clientes potenciales, incluso cuando los usuarios no completan tus formularios? Asegúrate de consultar nuestra guía sobre nuestro complemento Abandono de formularios.