Cómo añadir una ventana emergente de formulario de contacto en WordPress

Los formularios de contacto son imprescindibles para conectar con los visitantes de tu sitio web. Nosotros utilizamos uno en nuestro propio sitio y nos ha servido para mantenernos en contacto con nuestros lectores.

Además, si coloca el formulario de contacto en una ventana emergente, los visitantes podrán ponerse en contacto fácilmente, lo que generará más consultas, comentarios / opiniones y posibles conversiones.

Sin embargo, los mensajes / ventanas emergentes pueden resultar intrusivos si no se utilizan con prudencia. Utilizarlas en exceso o en momentos inadecuados puede frustrar a los usuarios. Por lo tanto, es importante encontrar el equilibrio adecuado para que el formulario de contacto emergente sea útil y no moleste.

En WPBeginner, somos grandes fans de WPForms porque es fácil de usar, potente y perfecto para crear todo tipo de formularios. La buena noticia es que puedes usarlo junto con OptinMonster para crear fácilmente un mensaje / ventana emergente de formulario de contacto.

En este artículo, le guiaremos a través de los pasos para añadir un mensaje / ventana emergente de formulario de contacto en WordPress.

¿Por qué utilizar un mensaje / ventana emergente de formulario de contacto?

Todo blog o sitio web en WordPress necesita un formulario de contacto para que los usuarios puedan enviar preguntas, comentarios / opiniones o problemas.

Sin embargo, si el formulario de contacto está solo en una página, es difícil que la gente lo encuentre. Como resultado, los usuarios pueden acabar abandonando su sitio antes de ponerse en contacto con usted, y podría perder clientes potenciales y conversiones.

Una ventana emergente de formulario de contacto ayuda a resolver esta incidencia permitiendo a sus visitantes ver rápidamente el formulario al hacer clic en un botón. De esta forma, pueden ponerse en contacto con usted desde cualquier página en la que se encuentren.

Este tipo de formulario de contacto también ayuda a mantener a los usuarios en su 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 con un formulario de contacto emergente.

Dicho esto, primero tendrá que crear un formulario de contacto y mostrarlo en una ventana emergente en sus páginas web.

Pero no se preocupe. En las siguientes secciones, le guiaremos para crear un formulario de contacto y añadirlo a una ventana emergente en WordPress.

También compartiremos nuestros consejos de expertos para crear una ventana emergente que llame la atención sin ser intrusiva. Este enfoque garantiza que su sitio de WordPress sea fácil de usar y maximiza las oportunidades de interacción.

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

¿Preparados? Primeros pasos.

Paso 1: Crear un formulario de contacto de WordPress

En primer lugar, tendrá que seleccionar un plugin de formulario de contacto de WordPress.

Hay muchas opciones gratuitas y de pago entre las que puede elegir, pero le recomendamos que utilice WPForms, ya que es la mejor opción para principiantes.

Nosotros mismos lo utilizamos en nuestro sitio web para mostrar formularios de contacto, encuestas anuales a usuarios y formularios de migración de sitios. Para más detalles sobre nuestra experiencia con el plugin, marcar / comprobar nuestra reseña WPForms.

WPForms es un plugin de formularios para principiantes que ofrece un maquetador de arrastrar y soltar para crear formularios de contacto en WordPress con sólo unos clics. También ofrece plantillas de formularios prediseñadas y un montón de opciones de personalización.

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

Sin embargo, también puede utilizar su versión premium para desbloquear más características. Por ejemplo, WPForms Pro ofrece más de 2.000 plantillas de formularios, más opciones de personalización, potentes extensiones y la posibilidad de cobrar pagos en línea sin cuotas de transacción adicionales.

Para empezar, primero tendrá que instalar y activar el plugin WPForms Lite. Si necesita ayuda, puede consultar nuestra guía paso a paso sobre cómo instalar un plugin de WordPress.

Una vez que el plugin está activado, usted está listo para crear su formulario de contacto. Todo lo que tiene que hacer es ir a WPForms ” Añadir Nuevo desde su escritorio de WordPress.

Después de eso, WPForms le pedirá que nombre su formulario y seleccione una plantilla.

Después de introducir el nombre del formulario, seleccione la plantilla “Formulario de contacto simple”.

A continuación, puede añadir campos en el formulario utilizando el editor de arrastrar y soltar.

Sólo tiene que arrastrar los campos que desee añadir al formulario desde las opciones que aparecen en el menú de la izquierda. También puede reordenar las posiciones de cada campo en el formulario.

WPForms también le permite personalizar cada campo del formulario de contacto.

Por ejemplo, si hace clic en el campo “Nombre”, obtendrá distintas opciones, como cambiar su etiqueta y formato. Incluso puedes añadir una descripción o marcar cualquier campo como obligatorio / requerido / necesario.

