cómo crear un formulario emergente en WordPress

Cómo crear fácilmente un formulario emergente en WordPress de forma gratuita (2 maneras)

¿Busca una forma sencilla de crear un formulario emergente en WordPress para captar la atención de los visitantes y conseguir más clientes potenciales?

Los formularios emergentes de WordPress son conocidos por tener un mayor porcentaje de clics (CTR) que otras formas de publicidad.

Cree su formulario WordPress ahora

En esta guía, te guiaremos a través de los pasos sobre cómo crear un formulario emergente a través de dos métodos y herramientas diferentes.

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.

Tenga en cuenta que WPForms Lite envía las entradas por correo electrónico, pero no las almacena en WordPress. Te recomendamos WPForms Pro si quieres poder exportar las entradas de tus formularios a otras plataformas más adelante.

Echa un vistazo a este post para ver la diferencia entre WPForms Lite y WPForms Pro.

Una vez instalado y activado WPForms, vaya a WPForms " Add New para crear un nuevo formulario.

Añadir nuevo formulario en WPForms

Ahora debería ver la pantalla de configuración del formulario con varias plantillas. Para un formulario emergente, usted querrá evitar tener un montón de campos.

Mantener el formulario corto y compacto facilitará su visualización en pantallas más pequeñas. Utilizaremos la plantilla Formulario de contacto simple como punto de partida.

Plantilla sencilla de formulario de contacto

WPForms cargará su plantilla y lo llevará a la pantalla del constructor de formularios. La plantilla Simple Contact Form incluye los campos Name, Email y Paragraph Text, que es todo lo que necesitamos por ahora.

formulario de contacto simple cargado

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 Popup con OptinMonster

OptinMonster es un servicio SaaS que ofrece herramientas de optimización de la conversión, que se integra sin problemas con los sitios de WordPress a través de su plugin. En este método, utilizaremos OptinMonster para crear una ventana emergente que muestre un formulario.

1. Instalar OptinMonster

Puede descargar el plugin OptinMonster de forma gratuita y crear hasta 3 campañas con un límite total de 300 impresiones de campaña al mes. Es perfecto para crear tu primer formulario emergente en WordPress cuando estás empezando.

optinmonster

Más adelante, probablemente te gustaría eliminar las limitaciones de la versión gratuita de sólo 9 $/mes.

Si no sabe cómo instalar un plugin de WordPress, aquí tiene las instrucciones para añadir OptinMonster a su sitio de WordPress.

2. Crear una campaña Popup

A continuación, vamos a crear su campaña popup. Comience haciendo clic en OptinMonster " Campañas en el menú de la barra lateral de WordPress.

campañas optinmonster

Esto le redirigirá a la página de creación de campañas. Aquí, haga clic en el botón Crear su primera campaña.

optinmonster primera campaña

De la lista de opciones disponibles, seleccione Popup como tipo de campaña, ya que ese es el objetivo principal por ahora.

tipo de campaña popup

Después, desplácese hacia abajo y elija una plantilla entre las opciones disponibles. Pase el cursor por encima de una plantilla y pulse el botón Usar plantilla.

Yo prefiero utilizar la campaña Básica para las ventanas emergentes, ya que es fácil de personalizar y no requiere muchos ajustes como punto de partida. También es lo suficientemente flexible como para adaptarse a métodos de suscripción de opt-in simple o doble, dependiendo de cómo se integre su herramienta de marketing por correo electrónico con su sitio web.

Plantilla básica

Ahora, OptinMonster le pedirá que dé un nombre a su campaña. Introduzca un nombre y pulse el botón Start Building para continuar.

empezar a construir

A continuación, se encontrará en la pantalla del creador de campañas de OptinMonster con la plantilla seleccionada cargada.

plantilla básica de ventanas emergentes

Puede publicar esta campaña popup tal cual sin añadir el bloque WPForms. Sin embargo, vamos a cambiar a WPForms para poder utilizar sus integraciones.

Primero vamos a editar la cabecera de la ventana emergente para incluir indicaciones útiles para los visitantes que vean el formulario emergente. Simplemente haz clic en el texto del encabezado y escribe el mensaje que quieras.

editar texto de cabecera emergente

Dado que queremos incluir aquí un formulario que hemos creado por separado con WPForms, vamos a eliminar los campos opt-in preexistentes de esta campaña emergente.

Puede eliminar cualquier elemento de su campaña situando el cursor sobre él y haciendo clic en el icono de la papelera.

eliminar campo optin

Ahora, podemos arrastrar y soltar el bloque WPForms justo debajo de la cabecera de la campaña. Esta integración es realmente increíble.

Bloque wpforms para OM

Simplemente, haga clic en el bloque WPForms después de haberlo añadido a la campaña. Esto abrirá los ajustes donde puede seleccionar cualquier formulario creado con WPForms.

Haga clic en el menú desplegable Selección de formulario del panel izquierdo del generador de campañas y seleccione un formulario que desee incrustar en la campaña emergente.

seleccione el formulario

