Tutoriales de WordPress de Confianza, cuando más los necesitas.
Guía para Principiantes de WordPress
Copa WPB
25 Millones+
Sitios web que usan nuestros plugins
16+
Años de experiencia en WordPress
3000+
Tutoriales de WordPress de expertos

Cómo Agregar un Popup de Formulario de Contacto en WordPress

¿Alguna vez has visto a los visitantes navegar por tu sitio, solo para irse sin ponerse en contacto? Es frustrante, especialmente cuando sabes que están interesados pero no logras conectar.

Una ventana emergente simple y oportuna puede marcar la diferencia. 💡

Cuando se coloca de manera reflexiva, pone tu formulario de contacto justo donde los visitantes lo necesitan. Esto puede generar más consultas, comentarios y conversiones.

En WPBeginner, somos grandes admiradores de WPForms porque es fácil de usar para principiantes, potente y perfecto para crear todo tipo de formularios. Aún mejor, puedes combinarlo con OptinMonster para crear una ventana emergente de formulario de contacto que se sienta útil, no intrusiva.

En esta guía, te mostraremos cómo agregar una ventana emergente de formulario de contacto en WordPress. Una que convierte a los visitantes en clientes potenciales, sin molestarlos.

Cómo agregar un formulario de contacto emergente en WordPress

🧑‍💻 Resumen: Crea tu formulario de contacto con WPForms, copia su shortcode e insértalo en una campaña de popup de OptinMonster que se active según el comportamiento del usuario (como hacer clic en un botón o pasar tiempo en una página).

¿Por qué usar una ventana emergente de formulario de contacto?

Un popup de formulario de contacto facilita que los visitantes se comuniquen contigo sin interrumpir su navegación o la búsqueda de tu página de contacto.

Esto es importante porque cada sitio de WordPress necesita una forma sencilla para que los usuarios envíen preguntas, comentarios o solicitudes de soporte. Pero cuando tu formulario de contacto solo está en una página, muchos visitantes podrían no encontrarlo nunca. Y esto a menudo resulta en la pérdida de leads.

Un popup de formulario de contacto resuelve esto permitiendo a los visitantes abrir el formulario con un solo clic, desde cualquier página de tu sitio. Pueden contactarte de inmediato sin salir de la página que están viendo actualmente.

También ayuda a mantener a las personas en tu sitio web en lugar de enviarlas a otro lugar. Y como beneficio adicional, puedes usar estos popups para recopilar direcciones de correo electrónico y hacer crecer tu lista de correo.

En esta guía, te mostraremos cómo crear un formulario de contacto y agregarlo a un popup en WordPress.

También compartiremos nuestros consejos de expertos sobre cómo crear una ventana emergente que capte la atención sin ser intrusiva. Este enfoque asegura que tu sitio de WordPress siga siendo fácil de usar mientras maximiza las oportunidades de interacción.

Y aquí tienes un resumen rápido de todos los pasos que seguirás:

¿Listo? Empecemos.

Paso 1: Crea un formulario de contacto de WordPress

Primero, necesitarás seleccionar un plugin de formulario de contacto para WordPress.

Hay muchas opciones gratuitas y de pago, pero recomendamos usar WPForms, porque es el mejor creador de formularios de WordPress del mercado. También es el más fácil para principiantes, gracias a las herramientas de IA, el constructor de arrastrar y soltar, y las plantillas de formularios preconstruidas.

En WPBeginner, lo usamos nosotros mismos en nuestro sitio web para mostrar formularios de contacto, encuestas anuales a usuarios y formularios de migración de sitios.

Para obtener detalles sobre nuestra experiencia con el plugin, consulta nuestra reseña completa de WPForms.

Para empezar, ve al sitio web de WPForms y haz clic en el botón ‘Obtener WPForms Ahora’. Luego, simplemente sigue los pasos para crear tu cuenta y completar la compra.

Página de inicio de WPForms

Después de pagar, llegarás al panel de tu cuenta de WPForms, donde podrás encontrar la clave de licencia del plugin.

💡 Nota: Para seguir este tutorial, puedes usar WPForms Lite, ya que incluye una plantilla de formulario de contacto. Pero puedes actualizar a WPForms Pro para desbloquear más de 2000 plantillas de formularios, potentes complementos y funciones de pago sin tarifas de transacción adicionales.