Una vez que haya terminado, siga adelante y haga clic en la opción “Ajustes” para configurar el aviso y la confirmación del formulario.

En la sección “General”, puede cambiar el nombre del formulario, cambiar el texto del botón de envío, activar la protección antispam, etc.

A continuación, puede ir a la opción de ajustes “Notificaciones”. Por defecto, los avisos se envían al correo electrónico del administrador establecido en su sitio web de WordPress.

No obstante, puede enviar su aviso de formulario de contacto a la dirección de correo electrónico que desee. Si desea recibir avisos de envío de formularios en varios correos electrónicos, separe cada correo electrónico con una coma.

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

Ahora, vamos a la opción “Confirmaciones”.

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

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

Una vez que haya terminado de crear un formulario de contacto, asegúrese de hacer clic en el botón “Guardar” de la esquina superior derecha para guardar los cambios.

A continuación, puede hacer clic en la opción “Incrustar” situada en la esquina superior, al lado del botón “Guardar”, para obtener el shortcode del formulario. Necesitarás esta información para mostrar tu formulario en un mensaje / ventana emergente.

Cuando aparezca una nueva ventana emergente, puede seleccionar la opción “utilizar un shortcode”.

WPForms mostrará el shortcode para su formulario de contacto tan pronto como haga clic en el enlace. Le sugerimos que mantenga esta pestaña / ventana abierta, ya que la necesitará en el siguiente paso, donde le mostraremos cómo añadir su formulario de contacto en un mensaje / ventana emergente.

Paso 2: Añadir un formulario de contacto emergente a su sitio de WordPress

Para crear una ventana emergente de formulario de contacto, necesitará un plugin de ventanas emergentes de WordPress.

Recomendamos utilizar OptinMonster, ya que es el mejor plugin de generación de clientes potenciales 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, utilizamos Optinmonster para varias tareas, incluyendo la promoción de ofertas especiales y ofertas en popups, deslizar-ins, y banners de cabecera. Si quieres más información, no dudes en leer nuestra reseña / valoración de OptinMonster.

Para este tutorial, utilizaremos la versión OptinMonster Pro, que incluye una plantilla libre de desorden y reglas de visualización avanzadas para mostrar la ventana emergente.

En primer lugar, vamos a acceder al sitio web de OptinMonster para crear una cuenta. Simplemente visite el sitio web y haga clic en el botón ‘Obtener OptinMonster Ahora’.

A continuación, deberá instalar y activar el plugin gratuito OptinMonster en su sitio web. Para más detalles, puedes seguir nuestra guía sobre cómo instalar un plugin de WordPress.

Una vez activado el plugin, aparecerá el asistente de configuración. Sigue adelante y haz clic en el botón “Conecta tu cuenta existente”.

Aparecerá una ventana emergente y OptinMonster le pedirá que se conecte a su cuenta.

Basta con hacer clic en el botón “Conectar a WordPress”.

Ahora que su cuenta está conectada, lo siguiente que debe hacer es crear una nueva campaña para su mensaje / ventana emergente de formulario de contacto.

Puede empezar yendo a OptinMonster ” Campañas y haciendo clic en el botón “Crear su primera campaña”.

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

Como vamos a crear una ventana emergente de formulario de contacto, seleccione “Ventana emergente” como tipo de campaña.

A continuación, desplácese por la página para elegir una plantilla.

OptinMonster ofrece más de 75 diseños atractivos y de alta conversión para sus mensajes / ventanas emergentes. Puedes seleccionar cualquier plantilla que te guste.

Una vez que haya elegido la plantilla, simplemente introduzca un nombre para su campaña y haga clic en el botón “Empezar a crear”.

Ahora, utilizando el maquetador de arrastrar y soltar de OptinMonster, puede editar su plantilla de mensaje / ventana emergente.

Verás que aparecen diferentes ‘Bloques’ en el menú de la izquierda. Vamos a localizar el bloque ‘WPForms’, a continuación, arrastrar y soltar en su plantilla.

Después, tendrás que hacer clic en el menú desplegable “Selección de formulario” de los ajustes de bloque del menú de la izquierda. A continuación, selecciona la opción “Añadir shortcode manualmente”.

Desde aquí, puede introducir el shortcode de su formulario de contacto WPForms en el bloque. Para encontrar el código, tendrá que volver a los ajustes 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 su formulario de contacto aparecerá cuando se publique la campaña.

A continuación, puede ir a la pestaña “Reglas de visualización” en la parte superior para elegir cuándo debe aparecer el mensaje / ventana emergente en su sitio web.

Por defecto, OptinMonster lo establecerá cuando el tiempo en la página sea de 5 segundos, y el mensaje / ventana emergente aparecerá en cualquier página. Sin embargo, puede cambiar los ajustes de la regla de visualización y seleccionar diferentes desencadenantes y opciones de orientación.

