Cómo crear un pop-up con formulario en WordPress paso a paso

¿Quieres que cuando una persona entre en tu web aparezca una pequeña ventana invitándola a apuntarse a tu newsletter, unirse a tu club, solicitar información o recibir novedades?

Entonces necesitas un pop-up en WordPress.

Y no, no necesitas convertirte en programador para hacerlo.

En este tutorial te explicamos cómo crear un formulario emergente en WordPress paso a paso, desde el principio y con palabras normales.

Como ejemplo, vamos a crear un formulario para recoger tres datos:

• Nombre y apellidos.
• Correo electrónico.
• Teléfono móvil.

El resultado será una ventana que aparecerá sobre la página y permitirá al visitante introducir sus datos.

Importante: las pantallas pueden cambiar ligeramente dependiendo de la versión de WordPress, del plugin que utilices y del editor de formularios instalado. En este tutorial utilizamos Popup Maker como ejemplo.

Antes de empezar: ¿qué necesitas para crear un pop-up?

Antes de tocar nada en WordPress, necesitas tener claro qué quieres conseguir.

Parece una tontería, pero te puede ahorrar bastante tiempo.

Para nuestro ejemplo necesitamos:

1. Un mensaje

Por ejemplo:

¡Únete a nuestro club!
Déjanos tus datos y recibirás nuestras novedades.

2. Los campos que quieres pedir

En este caso:

• Nombre.
• Email.
• Teléfono.

3. Decidir cuándo aparecerá

Por ejemplo:

• Nada más entrar.
• Después de unos segundos.
• Cuando la persona haga clic en un botón.
• Después de que haya bajado por la página.

4. Saber dónde se guardarán los datos

Y esto es especialmente importante.

No es lo mismo guardar los contactos dentro de WordPress que enviarlos a una herramienta de email marketing como Mailchimp, Brevo, ActiveCampaign u otra plataforma.

Antes de publicar el formulario debes saber qué ocurrirá con los datos que introduce cada persona.

Paso 1. Entra en el panel de WordPress

Lo primero es entrar en el panel de administración de tu web.

Una vez dentro, busca en el menú lateral la opción correspondiente al plugin que utilizarás para crear el pop-up.

En nuestro ejemplo:

Popup Maker → Add New Popup

La documentación oficial de Popup Maker sitúa la creación de nuevos pop-ups precisamente en esta sección del panel de WordPress.

¿Y si no aparece Popup Maker?

No te preocupes.

Eso significa simplemente que el plugin no está instalado o activado.

En ese caso tendrás que ir a:

Plugins → Añadir nuevo plugin

y buscar Popup Maker.

Pero atención: antes de instalar cualquier plugin en una web que ya está funcionando, comprueba que realmente sea el que necesitas. Instalar plugins porque sí es una estupenda manera de conseguir que una tarde tranquila se convierta en una tarde bastante menos tranquila.

Paso 2. Crea un nuevo pop-up

Una vez dentro de Popup Maker, pulsa:

Add New Popup

Se abrirá una pantalla parecida a la que utilizas para crear una página o una entrada de WordPress.

Lo primero que tendrás que escribir es el nombre del pop-up.

Por ejemplo:

Pop-up Club

Este nombre sirve principalmente para que tú puedas reconocerlo dentro de WordPress.

No tiene por qué ser necesariamente el texto que verá el visitante.

También puedes añadir un título visible para el usuario.

Por ejemplo:

¡Únete al CLUB!

Debajo puedes escribir una pequeña explicación:

«Déjanos tus datos y recibe todas las novedades del CLUB directamente en tu correo.»

Aquí no hace falta escribir una novela. Cuanto más sencillo sea el mensaje, más fácil será entender qué quieres que haga la persona.

Paso 3. Añade el formulario

Ahora llega la parte importante: introducir los campos que quieres que rellene el visitante.

En nuestro ejemplo necesitamos:

Nombre y apellidos

Correo electrónico

Teléfono móvil