Desde aquí, navega a WPForms » Añadir Nuevo desde tu panel de WordPress.

El submenú Añadir plugin bajo Plugins en el área de administración de WordPress

En la siguiente pantalla, usa la barra de búsqueda para encontrar rápidamente el plugin WPForms.

Cuando aparezca en el resultado de la búsqueda, haz clic en ‘Instalar ahora’ y luego en ‘Activar’.

El botón Instalar ahora en el resultado de búsqueda de WPForms al agregar un nuevo plugin en WordPress

Si necesitas ayuda, puedes ver nuestra guía paso a paso sobre cómo instalar un plugin de WordPress.

Si compras WPForms Pro, necesitarás activar tu clave de licencia. Ve a WPForms » Configuración, ingresa tu clave en el campo correspondiente y haz clic en ‘Verificar clave’.

Ingresando tu clave de licencia de WPForms

Desde aquí, ya estás listo para crear tu formulario de contacto.

Continúa y navega a WPForms » Añadir nuevo desde tu panel de WordPress.

Agregar un nuevo formulario

En la siguiente pantalla, puedes ingresar un nombre para el formulario.

Luego, seleccionarás cómo construirás tu formulario: usando WPForms AI, una plantilla predefinida o un lienzo en blanco.

Formularios de IA de WPForms en acción

Si deseas usar el constructor de formularios con IA, simplemente ingresa una indicación. En segundos, tu formulario será generado.

Dicho esto, usaremos la plantilla 'Formulario de contacto simple' para este tutorial porque tiene todo lo que necesitamos.

La plantilla de formulario de contacto simple de WPForms

A continuación, puedes agregar campos al formulario usando el constructor de arrastrar y soltar.

Simplemente arrastra los campos que deseas agregar al formulario desde las opciones dadas en el menú de tu izquierda. También puedes reordenar los campos en el formulario.

Una plantilla de formulario de contacto

WPForms también te permite personalizar cada campo en el formulario de contacto.

Por ejemplo, si haces clic en el campo ‘Nombre’, verás opciones para cambiar su etiqueta y formato. Incluso puedes agregar una descripción o marcar cualquier campo como obligatorio.

Edita cada campo en el formulario de contacto

Para obtener instrucciones paso a paso, consulta nuestra guía sobre cómo crear un formulario de contacto.

Una vez que hayas terminado, haz clic en la opción ‘Configuración’ para configurar la notificación y confirmación del formulario.

En la sección ‘General’, puedes renombrar el formulario, agregar una descripción, cambiar el texto del botón de envío, habilitar la protección antispam y más.

Editando la configuración de WPForms

A continuación, puedes ir a la opción de configuración ‘Notificaciones’. Por defecto, las notificaciones se envían al correo electrónico del administrador que está configurado en tu sitio web de WordPress.

Sin embargo, puedes enviar la notificación de tu formulario de contacto a cualquier dirección de correo electrónico que desees. Si deseas enviar notificaciones del formulario a varios correos electrónicos, separa cada correo electrónico con una coma.

Para la línea de asunto del correo electrónico, WPForms utiliza el nombre del formulario que ingresaste anteriormente. Sin embargo, puedes editar el texto de la línea de asunto a lo que desees.

Editar configuración de notificaciones

Ahora, vayamos a la opción ‘Confirmaciones’.

WPForms usa ‘Mensaje’ como tipo de confirmación predeterminado. Esto muestra un mensaje de agradecimiento inmediatamente después de enviar el formulario. Aparte de eso, verás las opciones ‘Mostrar página’ y ‘Ir a URL (Redirigir)’.

Editar la configuración de confirmación del formulario

Sin embargo, para los popups, recomendamos mantener esta configuración de ‘Mensaje’. Redirigir a los usuarios a una página diferente a veces puede sentirse abrupto cuando interactúan con un popup.

Una vez que hayas terminado de crear un formulario de contacto, asegúrate de hacer clic en el botón ‘Guardar’ en la esquina superior derecha para guardar tus cambios.

Incrusta tu formulario

A continuación, puedes hacer clic en la opción ‘Incrustar’ en la esquina superior junto al botón ‘Guardar’ para obtener el shortcode del formulario. Necesitarás esta información para mostrar tu formulario en una ventana emergente.

