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.

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

Una ventana emergente de formulario de contacto facilita que los visitantes se comuniquen, sin tener que buscar tu página de contacto o abandonar la página en la que se encuentran.

Cada sitio web de WordPress necesita un formulario de contacto para que los usuarios envíen preguntas, comentarios o problemas.

Sin embargo, si tu formulario de contacto solo está en una página, es difícil que la gente lo encuentre. Como resultado, tus usuarios pueden terminar abandonando tu sitio antes de contactarte, y podrías perder clientes potenciales y conversiones.

Una ventana emergente de formulario de contacto ayuda a resolver este problema al permitir que tus visitantes vean rápidamente el formulario haciendo clic en un botón. De esta manera, pueden ponerse en contacto contigo desde cualquier página en la que se encuentren.

Este tipo de formulario de contacto también ayuda a mantener a las personas en tu sitio web, ya que no tienen que salir de la página que están viendo. Además, puedes hacer crecer tu lista de correo electrónico usando una ventana emergente de formulario de contacto.

Dicho esto, primero necesitarás crear un formulario de contacto y mostrarlo en una ventana emergente en tus páginas web.

Pero no te preocupes. En las siguientes secciones, te guiaremos a través de la creación de un formulario de contacto y su adición a una ventana emergente 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:

1. Paso 1: Crea un formulario de contacto de WordPress
2. Paso 2: Agrega una ventana emergente de formulario de contacto a tu sitio de WordPress
3. Consejo adicional: Impulsa tus suscripciones emergentes
4. Preguntas frecuentes: Cómo agregar una ventana emergente de formulario de contacto en WordPress
5. Tutorial en video
6. Explora nuestras guías de formularios de WordPress

¿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 entre las que puedes elegir, pero recomendamos usar WPForms, ya que es el mejor constructor de formularios para principiantes.

Nosotros mismos lo usamos 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.

WPForms es un plugin de formularios amigable para principiantes que ofrece un constructor de arrastrar y soltar para crear formularios de contacto en WordPress con solo unos clics. También ofrece plantillas de formularios preconstruidas y muchas opciones de personalización.

Para este tutorial, usaremos la versión WPForms Lite, que es gratuita y ofrece una plantilla de formulario de contacto.

Sin embargo, también puedes usar su versión premium para desbloquear más funciones. Por ejemplo, WPForms Pro ofrece más de 2,000 plantillas de formularios, más opciones de personalización, potentes complementos y la capacidad de cobrar pagos en línea sin tarifas de transacción adicionales.

Para empezar, primero necesitarás instalar y activar el plugin WPForms Lite. Si necesitas ayuda, puedes consultar nuestra guía paso a paso sobre cómo instalar un plugin de WordPress.

Una vez que el plugin esté activo, estarás listo para crear tu formulario de contacto. Todo lo que tienes que hacer es ir a WPForms » Agregar Nuevo desde tu panel de WordPress.

En la siguiente pantalla, puedes proceder a 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.

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.

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 las posiciones de cada campo en el formulario.

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

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

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, cambiar el texto del botón de envío, habilitar protección antispam, y más.

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.

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

WPForms usará ‘Mensaje’ como el tipo de confirmación predeterminado. Al enviar un formulario, esto mostrará a tus visitantes un mensaje de agradecimiento.

Sin embargo, puedes cambiar el tipo de mensaje y redirigir a los usuarios a una página específica en tu sitio web cuando completen un formulario.

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.

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 una nueva ventana emergente, puedes seleccionar la opción ‘usar un shortcode’.

WPForms mostrará entonces el shortcode de tu formulario de contacto tan pronto como hagas clic en el enlace. Te sugerimos mantener esta pestaña/ventana abierta, ya que la necesitarás en el siguiente paso, donde te mostraremos cómo agregar tu formulario de contacto en una ventana emergente.

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.

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.

Primero, vamos a registrar una cuenta yendo al sitio web de OptinMonster. Simplemente visita el sitio web y haz clic en el botón ‘Obtener OptinMonster Ahora’.