La forma de añadir estos campos dependerá del plugin de formularios que tengas instalado. Por ejemplo, si utilizas un plugin compatible, podrás insertar el formulario dentro del pop-up. Popup Maker permite insertar formularios mediante la opción correspondiente o mediante el código del formulario cuando el plugin utilizado funciona de esa manera.

¿Qué campos debes crear?

Para este ejemplo:

Campo 1: Nombre y apellidos

Texto que verá el usuario:

Nombre y apellidos

Campo 2: Email

Texto que verá el usuario:

Correo electrónico

Campo 3: Teléfono

Texto que verá el usuario:

Teléfono móvil

Y después un botón. Por ejemplo:

QUIERO UNIRME

Paso 4. No olvides la privacidad

Aquí hacemos una pequeña pausa porque estamos hablando de datos personales.

Un nombre, un correo electrónico y un teléfono son datos personales. Por eso, antes de publicar un formulario de este tipo, hay que tener claro para qué se van a utilizar esos datos y qué información debe facilitarse al usuario.

La AEPD indica que, cuando el tratamiento se basa en el consentimiento, este debe obtenerse mediante una acción afirmativa clara y no mediante casillas premarcadas. También señala que la información debe ofrecerse de forma clara y sencilla. (Agencia Española de Protección de Datos)

Por tanto, el formulario debería incluir la información de privacidad que corresponda y, cuando sea necesario obtener consentimiento, una casilla sin marcar previamente.

Por ejemplo:

☐ He leído y acepto la Política de Privacidad.

Y si además quieres utilizar esos datos para una finalidad distinta, como enviar comunicaciones comerciales, esa finalidad debe revisarse y configurarse correctamente.

No copies una casilla de otro formulario y listo. La información debe corresponder al tratamiento real que vas a hacer con esos datos.

La propia AEPD dispone de modelos de cláusulas informativas para distintos tratamientos, incluidos los de potenciales clientes.

Paso 5. Decide cuándo aparecerá el pop-up

Ahora vamos a decidir cuándo quieres que aparezca la ventana emergente.

Esta parte es muy importante porque no queremos que el visitante entre en la web y, antes de haber podido leer una sola palabra, tenga una ventana gigante delante de la cara.

Popup Maker utiliza los llamados triggers, que son simplemente las condiciones que hacen que aparezca el pop-up. Entre ellas están la aparición automática después de un tiempo, el clic sobre un elemento y el envío de un formulario.

Opción A: Mostrarlo después de unos segundos

Puedes configurar el pop-up para que aparezca automáticamente después de un determinado tiempo.

Por ejemplo:

5 segundos después de entrar en la página.

Esta opción puede ser útil cuando quieres que el visitante tenga unos segundos para ver dónde está antes de mostrarle el formulario.

Opción B: Mostrarlo al pulsar un botón

Esta opción es especialmente sencilla de entender.

En lugar de hacer aparecer el formulario automáticamente, colocas un botón en la web:

ÚNETE AL CLUB

Cuando la persona pulsa el botón, aparece el formulario.

Así el propio visitante está indicando que quiere verlo.

Opción C: Mostrarlo después de que el usuario avance por la página

También existen opciones para mostrar un pop-up cuando el visitante ha avanzado una determinada parte de la página.

Esta configuración puede ser interesante para contenidos largos, porque el formulario no aparece inmediatamente.

Algunas de estas opciones dependen de la versión del plugin que tengas instalada.

Paso 6. Decide en qué páginas aparecerá

No siempre necesitas mostrar el mismo pop-up en toda la web.

Imagina que tienes:

• Página de inicio.
• Blog.
• Página de contacto.
• Página de servicios.
• Tienda.

Quizá quieras mostrar el formulario únicamente en determinadas páginas.

En ese caso tendrás que revisar las opciones de Targeting o condiciones de visualización del plugin.

Popup Maker permite establecer dónde se muestran los pop-ups y ofrece opciones de segmentación según el contenido de WordPress. (WordPress.org).