Cuando aparezca un nuevo popup, puedes seleccionar la opción ‘Usar un shortcode’.

Haz clic en el enlace usar un shortcode

WPForms entonces mostrará el shortcode de tu formulario de contacto tan pronto como hagas clic en el enlace. Sugerimos que mantengas esta pestaña o ventana abierta porque necesitarás el shortcode en el siguiente paso, donde te mostraremos cómo agregar tu formulario de contacto en un popup.

Paso 2: Agrega una ventana emergente de formulario de contacto a tu sitio de WordPress

Para crear una ventana emergente de formulario de contacto, necesitarás un plugin de popups de WordPress.

Recomendamos usar OptinMonster, ya que es el mejor plugin de generación de leads y optimización de conversiones para WordPress. También es uno de los más populares, con más de 1.2 millones de sitios web que utilizan esta potente herramienta.

En WPBeginner, usamos OptinMonster para diversas tareas, como promocionar ofertas especiales en ventanas emergentes, barras deslizantes y banners de encabezado. Si deseas más información, no dudes en leer nuestra reseña completa de OptinMonster.

🔗 Relacionado: Para más información, también te recomendamos leer nuestro artículo sobre cómo aumentamos nuestros suscriptores de correo electrónico en un 600% con OptinMonster.

Para este tutorial, usaremos la versión Pro de OptinMonster, que incluye una plantilla sin desorden y reglas de visualización avanzadas para mostrar el popup.

Entonces, regístrate para obtener una cuenta yendo al sitio web de OptinMonster. Simplemente visita el sitio web y haz clic en el botón ‘Obtener OptinMonster Ahora’.

OptinMonster

Después de registrarte, accederás al panel de tu cuenta de OptinMonster. Mantén esta pestaña abierta, ya que conectaremos tu cuenta a WordPress en un momento.

A continuación, deberás instalar y activar el plugin gratuito de OptinMonster en tu sitio web. Este plugin actúa como un conector entre tu sitio web y tu cuenta de OptinMonster.

En tu panel de WordPress, ve a Plugins » Añadir Plugin.

El submenú Añadir plugin bajo Plugins en el área de administración de WordPress

En la siguiente pantalla, usa la barra de búsqueda para encontrar ‘OptinMonster’.

Luego, haz clic en ‘Instalar ahora’ y ‘Activar’ para habilitarlo correctamente.

Instalación de OptinMonster

Para más detalles, puedes seguir nuestra guía sobre cómo instalar un plugin de WordPress.

Después de que el plugin esté activo, verás el asistente de configuración.

Haz clic en el botón ‘Conectar tu cuenta existente’.

Conecta tu cuenta existente

Ahora aparecerá una ventana emergente y OptinMonster te pedirá que te conectes a tu cuenta.

Simplemente haz clic en el botón ‘Conectar a WordPress’.

Haz clic en el botón Conectar a WordPress

Ahora que tu cuenta está conectada, lo siguiente que debes hacer es crear una nueva campaña para tu popup de formulario de contacto.

Puedes empezar yendo a OptinMonster » Campañas y luego haciendo clic en el botón ‘Crear tu primera campaña’.

Crea tu primera campaña de OptinMonster

En la siguiente pantalla, tendrás que seleccionar un tipo de campaña.

Como crearemos un popup de formulario de contacto, selecciona ‘Popup’ como tu tipo de campaña.

Elige un tipo de campaña y una plantilla

Después de eso, querrás desplazarte hacia abajo en la página para elegir una plantilla.

OptinMonster ofrece más de 75 diseños atractivos y de alta conversión para tus popups. Puedes seleccionar cualquier plantilla que te guste.

Una vez que hayas decidido la plantilla, simplemente ingresa un nombre para tu campaña y haz clic en el botón ‘Iniciar Construcción’.

Ingresa un nombre para tu campaña

Ahora, usando el constructor de arrastrar y soltar en OptinMonster, puedes editar tu plantilla de popup.

Verás diferentes bloques aparecer en el menú de tu izquierda. Localiza el bloque ‘WPForms’, luego arrástralo y suéltalo en tu plantilla.

Agregar el bloque WPForms en el popup

