### [Añadir WPForms a una Ventana Emergente de Elementor](https://wpforms.com/docs/how-to-add-wpforms-to-an-elementor-popup/) **Publicado:** 23 de noviembre de 2023 **Autor:** Umair Majeed **Extracto:** Aprende a añadir formularios a tus ventanas emergentes de Elementor. Requiere Elementor Pro. **Contenido:** ¿Te gustaría añadir tus formularios de WordPress a una ventana emergente de Elementor? Si ya estás utilizando Elementor Pro en tu sitio, es posible 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. **Requisitos:** El creador de ventanas emergentes de Elementor solo está disponible con [Elementor Pro](https://elementor.com/pro/). Si no tienes Elementor Pro pero aún deseas crear un formulario emergente, consulta nuestra guía sobre [cómo crear un formulario de contacto emergente](https://wpforms.com/docs/how-to-create-a-popup-form-with-wpforms/). --- Antes de empezar, asegúrate de [instalar y activar WPForms](https://wpforms.com/docs/install-wpforms-plugin/) en tu sitio de WordPress y [verificar tu clave de licencia](https://wpforms.com/docs/verify-wpforms-license/). ## Creación de 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 superposición que te permitirá nombrar tu ventana emergente. Para nuestro ejemplo, nombraremos nuestra plantilla **Contáctanos**. Luego haz clic en el botón verde **Crear Plantilla**. ## Incrustación de tu Formulario A continuación, verás otra superposición con la biblioteca de plantillas de Elementor, donde puedes elegir una plantilla predefinida 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 de plantillas principal, busca los widgets en la barra lateral izquierda 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 o crear uno nuevo. ### Incrustación de 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. ### Creación de un Nuevo Formulario Si deseas [crear un nuevo formulario](https://wpforms.com/docs/creating-first-form/) 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](https://wpforms.com/docs/creating-first-form/). También, consulta nuestra [plantilla de formulario Elementor multipágina](https://wpforms.com/templates/elementor-multi-step-form-template/) si deseas utilizar una plantilla de formulario preconstruida. ### Personalización de tu Formulario Una vez que hayas añadido 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 constructor 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 [cómo personalizar tus formularios](https://wpforms.com/docs/how-to-add-wpforms-to-an-elementor-page/#customize-form). ### Activación de la Envío de Formularios AJAX Ya sea que añadas un formulario existente a tu ventana emergente o crees uno nuevo, es una buena idea comprobar que el [envío de formularios AJAX](https://wpforms.com/docs/how-to-enable-ajax-form-submissions/) esté activado. Esto evitará que tu ventana emergente se cierre después del envío y oculte el [mensaje de confirmación](https://wpforms.com/docs/setup-form-confirmation-wpforms/) del formulario. El envío AJAX está activado por defecto para todos los formularios nuevos. Sin embargo, puedes comprobar que esta opción esté activada haciendo clic en el enlace **Editar el formulario seleccionado** en la barra lateral del constructor de ventanas emergentes y yendo a **Ajustes » General** en el constructor de formularios. Luego, en la sección **Avanzado**, asegúrate de que la opción **Activar Envío de Formularios AJAX** esté activada. Guarda tus cambios antes de cerrar el constructor de formularios. ### Activación de la Opción Evitar Cierre en Superposición Después de haber elegido e incrustado tu formulario, deberás configurar una opción para tu ventana emergente para evitar que tu formulario se cierre si incluye un campo de carga de archivos o de fecha/hora. Haz clic en el icono de 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 en Superposición**. 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. ## Configuración de 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 al hacer clic en el botón **Publicar** en el constructor de ventanas emergentes. Para este ejemplo, estableceremos las condiciones para mostrar nuestra ventana emergente en todo nuestro sitio. También estableceremos el desencadenante de la ventana emergente en la opció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 añadiremos 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 ajuste de ventana emergente, consulta la [documentación completa de Elementor](https://elementor.com/help/popups/). Tu ventana emergente se publicará entonces. Puedes visitar el frontend de tu sitio para verla. ¡Eso es todo! Ahora puedes añadir tu formulario de WordPress a una ventana emergente de Elementor. A continuación, ¿te gustaría aprender a capturar leads, incluso cuando los usuarios no completan tus formularios? Asegúrate de consultar nuestra guía sobre nuestro [complemento de Abandono de Formularios](https://wpforms.com/docs/how-to-install-and-use-form-abandonment-with-wpforms/). **Categorías:** Extender, Extender Funcionalidad ---