Consejo: no muestres el mismo pop-up absolutamente en todas partes porque sí.

Piensa primero: «¿En qué página tiene sentido que esta persona vea este formulario?»

Y configúralo en consecuencia.

Paso 7. Revisa el diseño

Ahora toca hacer que el pop-up tenga buena pinta.

Puedes modificar aspectos como:

• Tamaño.
• Posición.
• Espaciado.
• Fondo.
• Bordes.
• Tipografía.
• Botón.
• Imagen, si quieres utilizar una.

Pero recuerda una regla muy sencilla:

El pop-up tiene que llamar la atención, no secuestrar la web.

No necesitas utilizar siete colores, cuatro tipos de letra y una animación que haga que el formulario entre dando volteretas. Un buen pop-up debe permitir que el usuario entienda rápidamente: qué le estás ofreciendo, qué tiene que hacer y qué ocurrirá con sus datos.

Paso 8. Configura dónde recibirás los contactos

Este paso depende de cómo tengas organizada la web. Los datos pueden terminar en diferentes lugares dependiendo de la configuración:

• Dentro del propio WordPress.
• En el correo electrónico.
• En una herramienta de email marketing.
• En un CRM.
• En otra plataforma conectada al formulario.

Por eso, antes de publicar el pop-up debes saber dónde acabarán los datos. Si utilizas una plataforma de email marketing, comprueba que el formulario esté conectado correctamente. No des por hecho que porque alguien haya rellenado el formulario su contacto aparecerá mágicamente en tu lista. La tecnología todavía no ha llegado a ese nivel de telepatía.

Paso 9. Guarda y publica el pop-up

Cuando hayas terminado, revisa todo. Comprueba:

☑ El título.

☑ El texto.

☑ Los campos.

☑ El botón.

☑ La información de privacidad.

☑ El momento en que aparece.

☑ Las páginas donde se muestra.

☑ Dónde se guardan los contactos.

Después, pulsa:

Publicar o Actualizar, si estás modificando un pop-up que ya existía.

La documentación de Popup Maker incluye este proceso de creación, configuración y publicación como parte del flujo habitual para crear un nuevo pop-up.

Paso 10. Haz una prueba antes de darlo por terminado

Este paso parece obvio. Y precisamente por eso se olvida muchísimo.

Abre la web como si fueras un visitante normal y comprueba el formulario. Haz tú misma una prueba. Introduce:

Nombre: Prueba

Email: una dirección que puedas comprobar

Teléfono: tu número de prueba

Y pulsa el botón.

Después comprueba que:

1. El formulario se ha enviado correctamente.
2. El mensaje de confirmación aparece.
3. El contacto ha llegado al lugar previsto.
4. Los datos aparecen correctamente.
5. El pop-up aparece cuando debe.
6. No aparece cuando no debe.
7. En móvil se ve correctamente.

Y esto último es especialmente importante.

Comprueba siempre el pop-up desde el móvil

Un formulario puede verse estupendamente en un ordenador y convertirse en un pequeño desastre en un teléfono.

Comprueba que:

• El pop-up no ocupe toda la pantalla de forma incómoda.
• El botón se pueda pulsar.
• Los campos sean suficientemente grandes.
• El texto pueda leerse.
• El botón para cerrar la ventana sea visible.
• No haya elementos cortados.

¿Cuántos campos debe tener un formulario emergente?

No existe una cantidad mágica que funcione para absolutamente todas las webs.

Pero sí hay una regla bastante lógica:

Pide solamente los datos que realmente necesitas.

Si para apuntarse a tu newsletter solo necesitas el email, no tiene demasiado sentido pedir:

• Nombre.
• Apellidos.
• Teléfono.
• Dirección.
• Código postal.
• Fecha de nacimiento.
• Profesión.
• Nombre de la mascota.

Y el grupo sanguíneo, ya puestos.

Cada campo adicional supone un pequeño esfuerzo para la persona que está rellenando el formulario.