Después de eso, haz clic en el menú desplegable ‘Selección de formulario’ en la configuración del bloque a la izquierda.

Simplemente elige el formulario de contacto que creaste anteriormente de la lista. Si no ves tu formulario listado, puedes seleccionar ‘Añadir Shortcode Manualmente’ y pegar el shortcode que copiaste en el Paso 1.

Ingresar el shortcode del formulario de contacto

Continúa e introduce el shortcode de tu formulario de contacto de WPForms en el bloque. Si perdiste tu shortcode, puedes volver a la página de configuración de incrustación de WPForms y copiar el shortcode.

Es importante tener en cuenta que no verás una vista previa del formulario de contacto en la plantilla cuando añadas el shortcode. Esto es normal, ya que tu formulario de contacto aparecerá cuando la campaña se publique.

Ver el shortcode del formulario de contacto

A continuación, puedes ir a la pestaña ‘Reglas de Visualización’ en la parte superior para elegir cuándo debe aparecer el popup en tu sitio web.

Por defecto, OptinMonster lo configurará para que aparezca cuando el tiempo en la página sea de 5 segundos, y el popup aparecerá en cualquier página. Sin embargo, puedes cambiar la configuración de las reglas de visualización y seleccionar diferentes activadores y opciones de segmentación.

Recomendamos usar la segmentación MonsterLink (al hacer clic). Esto activa el popup solo cuando un usuario hace clic en un enlace o botón específico. Pone al visitante en control y es mucho menos intrusivo que un popup que se abre automáticamente.

Seleccionar regla de Monsterlink

A continuación, puedes hacer clic en el botón ‘Copiar Código MonsterLink’ y agregarlo a cualquier texto, imagen o botón en tu sitio web.

Para más detalles, puedes seguir nuestra guía para principiantes sobre cómo agregar un enlace en WordPress.

Copiar el código MonsterLink

Tu código de MonsterLink se verá así en HTML:

<a href="https://app.monstercampaigns.com/c/ep6f5qtakxauowbj8097/" target="_blank" rel="noopener noreferrer">Subscribe Now!</a>

No necesitas el código HTML completo, solo la URL. Así que puedes copiar el texto del enlace que comienza con https://.

Así es como debería verse la URL:

https://app.monstercampaigns.com/c/ep6f5qtakxauowbj8097/

Por ejemplo, digamos que quieres agregar un botón de Contáctanos en tu sitio.

En este caso, puedes empezar editando cualquier página o publicación y yendo a tu editor de WordPress. Luego, querrás hacer clic en el signo (+) y agregar un bloque de ‘Botones’.

Agregar un bloque de Botones

Después de eso, puedes ingresar el texto para tu botón y hacer clic en el ícono de enlace. Por ejemplo, usamos 'Contáctanos' como el texto del botón.

Ahora, agreguemos la URL de MonsterLink. Haz clic en el bloque del botón para seleccionarlo, luego haz clic en el ícono de Enlace en la barra de herramientas. Simplemente pega la URL que copiaste anteriormente y presiona 'Enter'.

Ingresar el MonsterLink en el botón

Una vez que hayas hecho eso, procede a publicar tu publicación o página de WordPress. El MonsterLink ahora se agregará a tu botón ‘Contáctanos’.

Ahora, regresemos a tu campaña de OptinMonster para completar la configuración.

Después de seleccionar MonsterLink como tu objetivo y mostrarlo en cualquier página, puedes hacer clic en el botón ‘Siguiente’ en la parte inferior.

Completar la configuración de las reglas de visualización

En la siguiente pantalla, verás opciones para cambiar el tipo de vista de la campaña, agregar una animación de MonsterEffect y reproducir un sonido cuando aparezca el popup.

Siéntete libre de experimentar con diferentes configuraciones de animación y sonido. Cuando hayas terminado, haz clic en el botón 'Siguiente paso'.

Configurar ajustes adicionales de las reglas de visualización

OptinMonster luego mostrará un resumen de la configuración de tu ‘Regla de Visualización’.

Esto ayuda a asegurar que hayas configurado correctamente cuándo aparecerán tus campañas en tu sitio web.

Ver resumen de las reglas de visualización