Le sugerimos que utilice la orientación MonsterLink (On Click). De esta forma, su ventana emergente aparecerá cuando un visitante haga clic en un enlace o en un botón.

A continuación, puede hacer clic en el botón “Copiar código de MonsterLink” y añadirlo a cualquier texto, imagen o botón de su sitio web.

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

Su código MonsterLink tendrá este aspecto 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 la entrada o página de su blog de WordPress, sólo necesita la URL del código.

Así es como debería ser la URL:

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

Por ejemplo, supongamos que desea añadir un botón de Contacto en su sitio.

En este caso, puedes empezar por editar cualquier página o entrada e ir a tu editor de WordPress. A continuación, haz clic en el signo (+) de la parte superior y añade un bloque de “Botones”.

A continuación, introduzca el texto del botón y haga clic en el icono de enlace. Por ejemplo, utilizamos “Contacte con nosotros” como texto del botón.

Ahora, es el momento de añadir la URL de MonsterLink a tu botón. Haga clic en el botón, luego en el botón para enlazar y pegue la URL.

Una vez hecho esto, siga adelante y publique su entrada o página de WordPress. El enlace MonsterLink se añadirá al botón “Contacte con nosotros”.

Ahora, volvamos a su campaña de OptinMonster para completar la configuración.

Después de seleccionar MonsterLink como su objetivo y mostrarlo en cualquier página, puede 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, añadir una animación MonsterEffect y reproducir un sonido cuando aparezca el mensaje / ventana emergente.

Puedes ser creativo y experimentar con diferentes ajustes. Cuando esté satisfecho con la configuración, siga adelante y haga clic en el botón “Siguiente”.

OptinMonster mostrará un resumen de sus ajustes de “Regla de visualización”.

Esto le ayudará a establecer correctamente cuándo aparecerán sus campañas en su sitio web.

Ahora, está listo para lanzar su campaña y publicar su mensaje / ventana emergente de formulario de contacto. Para ello, ve 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 le mostrará una vista previa en vivo de cómo se verá su mensaje / ventana emergente en su sitio web.

Cuando esté satisfecho con el aspecto de su campaña, cambie el “Estado de publicación” de “Borrador” a “Publicar”.

Una vez hecho esto, puede salir del maquetador de campañas de OptinMonster y comprobar el estado de su campaña desde su escritorio de WordPress.

Para ello, vaya a OptinMonster “ Campañas. Desde aquí, simplemente haga clic en el menú desplegable “Estado” y cámbielo de “Pendiente” a “Publicar”.

OptinMonster actualizará automáticamente los cambios.

A continuación, deberá ir a donde muestra el botón ‘Contáctenos’ con la integración de MonsterLink y ver el mensaje / ventana emergente del formulario de contacto en acción.

¡Ya está!

Ha creado correctamente 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: Aumente sus suscripciones a ventanas emergentes

Ahora que ya sabe cómo crear un mensaje / ventana emergente de formulario de contacto, el siguiente paso es asegurarse de que mejora la experiencia del usuario en lugar de hacer que los visitantes reboten de su sitio.

Para maximizar las inscripciones, debe centrarse en crear mensajes / ventanas emergentes útiles y relevantes en lugar de intrusivos.

En primer lugar, el momento es clave. Los mensajes / ventanas emergentes que aparecen demasiado pronto pueden frustrar a los usuarios, así que intente mostrarlos después de que el visitante se haya desplazado o haya pasado algún tiempo en su sitio.

La personalización es otro factor que cambia las reglas del juego. Para que tus mensajes / ventanas emergentes parezcan más relevantes, deberías adaptarlos a lo que están haciendo los usuarios, como ofrecerles un descuento en un producto que estén consultando.

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

Añadir pruebas sociales, como reseñas / valoraciones o estadísticas, también puede generar confianza y hacer que tus ventanas emergentes sean más convincentes. No olvides el perfil del color: los tonos llamativos pueden captar la atención, mientras que los suaves generan confianza y armonía.

Combinando estas estrategias, puedes crear ventanas emergentes que llamen la atención, conecten con tu audiencia y lleven a la acción sin parecer agresivo. Para obtener más información sobre este debate, puede marcar / comprobar nuestra guía sobre cómo utilizar la psicología de las ventanas emergentes para aumentar las suscripciones en un 250%.

Tutorial en vídeo

Antes de irte, hemos preparado un video tutorial sobre cómo añadir un mensaje / ventana emergente de formulario de contacto a tu sitio WordPress. ¡No deje de marcarlo / comprobarlo!

Esperamos que este artículo te haya ayudado a aprender cómo añadir una ventana emergente de formulario de contacto en WordPress. A continuación, puede que también desee marcar / comprobar nuestra guía sobre cómo enviar correos electrónicos de confirmación después de los envíos de formularios de WordPress y cómo realizar un seguimiento y reducir el abandono de formularios.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.