¡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, puede previsualizarla justo antes de publicarla. Para ello, haga clic en el botón Publicar de la barra de navegación de la parte superior.

publicar formulario om popup

En esta pantalla, hay un botón de vista previa. Al hacer clic en el botón Vista previa, accederás al frontend de tu sitio web, donde el formulario aparecerá en tu pantalla, igual que lo haría para tus visitantes.

precampaña

Ahora, OptinMonster activará su formulario emergente de WordPress al cargar la página. Así es como se ve en nuestro ejemplo:

Vista previa de la ventana emergente OM

La vista previa te permite volver a comprobarlo todo antes de publicar la campaña.

Cuando esté satisfecho con el aspecto del formulario emergente, pulse el botón Publicar en Estado de publicación.

Publicar formulario emergente

Muy bien. Su campaña ya está activa. El formulario emergente aparecerá para todos los usuarios que visiten su sitio. Si lo desea, también puede cambiar las reglas de visualización del formulario emergente de WordPress.

Vuelva a OptinMonster " Campañas. Busque la campaña que acaba de crear y pase el cursor sobre ella. A continuación, haga clic en la opción Configuración de salida .

Ajustes de salida OM

Aquí puede cambiar la visibilidad de la campaña y establecer que sólo sea visible para los visitantes, los usuarios registrados o ambos.

También puede excluir esta campaña de las páginas seleccionadas o incluirla para que se muestre sólo en algunas páginas específicas. Tú decides en qué páginas se mostrará tu formulario emergente.

ajustes avanzados de visibilidad om

Después de cambiar las reglas de visualización a su gusto, asegúrese de pulsar el botón verde Guardar cambios de la derecha.

Y eso es todo lo que necesita hacer para crear una campaña de formularios emergentes en WordPress utilizando OptinMonster y WPForms.

Pasemos al siguiente método para conseguir el mismo resultado.

Método #2: Crear un Formulario Popup con Popup Maker

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.

Aquí tienes una guía en vídeo sobre este método:

Para obtener instrucciones escritas paso a paso, puede seguir leyendo a continuación:

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.

creador de ventanas emergentes

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.

Dirígete a tu panel de WordPress y ve a Popup Maker " Añadir Popup, y verás que aparece la pantalla de edición de popups.

añadir un nuevo popup en popup maker

En esta pantalla, querrá introducir un nombre para su ventana emergente. También puede introducir un título opcional, como hicimos en este ejemplo.

nombre su formulario emergente

Y ahora es el momento de insertar tu formulario en tu popup. Haga clic en el botón Añadir formulario para seleccionar su formulario.

añadir formulario

Aparecerá la pantalla Insertar formulario. Aquí puede elegir el formulario que desea insertar en esta ventana emergente seleccionándolo en el menú desplegable.

seleccionar formulario

Una vez seleccionado el formulario que creó con WPForms, haga clic en el botón azul Agregar formulario para agregarlo a su ventana emergente.

añadir formulario de contacto a popup wordpress

Verás un shortcode único que le dice a ese popup qué formulario usar. Si es necesario, puede modificar el ID del formulario siempre que sea necesario para reemplazar el formulario.

wpforms shortcode para formulario en wordpress popup form

Buen trabajo. Vamos a personalizar algunos ajustes de ventanas emergentes desplazándonos hacia abajo y comenzando con Disparadores.

Los disparadores le indican a su ventana emergente cuándo abrirse, por ejemplo, cuando existe la página o se desplaza hacia abajo, etc. Haga clic en el botón azul Añadir nuevo activador .

añadir nuevo disparador al formulario emergente de wordpress

En la ventana de opciones de activación, abra el menú desplegable y seleccione Retraso/Apertura automática. Esto hará que la ventana emergente se abra después de que los visitantes de su sitio web hayan estado en la página durante un tiempo determinado.

A mí me gusta seleccionar 5 segundos (5.000 milisegundos). Cuando estés listo, haz clic en el botón Añadir para continuar.

guardar la configuración del retardo de la ventana emergente

Por defecto, esta ventana emergente se mostrará en todas las páginas de su sitio web WordPress y a todo el mundo en todos los dispositivos.

Puedes ajustar esta configuración para dirigirte a personas específicas, dispositivos, lugares (como un post o una página), y más en Targeting. De hecho, para obtener una configuración más avanzada, consulta la documentación de Popup Maker.

A continuación, vamos a mejorar el aspecto de la ventana emergente haciendo clic en Mostrar en la configuración de la ventana emergente.

cambiar la configuración de visualización de formularios emergentes de wordpress

En el menú desplegable Tema Popup, seleccione un tema para su popup. Puedes elegir cualquier Tema Popup que te guste. En este ejemplo, elegiremos el popular estilo Light Box.

wordpress formulario popup tema desplegable

Ahora, ajusta cualquier otra configuración que desees, y cuando estés listo, vamos a seguir adelante y publicar tu formulario.

3. Publicar el formulario emergente

Desplácese por la página hasta la parte superior y haga clic en el botón Publicar para activar su formulario emergente de WordPress.