Ahora, estás listo para lanzar tu campaña y publicar tu popup de formulario de contacto.

Para hacer eso, querrás ir a la pestaña ‘Publicar’ en la parte superior. Luego, haz clic en el botón ‘Vista previa’ para ver cómo se ve tu ventana emergente antes de publicarla.

🧑‍💻 Consejo Pro: También deberías hacer clic en el icono de Móvil en el pie de página de vista previa de OptinMonster. Esto asegura que tu formulario de contacto se vea bien en pantallas más pequeñas antes de publicarlo.

Cuando estés contento con la apariencia de tu campaña, cambia el ‘Estado de publicación’ de ‘Borrador’ a ‘Publicar’.

Cambiar el estado de publicación

Una vez hecho esto, puedes salir del creador de campañas de OptinMonster y verificar el estado de tu campaña desde tu panel de WordPress.

Navega a OptinMonster » Campañas y haz clic en el menú desplegable ‘Estado’. Luego, puedes cambiarlo de ‘Pendiente’ a ‘Publicar’.

Cambiar el estado de la campaña

OptinMonster actualizará automáticamente los cambios.

A continuación, querrás ir a donde muestras el botón ‘Contáctanos’ con la integración de MonsterLink y ver el formulario de contacto emergente en acción.

Vista previa del popup del formulario de contacto

¡Ahí lo tienes!

Has creado exitosamente una ventana emergente de formulario de contacto en WordPress. Aún mejor, lo has hecho de una manera que mantiene tu formulario de contacto fácil de acceder sin ser intrusivo.

Consejos adicionales para aumentar tus suscripciones a través de popups

Ahora que sabes cómo crear un formulario de contacto emergente, el siguiente paso es asegurarte de que mejore la experiencia del usuario en lugar de hacer que los visitantes reboten de tu sitio.

Para maximizar las suscripciones, deberías enfocarte en crear ventanas emergentes útiles y relevantes en lugar de intrusivas:

ConsejoQué HacerEjemplo
MomentoMuestra las ventanas emergentes después de que los usuarios hayan pasado algún tiempo en tu sitio o hayan desplazado la página hacia abajo.Activa la ventana emergente después de 15 segundos o cuando un usuario desplace el 50% de la página.
PersonalizaciónAdapta el mensaje de tu ventana emergente a lo que el visitante está viendo o haciendo actualmente.Ofrecer un descuento sobre el producto que están viendo.
Color y DiseñoUsa colores que llamen la atención sin abrumar el diseño.Colores llamativos para los botones, tonos más suaves para el fondo.
Urgencia y miedo a perderse algo (FOMO)Anima a la acción rápida con mensajes o beneficios de tiempo limitado que podrían perderse.Usa frases como “Oferta por tiempo limitado” o “Solo quedan unos pocos lugares”.
Prueba socialAgrega reseñas, calificaciones o estadísticas de uso para generar confianza.Muestra “Con la confianza de más de 10,000 usuarios” o un testimonio breve.

Al combinar estas estrategias, puedes crear pop-ups que capten la atención, conecten con tu audiencia y generen acciones sin sentirse intrusivos.

Para más detalles y ejemplos, puedes consultar nuestra guía sobre cómo usar la psicología de los pop-ups para aumentar las suscripciones en un 250%.

Preguntas frecuentes: Cómo agregar una ventana emergente de formulario de contacto en WordPress

¿Tienes preguntas sobre los popups de formularios de contacto? Aquí tienes respuestas rápidas para ayudarte a configurarlos de la manera correcta.

¿Cómo me aseguro de que mi popup de formulario de contacto no sea molesto?

Todo se trata de tiempo y contexto. Para evitar frustrar a los visitantes, muestra popups basados en su comportamiento, como después de unos segundos en la página o cuando alguien se desplaza hacia abajo. Herramientas como OptinMonster te permiten ajustar estas configuraciones para que tu popup se sienta útil, no intrusivo.

¿Puedo usar un popup de formulario de contacto para visitantes móviles?

Sí, pero ten en cuenta el espacio de la pantalla. WPForms y OptinMonster son responsivos para móviles, lo que significa que tus popups se adaptarán a pantallas más pequeñas. Solo asegúrate de que el diseño sea limpio y fácil de cerrar en dispositivos móviles.