A continuación, necesitarás instalar y activar el plugin gratuito de OptinMonster en tu sitio web. 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’.

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

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

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.

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

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. Localicemos el bloque ‘WPForms’, luego arrástralo y suéltalo en tu plantilla.

Después de eso, deberás hacer clic en el menú desplegable ‘Selección de Formulario’ en la configuración del bloque en el menú de la izquierda.

Luego, selecciona la opción ‘Agregar Shortcode Manualmente’.

Desde aquí, puedes ingresar el shortcode de tu formulario de contacto de WPForms en el bloque. Para encontrar el código, deberás volver a la 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 agregues el shortcode.

Esto es normal, ya que tu formulario de contacto aparecerá cuando se publique la campaña.

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.

Sugerimos usar la segmentación MonsterLink (Al hacer clic). De esta manera, tu popup aparecerá cuando un visitante haga clic en un enlace o un botón.

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.

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>

Sin embargo, para incrustar el enlace en tu publicación o página de blog de WordPress, solo necesitas la URL del código.

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

Después de eso, puedes ingresar un 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, es hora de agregar la URL de MonsterLink a tu botón. Haz clic en el botón, luego en el botón insertador de enlaces y pega la URL.

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.

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.

Puedes ser creativo y experimentar con diferentes configuraciones. Cuando estés satisfecho con la configuración, procede a hacer clic en el botón ‘Siguiente’.

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.

Ahora, estás listo para lanzar tu campaña y publicar tu popup de formulario de contacto. Para hacerlo, querrás ir a la pestaña ‘Publicar’ en la parte superior.

A continuación, puedes hacer clic en el botón ‘Vista previa’ antes de publicar tu campaña. Esto te mostrará una vista previa en vivo de cómo se verá tu popup en tu sitio web.

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

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.

Para hacer esto, deberás navegar a OptinMonster » Campañas. Desde aquí, simplemente haz clic en el menú desplegable ‘Estado’ y cámbialo de ‘Pendiente’ a ‘Publicar’.

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.

¡Ahí lo tienes!

Has creado con éxito un plugin de formulario de contacto en WordPress. Es más, lo has hecho asegurándote de que el formulario no sea intrusivo.

Consejo adicional: Impulsa tus suscripciones emergentes

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, debes centrarte en crear ventanas emergentes útiles y relevantes en lugar de intrusivas.

Primero, el tiempo es clave. Las ventanas emergentes que aparecen demasiado pronto pueden frustrar a los usuarios, así que intenta mostrarlas después de que un visitante haya desplazado o pasado algún tiempo en tu sitio.

La personalización es otro factor que cambia el juego. Para que tus ventanas emergentes se sientan más relevantes, debes adaptarlas a lo que los usuarios están haciendo, como ofrecer un descuento en un producto que están viendo.

Para fomentar una acción rápida, crea urgencia con frases como “Oferta por tiempo limitado” o aprovecha el miedo a perderse algo (FOMO) destacando lo que podrían ganar al actuar ahora.

Agregar prueba social, como reseñas o estadísticas, también puede generar confianza y hacer que tus popups sean más convincentes. No olvides el papel del color: tonos llamativos pueden captar la atención, mientras que tonos más suaves generan confianza y armonía.

Al combinar estas estrategias, puedes crear popups que capten la atención, conecten con tu audiencia y generen acción sin sentirse intrusivos. Para más información sobre este tema, puedes consultar nuestra guía sobre cómo usar la psicología de los popups 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!

Explora nuestras guías de formularios de WordPress

Esperamos que este artículo te haya ayudado a aprender cómo agregar un popup de formulario de contacto en WordPress. A continuación, también puedes consultar nuestras guías sobre:

• Cómo usar formularios de contacto para hacer crecer tu lista de correo electrónico en WordPress
• Cómo crear un formulario de contacto con múltiples destinatarios
• Cómo enviar correos electrónicos de confirmación después de enviar formularios de WordPress
• Cómo rastrear y reducir el abandono de formularios
• El formulario de WordPress no funciona: consejos para solucionar problemas
• La guía definitiva para usar formularios de WordPress

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.