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

¿Estás buscando una forma sencilla de mostrar un mensaje / ventana emergente de formulario de contacto en tu sitio web WordPress?

Los formularios de contacto son excelentes para comunicarse con sus visitantes. Colocarlos en una ventana emergente facilita aún más que sus clientes se pongan en contacto con usted acerca de sus productos y servicios.

En este artículo, le mostraremos cómo añadir una ventana emergente de formulario de contacto en WordPress.

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

Todos los sitios web o blogs de WordPress necesitan un formulario de contacto para que los usuarios puedan enviar sus preguntas, comentarios / opiniones o problemas.

Sin embargo, si su formulario de contacto se encuentra solo en una página, es difícil que la gente lo encuentre.

Como resultado, sus 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 este problema permitiendo a sus visitantes ver rápidamente el formulario al hacer clic en un botón, para que puedan ponerse en contacto con usted desde cualquier página en la que se encuentren.

Ayuda a mantener a la gente en su sitio web, ya que no tienen que salir de la página que están viendo. También puede ampliar su lista de correo electrónico con un mensaje / ventana emergente de formulario de contacto.

Dicho esto, primero tendrás que crear un formulario de contacto y luego colocarlo en un mensaje / ventana emergente para mostrarlo en tus páginas web. No te preocupes, te guiaremos para crear un formulario de contacto y añadirlo a una ventana emergente en WordPress.

Cómo crear un formulario de contacto en 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 puedes elegir, pero te recomendamos usar WPForms ya que es la mejor opción.

WPForms es un plugin de formularios para principiantes y ofrece un maquetador de arrastrar y soltar que permite crear un formulario de contacto en WordPress en unos pocos 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 porque es gratuita y ofrece una plantilla de formulario de contacto.

Sin embargo, también puedes utilizar su versión premium para desbloquear más características. Por ejemplo, WPForms Pro ofrece múltiples plantillas de formularios, más opciones de personalización, potentes extensiones y permite cobrar pagos en línea.

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

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

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

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 los ajustes generales, 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 de 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 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.

A continuación, siga adelante y haga clic en la opción Confirmaciones.

WPForms usará ‘Mensaje’ como el tipo de confirmación por defecto, donde sus visitantes verán un mensaje de agradecimiento al enviar un formulario.

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, haga clic en la opción “Incrustar” situada en la esquina superior, al lado del botón Guardar.

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

WPForms mostrará un 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.

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 usar OptinMonster ya que es el mejor plugin de generación de clientes potenciales y optimización de conversiones para WordPress. Más de 1,2 millones de sitios web utilizan esta potente herramienta.

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.

Primero tendrá que acceder al sitio web de OptinMonster para crear una cuenta. Simplemente visite el sitio web y haga clic en el botón ‘Get OptinMonster Now’.

A continuación, deberá instalar y activar el plugin gratuito OptinMonster en su sitio web. Para más detalles, sigue 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 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.

Después, desplácese hacia abajo para elegir una plantilla para su ventana emergente. OptinMonster ofrece más de 75 diseños atractivos y de alta conversión para sus ventanas emergentes.

Puede seleccionar la plantilla que desee. A continuación, 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.

Ahora verá que aparecen diferentes bloques en el menú de la izquierda. Simplemente dirígete al bloque ‘WPForms’ y arrástralo y suéltalo en tu plantilla.

A continuación, deberá hacer clic en el menú desplegable “Selección de formulario” de los ajustes de bloque del menú de la izquierda y seleccionar la opción “Añadir shortcode manualmente”.

Desde aquí, introduzca el shortcode de su formulario de contacto WPForms en el bloque. Para encontrar el código, vuelva a los ajustes de incrustación de WPForms y copie el shortcode.

Algo importante a tener en cuenta es 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 la ventana emergente en su sitio web.

Por defecto, OptinMonster lo establecerá cuando el tiempo en la página sea de 5 segundos, y la ventana emergente aparecerá en cualquier página.

Sin embargo, puede cambiar los ajustes de las reglas de visualización y seleccionar diferentes activadores 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 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.

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

Por ejemplo, digamos que desea añadir un botón de contacto en su sitio. Para empezar, edita cualquier página o entrada y ve al 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, puede introducir un texto para el botón y hacer clic en el icono de enlace.

Ahora añade la URL de MonsterLink a tu botón.

Una vez hecho esto, publique su entrada o página en WordPress. El MonsterLink se añadirá a su botón de contacto.

A continuación, vuelva 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.

Siga adelante y haga clic en el botón “Siguiente” cuando esté satisfecho con los ajustes.

A continuación, OptinMonster mostrará un resumen de los ajustes de las reglas de visualización.

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

Ahora ya puedes lanzar tu campaña y publicar tu ventana emergente de formulario de contacto. Para ello, vaya 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.

También puede salir del maquetador de campañas de OptinMonster y comprobar el estado de su campaña desde su escritorio de WordPress.

Sólo tiene que hacer clic en el menú desplegable “Estado” de la derecha y cambiar el estado de Pendiente a Publicado.

No olvides guardar los cambios.

A continuación, vaya al botón de contacto que creó anteriormente con MonsterLink y vea el mensaje / ventana emergente del formulario de contacto en acción.

Esperamos que este artículo te haya ayudado a aprender cómo añadir una ventana emergente de formulario de contacto en WordPress. También puedes marcar / comprobar nuestra guía sobre cómo elegir el mejor maquetador de sitios web o nuestra comparativa del mejor software de nóminas para pequeñas empresas.

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.