¿Cómo puedo rastrear el rendimiento de mis popups de formulario de contacto?

Puedes usar MonsterInsights para rastrear métricas importantes del formulario como vistas, clics y conversiones, todo desde tu panel de WordPress. Esto te ayuda a entender qué funciona y dónde puedes mejorar.

¿Un popup de formulario de contacto ralentizará mi sitio?

No si está construido y configurado correctamente. Herramientas ligeras como WPForms y OptinMonster están optimizadas para el rendimiento, por lo que no ralentizarán notablemente tu sitio cuando se usen correctamente.

Tutorial en video

Antes de irte, hemos preparado un tutorial en video sobre cómo agregar un popup de formulario de contacto a tu sitio de WordPress. ¡Asegúrate de verlo!

Suscríbete a WPBeginner

Explora nuestras guías de formularios de WordPress

Esperamos que este artículo te haya ayudado a aprender cómo agregar un pop-up de formulario de contacto en WordPress.

A continuación, también te recomendamos consultar nuestras guías sobre:

Si te gustó este artículo, suscríbete a nuestro canal de YouTube para obtener tutoriales en video de WordPress. También puedes encontrarnos en Twitter y Facebook.

Descargo de responsabilidad: Nuestro contenido es compatible con el lector. Esto significa que si haces clic en algunos de nuestros enlaces, podemos ganar una comisión. Consulta cómo se financia WPBeginner, por qué es importante y cómo puedes apoyarnos. Aquí está nuestro proceso editorial.

El Kit de herramientas definitivo para WordPress

Obtén acceso GRATUITO a nuestro kit de herramientas: ¡una colección de productos y recursos relacionados con WordPress que todo profesional debería tener!

Interacciones del lector

30 CommentsLeave a Reply

  1. ¡GUAU, ¿quieres decir que puedo agregar un formulario creado por WPForms y usarlo en OptinMonster?!
    Ni siquiera sabía que dos de mis herramientas favoritas se podían usar juntas.
    MUCHAS GRACIAS WPBeginner, ahora tengo trabajo que hacer en mi sitio. ¡Son los mejores!

  2. Elementor tiene una función que te permite configurar animaciones para los popups. Esto te permite hacer que el popup se deslice desde la parte inferior de la página web como una tarjeta en lugar de simplemente aparecer como un popup tradicional. Esto también se puede hacer usando herramientas como OptinMonster con su función "slide-in".

  3. ¡Estaba buscando esto para agregar un popup de formulario de contacto a un sitio de WordPress! La capacidad de capturar leads directamente es invaluable, y los popups ofrecen una forma conveniente de captar la atención del usuario. Las instrucciones paso a paso con recomendaciones de plugins facilitan la implementación. Gracias por compartir este útil recurso.

  4. Esto está bien, pero ¿puedes explicar/mostrar cómo hacer esto sin OptinMonster? No quiero tener que comprar un segundo plugin solo para mostrar un formulario en un popup. Esto debería ser factible con WP Forms y un plugin de lightbox gratuito.

  5. Antes de comprar, quiero preguntar, ¿puedo tener dos botones de llamada a la acción en una ventana emergente? Quiero dos botones, uno para descargar mi app de la App Store y el segundo de la Play Store.

  6. Hola,

    Antes de comprar Optinmonster, ¿puedes decirme si es totalmente adaptable a móviles para tener un formulario dentro de la ventana emergente del lienzo?

    Gracias.

    Saludos,
    Jhorene

  7. ¿Hay alguna forma de hacer esto en la nueva versión de Optin Monster? Esto funcionó muy bien cuando usaba el plugin local de WP, pero ahora que he cambiado a la nueva OM, parece que no reconoce el shortcode de Gravity.

    ¿Algún consejo o sugerencia?

  8. ¿podría esto funcionar también en una navegación de Wordpress? Estoy teniendo algunos problemas para agregar el bit de datos-optin-slug a través del sistema de menús de WP.

Deja una respuesta

Gracias por elegir dejar un comentario. Ten en cuenta que todos los comentarios son moderados de acuerdo con nuestra política de comentarios, y tu dirección de correo electrónico NO será publicada. Por favor, NO uses palabras clave en el campo del nombre. Tengamos una conversación personal y significativa.