En nuestro ejemplo necesitamos nombre, email y teléfono, así que esos serán los datos que solicitaremos.

Errores frecuentes al crear un pop-up en WordPress

Hacer que aparezca inmediatamente

El visitante acaba de entrar y todavía no sabe ni dónde está.

Darle dos segundos para respirar antes de mostrarle el formulario suele ser una buena idea.

Pedir demasiados datos

Si quieres captar contactos, facilita el proceso.

Cuantos menos datos necesites realmente, mejor.

No comprobar dónde llegan los formularios

Este es uno de los errores más peligrosos.

El formulario parece funcionar perfectamente, pero nadie está revisando dónde se almacenan los contactos.

Haz siempre una prueba.

Olvidarse del móvil

No diseñes el formulario únicamente pensando en ordenador.

Compruébalo también desde un teléfono.

No revisar la protección de datos

Si estás recogiendo información personal, no copies cualquier texto de privacidad que encuentres por Internet.

La información debe corresponder al tratamiento que realmente haces con esos datos. La AEPD recuerda que adaptar los formularios de recogida de datos forma parte de las medidas de cumplimiento del RGPD.

¿Merece la pena crear un pop-up en WordPress?

Un pop-up en WordPress puede ser útil para captar suscriptores, contactos o personas interesadas en un servicio, siempre que se utilice con sentido.

La clave no está simplemente en conseguir que una ventana aparezca.

La clave está en conseguir que aparezca en el momento adecuado, con un mensaje claro y una acción sencilla.

Si el visitante entiende qué le estás ofreciendo y puede completar el formulario fácilmente, el pop-up cumple su función.

Si aparece nada más entrar, ocupa toda la pantalla, tiene ocho campos y no se puede cerrar…

Bueno.

Probablemente acabas de conseguir que el visitante quiera cerrar la web entera.

Checklist para crear un pop-up en WordPress paso a paso

Si quieres quedarte con lo esencial, el proceso es este:

1. Decide qué quieres conseguir.

2. Prepara el texto del pop-up.

3. Decide qué datos necesitas.

4. Crea el formulario.

5. Añade la información de privacidad correspondiente.

6. Crea el pop-up en WordPress.

7. Inserta el formulario.

8. Decide cuándo aparecerá.

9. Decide en qué páginas se mostrará.

10. Configura dónde recibirás los contactos.

11. Publica.

12. Haz una prueba desde ordenador y móvil.

Y listo: ya tienes tu formulario emergente en WordPress preparado para captar nuevos contactos.

FAQs sobre pop-ups en WordPress

Si te atascas, TWC’a está para ti

Crear un pop-up en WordPress no tiene por qué ser complicado.

La parte técnica es solo una parte del trabajo. Antes de abrir WordPress, piensa qué quieres conseguir, qué información necesitas y qué ocurrirá con los datos que te proporcione cada visitante.

Después, configura el formulario, decide cuándo quieres que aparezca, comprueba cómo se ve en ordenador y móvil y haz una prueba real antes de darlo por terminado.

Porque un formulario que funciona bien no es el que simplemente aparece. Es el que aparece cuando debe, pide lo necesario y hace que al usuario le resulte fácil completar el proceso.

Si has llegado hasta aquí y estás pensando «vale… pero prefiero que esto lo haga alguien que sabe lo que está haciendo», también es una opción. 😉

Si necesitas crear, modificar o configurar un pop-up en WordPress, un formulario o cualquier otro elemento de tu web, contacta con nosotros y te ayudaremos a ponerlo en marcha.

Y si ya eres cliente y quieres olvidarte de tener que entrar en WordPress cada vez que necesites hacer un cambio, puedes ampliar tu plan de mantenimiento web para que nos encarguemos nosotros.

Así podrás pedirnos cambios, nuevas funcionalidades o ajustes en tu web sin tener que aprender dónde está cada botón ni arriesgarte a tocar algo que después no sepas cómo deshacer.

Tú nos dices qué necesitas. Nosotros nos encargamos de hacerlo.