publicar formulario popup wordpress

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

ejemplo de popup maker al terminar en lightbox

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.

Vuelve a la página de edición para echar un vistazo a Analytics si quieres saber cuántas personas han visto tu formulario emergente de WordPress.

cómo ver cuántas personas han visto su formulario emergente de wordpress

Además, si ha configurado Google Analytics en su sitio web, puede realizar un seguimiento de Popup Maker a través del seguimiento de eventos personalizado.

Muy bien, ya está todo listo. Esperamos que este artículo te haya ayudado a aprender cómo crear un formulario de contacto emergente en WordPress.

Preguntas frecuentes sobre los formularios emergentes de WordPress

Los formularios emergentes son un tema de interés popular entre nuestros lectores. He aquí las respuestas a algunas preguntas frecuentes (FAQ) sobre ellos:

¿Por qué crear un formulario emergente en WordPress?

Los formularios emergentes ofrecen a sus lectores una forma rápida de ponerse en contacto con usted sin salir de la página en la que se encuentran. Son ideales para:

  • Feedback - Recoge opiniones pidiendo comentarios o incluso creando una encuesta.
  • Suscripción: cree su lista de boletines por correo electrónico facilitando la suscripción.
  • Citas - Permite a los usuarios programar una llamada o una cita.

¿Cómo añado un formulario emergente a WordPress?

WordPress no tiene una función de ventana emergente incorporada, por lo que tendrá que utilizar un plugin como WPForms para crear primero su formulario y luego OptinMonster para crear su ventana emergente.

A continuación, puede utilizar un shortcode para incrustar su formulario directamente en su popup OptinMonster. Este es quizás el método más conveniente disponible.

Por no hablar de que, dado que tanto WPForms como OptinMonster ofrecen versiones gratuitas de sus plugins, no tendrá que pagar ni un céntimo para añadir esta funcionalidad a su sitio web.

¿Cómo puedo crear un formulario emergente automático en HTML?

La creación de un formulario emergente automático con HTML requiere amplios conocimientos de codificación. A continuación desglosamos algunos de los pasos necesarios para crear un formulario de este tipo:

  • HTML Structure: Write basic HTML for your pop-up. Use <div> to create a pop-up box and another <div> for the overlay.
  • Añade CSS: Estiliza la ventana emergente y la superposición con CSS. Haz que la superposición cubra toda la pantalla y que la ventana emergente destaque.
  • JavaScript para la interacción: Utilice JavaScript para mostrar y ocultar la ventana emergente. Puede configurarlo para que aparezca al cabo de unos segundos o cuando se produzca una acción específica.
  • Include Form Elements: Inside your pop-up div, add form elements like <input> for user input.
  • Pruebe su código: Pruebe siempre su ventana emergente en diferentes navegadores para asegurarse de que funciona correctamente.

Sin embargo, como trabajar con código puede complicarse rápidamente. Le recomendamos que utilice un plugin como OptinMonster para crear fácilmente un formulario emergente de forma gratuita.

¿Cómo puedo crear un formulario emergente Elementor?

Para crear un formulario emergente en Elementor, necesitará la licencia Pro. Esto le dará acceso a su constructor de ventanas emergentes y plantillas.

Elige una plantilla o diseña desde cero. Arrastre y suelte los widgets para añadir contenido. Decide dónde y cuándo aparecerá tu ventana emergente. Y eso es todo.

A continuación, Aceptar contenido enviado por el usuario

¿Quieres permitir que los usuarios invitados envíen mensajes a tu sitio desde el frontend? WPForms es el mejor plugin para ello. Vea nuestra guía sobre cómo permitir entradas enviadas por usuarios en WordPress para más detalles.

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 ayudado, síguenos en Facebook y Twitter para más tutoriales y guías gratuitas sobre WordPress.

Divulgación: Nuestro contenido está apoyado por los lectores. Esto significa que si hace clic en algunos de nuestros enlaces, podemos ganar una comisión. Vea cómo se financia WPForms, por qué es importante y cómo puede apoyarnos.

Osama Tahir

Osama es un escritor senior en WPForms. Se especializa en desmontar plugins de WordPress para probarlos y compartir sus ideas con el mundo.Más información

El mejor plugin de WordPress para crear formularios arrastrando y soltando

Fácil, rápido y seguro. Únete a más de 6 millones de propietarios de sitios web que confían en WPForms.

Active JavaScript en su navegador para rellenar este formulario.

14 comments on "Cómo crear fácilmente un formulario emergente en WordPress de forma gratuita (2 formas)"

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

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

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

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

  2. ¿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.

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

Añadir un comentario

Nos alegra que haya decidido dejar un comentario. Por favor, tenga en cuenta que todos los comentarios son moderados de acuerdo con nuestra política de privacidad, y todos los enlaces son nofollow. NO utilice palabras clave en el campo del nombre. Tengamos una conversación personal y significativa.

Este formulario está protegido por Cloudflare Turnstile y se aplican la Política de privacidad y las Condiciones del servicio de Cloudflare.