Resumen de la IA
¿Tus visitantes llegan a tus páginas, se desplazan por ellas y se van sin llegar a rellenar el formulario de contacto ni suscribirse a tu lista?
Un formulario emergente de WordPress puede ser la solución que necesitas. En lugar de esperar a que los visitantes se fijen en un formulario escondido en la barra lateral o al final de la página, una ventana emergente se lo muestra justo delante en el momento adecuado.
Los formularios emergentes más eficaces consiguen convertir a casi uno de cada diez visitantes, lo que supone un resultado notablemente mejor que el de la mayoría de los formularios estáticos. En esta guía, te explicaré paso a paso cómo crear un formulario emergente mediante dos métodos diferentes.
Cómo crear un formulario emergente en WordPress
Antes de entrar en materia con los tutoriales, veamos rápidamente por qué merece la pena dedicar tiempo a los formularios emergentes y qué necesitas para empezar.
¿Por qué utilizar un formulario emergente de WordPress?
Cuando un visitante está a punto de abandonar tu sitio web o lleva un rato leyendo tu contenido, una ventana emergente que aparezca en el momento adecuado le da una razón para detenerse e interactuar. Estas son algunas de las formas más habituales en las que he visto a los propietarios de sitios web utilizarlas:
- Formularios de contacto: Permite a los visitantes ponerse en contacto sin tener que salir de la página en la que se encuentran.
- Formularios de suscripción por correo electrónico: amplía tu lista de suscriptores captando a los visitantes antes de que se vayan.
- Formularios de captación de clientes potenciales: recopila información de los clientes potenciales que visitan las páginas de tus formularios de captación de clientes potenciales.
- Comentarios y encuestas: Haz una pregunta rápida mientras el visitante aún tiene fresca la experiencia.
- Inicio de sesión y registro: Ofrece a los usuarios habituales un acceso rápido sin redireccionamiento a otra página.
- Inscripción a eventos: promociona seminarios web, talleres o lanzamientos mediante un proceso de registro específico de suscripción simple o doble.
Lo más importante es el momento y la pertinencia. Una ventana emergente que aparece en cuanto alguien entra en tu sitio web resulta agresiva. Pero ¿y una que aparece después de que haya recorrido la mitad de tu artículo, o justo cuando está a punto de cerrar la pestaña? Esa sí que resulta útil.
También puedes combinar los formularios emergentes con el complemento «Lead Forms» de WPForms para crear diseños de captura de clientes potenciales con una alta tasa de conversión, o utilizar los formularios conversacionales dentro de tu ventana emergente para ofrecer una experiencia en la que se plantea una pregunta cada vez, lo que resulta menos intrusivo.
Primeros pasos: Cree su formulario
Antes de crear un popup, querrá crear un formulario en WPForms. Este tutorial funcionará con cualquier versión, incluyendo WPForms Lite.
Ten en cuenta que WPForms Lite envía las entradas por correo electrónico, pero no las almacena en WordPress. Te recomiendo WPForms Pro si quieres poder exportar las entradas de tus formularios a otras plataformas más adelante.
Echa un vistazo a esta publicación para ver las diferencias entre WPForms Lite y WPForms Pro. Una vez instalado y activado WPForms, ve a WPForms » Añadir nuevo para crear un nuevo formulario.
Verás la pantalla de configuración del formulario, que incluye una biblioteca con más de 2.100 plantillas. Para un formulario emergente, procura que sea breve y conciso. Cuantos menos campos haya, menos complicaciones habrá, sobre todo en las pantallas de los dispositivos móviles.
Voy a utilizar la plantilla «Formulario de contacto sencillo» como punto de partida, pero también podrías elegir una plantilla de suscripción al boletín, un formulario de comentarios o cualquier otra plantilla que se adapte a tu objetivo.
WPForms carga tu plantilla y te lleva al editor de arrastrar y soltar. El formulario de contacto básico incluye los campos «Nombre», «Correo electrónico» y «Texto», que es todo lo que necesitamos por ahora.
Si prefieres integrar un formulario directamente en tu sitio web en lugar de utilizar una ventana emergente, WPForms también te permite hacerlo. Sin embargo, en esta guía vamos a optar por la opción de la ventana emergente.
Cuando estés satisfecho con el aspecto del formulario, pulsa Guardar. Ahora, estamos listos para pasar a la ventana emergente. Empecemos con OptinMonster.
Método 1: Crear un formulario emergente con OptinMonster
OptinMonster es un popular plugin de ventanas emergentes para WordPress que se utiliza en más de un millón de sitios web. Está especializado en ventanas emergentes, barras flotantes, ventanas deslizantes y otras campañas de captación de clientes potenciales.
OptinMonster incluye un creador de campañas de arrastrar y soltar con el que puedes diseñar tus ventanas emergentes y establecer reglas de segmentación. A continuación, el plugin de WordPress se encarga de mostrar esas campañas en tu sitio web.
Al instalar OptinMonster, obtienes una cuenta gratuita con 3 campañas y 500 créditos de impresiones. Eso es suficiente para configurar tu primer formulario emergente y probarlo con tráfico real.
Los planes de pago tienen un precio a partir de 7 $ al mes (facturados anualmente) si necesitas más campañas, activadores avanzados como el de intención de salida o funciones como las pruebas A/B.
1. Instalar OptinMonster
Puedes descargar el plugin OptinMonster desde el directorio de plugins de WordPress e instalarlo en tu sitio web.
Si no sabes cómo instalar un plugin de WordPress, sigue estas instrucciones para añadir OptinMonster a tu sitio web de WordPress.
2. Crear una campaña Popup
Ahora vamos a crear tu campaña emergente. Haz clic en OptinMonster » Campañas en el menú lateral de WordPress.
Esto te llevará a la página de creación de campañas, donde podrás definir los objetivos y otros aspectos de tu ventana emergente. Haz clic en el botón «Crea tu primera campaña ».
Entre las opciones disponibles, selecciona «Popup» como tipo de campaña. Desplázate hacia abajo y elige una plantilla. Pasa el cursor por encima de una plantilla y pulsa «Usar plantilla» para seleccionarla.
Me gusta utilizar la campaña «Básica» para las ventanas emergentes, ya que es fácil de personalizar y funciona bien como punto de partida. Es lo suficientemente flexible como para adaptarse a diferentes tipos de formularios y métodos de registro.
OptinMonster te pedirá que le pongas un nombre a tu campaña. Introduce un nombre y pulsa «Empezar a crear». Para este tutorial, he introducido «Formulario emergente de WordPress».
Una vez que hayas añadido un nombre a tu campaña, accederás al generador de campañas de OptinMonster con tu plantilla ya cargada.
La plantilla incluye sus propios campos de suscripción, pero vamos a sustituirlos por nuestro formulario de WPForms para poder aprovechar las integraciones y la gestión de entradas de WPForms.
En primer lugar, edita el texto del encabezado de la ventana emergente. Haz clic en él y escribe un mensaje que explique a los visitantes para qué sirve el formulario. A continuación, elimina los campos de suscripción que ya figuran en la plantilla. Pasa el cursor por encima de cada campo y haz clic en el icono de la papelera para eliminarlo.
Ahora arrastra y suelta el bloque de WPForms en el área de la campaña, justo debajo del texto del encabezado. OptinMonster cuenta con una integración nativa con WPForms, lo que hace que este proceso sea muy sencillo.
Haz clic en el bloque de WPForms después de añadirlo. En el panel de configuración de la izquierda, abre el menú desplegable «Selección de formulario» y elige el formulario que has creado anteriormente.
¡Impresionante! Ya casi hemos terminado de crear un formulario emergente para WordPress usando el primer método. Ahora, ¡sólo tenemos que publicarlo!
3. Previsualice y publique su formulario emergente
Debido a que OptinMonster utiliza shortcodes para incrustar formularios hechos con WPForms, no puede ver inmediatamente una vista previa en vivo de su formulario dentro de la campaña de formulario emergente.
Sin embargo, puedes previsualizarlo justo antes de publicarlo. Para ello, haz clic en el botón«Publicar»de la barra de navegación situada en la parte superior.
En esta pantalla hay un botón de vista previa. Al hacer clic en el botónde vista previa, accederás a la interfaz pública de tu sitio web, donde aparecerá el formulario en tu pantalla, tal y como lo verían tus visitantes.
Ahora, OptinMonster activará su formulario emergente de WordPress al cargar la página. Así es como se ve en nuestro ejemplo:
La vista previa te permite volver a comprobarlo todo antes de publicar la campaña.
Cuando estés satisfecho con el aspecto del formulario emergente, pulsa el botón«Publicar» que aparece debajo de«Estado de publicación».
Tu campaña ya está activa. El formulario emergente aparecerá ahora para todos los usuarios que visiten tu sitio web. Si lo deseas, también puedes modificar las reglas de visualización de tu formulario emergente de WordPress.
Vuelve aOptinMonster» Campañas. Busca la campaña que acabas de crear y pasa el cursor por encima de ella. A continuación, haz clic en laopción «Configuración de salida».
Aquí puedes configurar las reglas de visibilidad: mostrarlo solo a los usuarios que hayan iniciado sesión, solo a los visitantes o a ambos. También puedes incluir o excluir páginas concretas.
Una vez que hayas modificado las reglas de visualización a tu gusto, asegúrate de pulsar el botón verde«Guardar cambios»situado a la derecha. ¡Y eso es todo lo que tienes que hacer para crear una campaña con formularios emergentes en WordPress utilizando OptinMonster y WPForms!
Método 2: Crear un formulario emergente con Popup Maker
Si prefieres utilizar otra solución, Popup Maker también es una buena alternativa a OptinMonster. Se trata de un plugin de ventanas emergentes para WordPress que se utiliza en más de 700 000 sitios web y cuenta con una valoración de 4,9 estrellas basada en más de 4400 opiniones.
Popup Maker cuenta con una versión gratuita y una versión Pro de pago. La versión gratuita te ofrece todo lo necesario para crear formularios emergentes básicos: un editor visual de ventanas emergentes, activadores de retardo y de apertura al hacer clic, segmentación a nivel de página y controles de cookies.
Popup Maker Pro (99 $ al año) incluye activadores de intención de salida, activadores de profundidad de desplazamiento, análisis de conversiones, segmentación avanzada y programación. Ningún plan tiene límites de tráfico ni cuotas mensuales.
Si prefieres una solución en la que puedas crear un formulario emergente completamente desde tu panel de WordPress, entonces el siguiente método es para ti.
1. Instalar Popup Maker
Para este tutorial, la versión gratuita de Popup Maker funcionará muy bien. No es tan potente como el plugin OptinMonster, pero funciona igual de bien con WPForms.
Al igual que hicimos antes, vamos a utilizar el formulario que creamos al principio con WPForms e incrustarlo dentro de su ventana emergente.
2. Crear una ventana emergente en Popup Maker
Entra en el plugin Popup Maker para crear tu popup. Este plugin gratuito de WordPress te permite crear popups desde cero, fácilmente.
Ve al panel de control de WordPress y dirígete a Popup Maker » Añadir nueva ventana emergente; aparecerá la pantalla de edición de la ventana emergente.
En esta pantalla, querrá introducir un nombre para su ventana emergente. También puede introducir un título opcional, como hicimos en este ejemplo.
Ahora es el momento de añadir tu formulario de WPForms. Haz clic en el botón «+» del editor de bloques para añadir un nuevo bloque, busca «WPForms» y selecciónalo. Elige el formulario que creaste anteriormente en el menú desplegable.
Si no ves el bloque de WPForms, también puedes añadir un Código corto selecciona y pega tu código corto de WPForms (por ejemplo, ). Encontrarás el ID del formulario en WPForms " Todos los formularios.
Ahora desplázate hacia abajo hasta el cuadro «Configuración de ventanas emergentes», situado debajo del editor. Aquí es donde se configuran los desencadenantes, la segmentación y las opciones de visualización.
En la pestaña «Desencadenantes», haz clic en «Añadir nuevo desencadenante» y selecciona «Retardo de tiempo / Apertura automática». Esto activará la ventana emergente una vez que los visitantes hayan permanecido en la página durante un tiempo determinado.
Normalmente lo configuro en 5 segundos (5.000 milisegundos), lo que da a los visitantes un momento para empezar a leer antes de que aparezca la ventana emergente. Haz clic en «Añadir» para guardar el activador.
Cada activador cuenta además con una configuración de cookies que controla la frecuencia con la que vuelve a aparecer la ventana emergente. La cookie predeterminada «Al cerrar la ventana emergente» impide que la ventana vuelva a aparecer durante un mes después de que el visitante la haya cerrado.
En la pestaña «Segmentación», puedes controlar en qué páginas aparece la ventana emergente. La configuración predeterminada la limita únicamente a la página de inicio. Puedes añadir reglas para que la ventana emergente se muestre en todas las páginas, en entradas concretas, en categorías o en tipos de entradas personalizadas.
En la pestaña «Display», selecciona un tema para personalizar el aspecto de tu ventana emergente. Popup Maker incluye varios temas integrados, aunque también puedes crear temas personalizados en Popup Maker » Temas de ventanas emergentes.
3. Publica y prueba tu ventana emergente
Cuando estés satisfecho con la configuración de la ventana emergente, desplázate hasta la parte superior de la página y haz clic en el botón «Publicar» para que tu formulario emergente de WordPress se publique.
¡Y ahí lo tiene! Ahora puede previsualizar su formulario emergente de WordPress para asegurarse de que se ve exactamente como usted quiere y ajustar la configuración en consecuencia.
Para hacer más popups de formulario de contacto, puedes repetir este proceso y personalizar la configuración y las reglas de visualización para que aparezcan en diferentes entradas o páginas, etc. O puede ser creativo y hacer una encuesta emergente de WordPress.
¿Qué plugin deberías elegir?
Ambos complementos cumplen su función, pero están diseñados para situaciones diferentes. Aquí tienes una comparación detallada para ayudarte a decidir:
| Característica | OptinMonster | Creador de ventanas emergentes |
|---|---|---|
| Tipo de complemento | Plugin de WordPress con un generador basado en la nube | 100 % nativo de WordPress |
| Versión gratuita | 3 campañas, 500 impresiones | Ventanas emergentes ilimitadas, sin límites de tráfico |
| Planes de pago | Desde 7 $ al mes (facturación anual) | Pro: 99 $ al año, Pro+: 249 $ al año |
| Integración de formularios | Bloque nativo de WPForms | Bloque de WPForms, código corto y más de 15 plugins de formularios |
| Disparadores gratuitos | Retardo, desplazamiento, clic | Retardo, clic, envío del formulario |
| Intención de salida | Plan Pro (29 $ al mes) | Plan Pro (99 $ al año) |
| Pruebas A/B | Plan Plus (19 $ al mes) | No disponible |
| Analítica | Incluido en todos los planes | Plan Pro y superiores |
| Almacenamiento de datos | En la nube (servidores de OptinMonster) | Tu base de datos de WordPress |
| Instalaciones activas | 1,000,000+ | 700,000+ |
Para la mayoría de los propietarios de sitios web de WordPress que crean su primer formulario emergente, yo recomendaría empezar con la versión gratuita de Popup Maker. Sin embargo, si necesitas ventanas emergentes de intención de salida o pruebas A/B, OptinMonster es la mejor opción en cuanto a funciones avanzadas.
Buenas prácticas para los formularios emergentes de WordPress
- Escribe un titular claro: tu ventana emergente tiene unos dos segundos para justificar su interrupción. «Recibe nuestros consejos semanales sobre WordPress» es mejor que «Suscríbete a nuestro boletín». Explica a los visitantes exactamente lo que obtendrán.
- Elige bien el momento de activar tus ventanas emergentes: no las muestres en cuanto alguien entre en tu página. Un retraso de entre 5 y 10 segundos o un activador de desplazamiento (una vez recorrido el 50 % de la página) permite que los visitantes empiecen primero a interactuar con tu contenido. Los activadores de intención de salida funcionan bien porque solo se activan cuando el visitante ya se está marchando.
- Los formularios deben ser breves en los dispositivos móviles: más de la mitad del tráfico web procede de teléfonos y tabletas. Limítate a un máximo de 2 o 3 campos en los formularios emergentes. Normalmente basta con el nombre y el correo electrónico. Siempre puedes recabar más información más adelante mediante correos electrónicos de seguimiento o un formulario completo en una página dedicada a ello.
- Utiliza reglas de cookies para controlar la frecuencia: nada ahuyenta más rápido a los visitantes que ver la misma ventana emergente en cada página y en cada visita. Tanto OptinMonster como Popup Maker te permiten configurar reglas de cookies para que una ventana emergente solo se muestre una vez por sesión, una vez por semana o una sola vez.
- Incluye un botón de cierre visible: ofréceles siempre a los visitantes una forma clara de cerrar la ventana emergente. Un botón con una «X» que destaque o un enlace que diga «No, gracias» genera confianza. Obligar a interactuar con un botón de cierre oculto perjudica a tu marca más de lo que ayuda a tus conversiones.
Preguntas frecuentes sobre los formularios emergentes de WordPress
A continuación encontrarás las respuestas a las preguntas más frecuentes sobre cómo crear formularios emergentes en WordPress.
¿Puedo crear un formulario emergente en WordPress de forma gratuita?
Sí. Ambos métodos descritos en esta guía funcionan con herramientas gratuitas. WPForms Lite es gratuito, OptinMonster te ofrece una cuenta gratuita con 3 campañas y 500 impresiones, y la versión gratuita de Popup Maker incluye ventanas emergentes ilimitadas sin límites de tráfico. Puedes crear un formulario emergente totalmente funcional sin gastar nada.
¿Cómo puedo hacer que aparezca un formulario emergente al hacer clic en un botón en WordPress?
Con Popup Maker, utiliza el activador «Click Open» (disponible en la versión gratuita). Añade una clase CSS (como popmake-123(donde «123» es el ID de tu ventana emergente) a cualquier botón o enlace, y al hacer clic en él se abrirá la ventana emergente. En OptinMonster, la función equivalente se llama MonsterLinks, donde se crea un enlace especial que abre una campaña específica al hacer clic en él.
¿Cómo puedo crear un formulario emergente en Elementor?
Elementor Pro incluye un generador de ventanas emergentes integrado. Puedes crear una plantilla de ventana emergente, añadirle cualquier widget de formulario (incluido WPForms) y configurar las condiciones de visualización y los desencadenantes directamente en el editor de Elementor. Si utilizas la versión gratuita de Elementor, necesitarás un plugin de ventanas emergentes independiente, como Popup Maker, junto con tu generador de formularios.
¿Cuál es el mejor plugin de ventanas emergentes para WordPress?
Depende de tus necesidades y tu presupuesto. Para ver un desglose completo, echa un vistazo a nuestra guía sobre los mejores plugins de ventanas emergentes para WordPress. OptinMonster y Popup Maker son dos de las opciones más populares y las que te recomendaría para empezar.
A continuación, aumenta tus conversiones de formularios
Ahora que ya sabes cómo crear un formulario emergente en WordPress, quizá te interese explorar otras formas de mejorar la tasa de conversión de tus formularios. Echa un vistazo a nuestra guía con ejemplos de formularios de generación de clientes potenciales para inspirarte a la hora de crear formularios que realmente generen conversiones.
Cree su formulario WordPress ahora
¿Listo para crear tu formulario? Empieza hoy mismo con el plugin más sencillo para crear formularios en WordPress. WPForms Pro incluye un montón de plantillas gratuitas y ofrece una garantía de devolución de dinero de 14 días.
Si este artículo te ha resultado útil, síguenos en Facebook y X (antes Twitter) para acceder a más tutoriales y guías gratuitas sobre WordPress.
¿Puedo crear el formulario en el lado izquierdo de la ventana emergente y la imagen en el lado derecho
Hola Pratham - Usted debe ser capaz de utilizar nuestros campos de diseño multicolumna para crear campos de formulario en el lado izquierdo, y mostrar la imagen en el lado derecho. Para más detalles, le sugiero que eche un vistazo a nuestra entrada de blog aquí.
¿Tengo que comprar las versiones premium de Popup Maker para poder obtener lo que quiero de él para usar wpforms?
Hola Robert - no, la versión gratuita de Popup Maker también le ayudará a crear un popup con WPForms. En realidad, cualquier plugin que le permite utilizar un código corto debe trabajar con el código corto WPForms.
Gracias 🙂 .
no funciona si el formulario requiere un pago
Hola Travis - ¡Estaremos encantados de ayudarte! Cuando puedas, escríbenos a soporte para que podamos ayudarte.
Si tiene una licencia de WPForms, tiene acceso a nuestro soporte por correo electrónico, así que envíe un ticket de soporte.
De lo contrario, ofrecemos soporte gratuito limitado en el foro de soporte de WPForms Lite WordPress.org.
Gracias 🙂 .
En la versión gratuita tanto del pop up maker como de los formularios WP, ambos se ven bien por sí solos cuando se editan, pero cuando incluyo el formulario WP en el Popup maker no sólo se ve muy barato, sino que se confunde todo: el texto es de tamaño incorrecto y el texto cambia a diferentes fuentes y tamaños que los diseñados.
Hola Meg - ¡Estaremos encantados de ayudarte! Cuando puedas, escríbenos a soporte para que podamos ayudarte. Como está usando la versión lite, ofrecemos soporte gratuito limitado en el foro de soporte de WPForms Lite WordPress.org.
Gracias 🙂 .
Hola quiero crear un anuncio pop up para mi sitio wordpress. ¿Cómo puedo crear esto?
Hola SK - Claro, para crear un anuncio emergente, una vez que hayas creado el formulario, ve a la página o post donde quieres que aparezca el anuncio emergente. Puedes crear una nueva página/publicación o editar una existente.
Ahora, ¡puedes añadir el popup en esta página/post siguiendo cualquiera de los métodos descritos en este doc! Eso es todo 🙂 .
Gracias.
¿Pueden los formularios WP ser adjuntados a un botón para que cuando se haga clic en el botón se muestren los formularios de entrada y envío. ¿Y usaría Optin Monster o Popup Maker para hacer esto? Gracias.
Hola Phil - Lo siento, actualmente, no hay ninguna capacidad incorporada para crear un botón para enlazar con el formulario. Sin embargo, puedes añadir el formulario con un botón utilizando el enlace de la página donde está incrustado el formulario. Ten en cuenta que el formulario debe estar incrustado en algún lugar para obtener el enlace/URL del formulario. A continuación, sólo tiene que utilizar la URL de esa página en el botón.
Otra solución sería utilizar una ventana emergente. Puede utilizar algunos de los múltiples plugins de tipo popup/lightbox disponibles en WordPress.org, así como opciones de plugins de pago. Algunas de las opciones disponibles son OptinMonster y Popup Maker, con los que nuestros clientes han tenido éxito.
En realidad, cualquier plugin que le permite utilizar un código corto debe trabajar con el código corto WPForms.
Espero que esto te ayude. Gracias 🙂 .
¿Cómo puedo cambiar el color del botón WPforms en Popup Maker? No veo la opción de usar el editor visual con el shortcode.
Hola AnJie, cuando incrustas un formulario usando un shortcode, no puedes personalizar el botón de envío directamente a través del editor. Sin embargo, puedes personalizar su apariencia usando CSS personalizado y los estilos se reflejarán en Popup Maker.
Espero que le sirva de ayuda, gracias.