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

¿Está buscando una manera fácil de mostrar una ventana emergente de formulario de contacto en su sitio web de WordPress?

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

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

Cómo crear una ventana emergente de formulario de contacto en WordPress

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

Cada sitio web o blog de WordPress necesita un formulario de contacto para que los usuarios puedan comunicarse con sus preguntas, comentarios o problemas.

Sin embargo, si su formulario de contacto está en una sola página, entonces es difícil para las personas encontrarlo y es posible que no estén dispuestas a abandonar la página en la que se encuentran.

Como resultado, sus usuarios pueden terminar abandonando su sitio y usted podría perder potenciales clientes potenciales y conversiones.

Una ventana emergente de formulario de contacto ayuda a resolver este problema al permitir que sus visitantes vean rápidamente el formulario haciendo clic en un botón, para que puedan comunicarse con usted desde cualquier página en la que estén.

Ayuda a mantener a las personas en su sitio web, ya que no tienen que salir de la página que están viendo. También puede hacer crecer su lista de correo electrónico utilizando una ventana emergente de formulario de contacto.

Dicho esto, primero deberá crear un formulario de contacto y luego colocarlo en una ventana emergente para mostrarlo en sus páginas web. No se preocupe, lo guiaremos para crear un formulario de contacto y agregarlo a una ventana emergente en WordPress.

  • Cómo crear un formulario de contacto de WordPress
  • Cómo agregar una ventana emergente de formulario de contacto en su sitio

Cómo crear un formulario de contacto de WordPress

Primero, deberá seleccionar un complemento de formulario de contacto de WordPress.

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

WPForms es un complemento de formulario para principiantes y ofrece un generador de arrastrar y soltar que le permite crear un formulario de contacto en WordPress con solo unos pocos clics. También ofrece plantillas de formulario prediseñadas y muchas opciones de personalización.

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

Sin embargo, también puede usar su versión premium para desbloquear más funciones. Por ejemplo, WPForms Pro ofrece múltiples plantillas de formulario, más opciones de personalización, complementos potentes y le permite cobrar pagos en línea.

Para comenzar, primero deberá instalar y activar el complemento WPForms Lite. Si necesita ayuda, consulte nuestra guía paso a paso sobre cómo instalar un complemento de WordPress.

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

Agregar nuevo formulario en WPForms

Después de eso, WPForms le pedirá que ingrese un nombre para su formulario y seleccione una plantilla. Continúe y seleccione la plantilla ‘Formulario de contacto simple’.

Dar un nombre y seleccionar la plantilla de formulario de contacto

A continuación, puede agregar campos en el formulario utilizando el generador de arrastrar y soltar.

Simplemente arrastre los campos que desea agregar al formulario desde las opciones dadas en el menú a su izquierda. También puede reordenar las posiciones de cada campo en el formulario.

Campos de formulario de arrastrar y soltar

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

Por ejemplo, si hace clic en el campo Nombre, obtendrá diferentes opciones, como cambiar su etiqueta y formato. Incluso puede agregar una descripción o marcar cualquier campo según sea necesario.

Edite la etiqueta y el formato de cada campo

Una vez que haya terminado, continúe y haga clic en la opción ‘Configuración’ para configurar la notificación y la confirmación del formulario.

En la configuración general, puede cambiar el nombre del formulario, cambiar el texto del botón de envío, habilitar la protección contra correo no deseado y más.

Cambiar la configuración de su formulario

A continuación, puede ir a la opción de configuración de Notificaciones. De forma predeterminada, las notificaciones se envían al correo electrónico del administrador que está configurado en su sitio web de WordPress.

Sin embargo, puede optar por enviar la notificación del formulario de contacto a cualquier dirección de correo electrónico que desee. Si desea recibir notificaciones en varios correos electrónicos, separe cada correo electrónico con una coma.

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

Configuración de notificaciones en WPForms

Después de eso, continúe y haga clic en la opción Confirmaciones.

WPForms usará ‘Mensaje’ como el tipo de confirmación predeterminado 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.

Configuración de confirmaciones en WPForms

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

Presione el botón Guardar para almacenar su configuración

A continuación, haga clic en la opción ‘Insertar’ en la esquina superior junto al botón Guardar. Cuando aparezca una nueva ventana, seleccione la opción ‘usar un código corto’.

Haga clic en el enlace usar un código corto

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

Agregue una ventana emergente de formulario de contacto a su sitio de WordPress

Para crear una ventana emergente de formulario de contacto, necesitará un complemento de ventana emergente de WordPress.

Recomendamos utilizar OptinMonster, ya que es el mejor complemento de optimización de conversión y generación de leads para WordPress. Más de 1,2 millones de sitios web utilizan esta poderosa herramienta.

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

Primero deberá registrarse para obtener una cuenta en el sitio web de OptinMonster.

A continuación, instale y active el complemento gratuito OptinMonster en su sitio web. Para obtener más detalles, siga nuestra guía sobre cómo instalar un complemento de WordPress.

Una vez que el complemento esté activo, deberá conectarlo con su sitio web de WordPress.

Para hacer eso, simplemente dirígete a OptinMonster »Configuración desde su panel de WordPress y haga clic en el botón ‘Conectar una cuenta existente’.

Conecte su cuenta de OptinMonster

Aparecerá una ventana emergente y OptinMonster le pedirá que se conecte a su cuenta. Simplemente haga clic en el botón ‘Conectarse a WordPress’.

Haga clic en el botón Conectar a WordPress

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

Puedes empezar yendo a OptinMonster »Campañas y luego haga clic en el botón “Cree su primera campaña”.

Crea una nueva campaña

En la siguiente pantalla, deberá seleccionar un tipo de campaña. Dado que crearemos una ventana emergente de formulario de contacto, seleccione ‘Ventana emergente’ como su Tipo de campaña.

Elija ventana emergente como tipo de campaña

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

Le recomendamos que seleccione la plantilla Canvas. Es una plantilla en blanco y excelente para mostrar su formulario de contacto, ya que los usuarios pueden concentrarse en completar el formulario sin distracciones.

Seleccionar plantilla de lienzo

Luego, ingrese un nombre para su campaña y haga clic en el botón ‘Comenzar a construir’.

Ingrese un nombre para su campaña

Ahora, usando el generador de arrastrar y soltar en OptinMonster, puede editar su plantilla emergente. Para comenzar, haga clic en el botón ‘+ Agregar bloques’ en la parte superior.

Agregar un nuevo bloque

Ahora verá aparecer diferentes Bloques en el menú de su izquierda. Simplemente diríjase al bloque HTML y arrástrelo y suéltelo en su plantilla.

Arrastre el bloque HTML a la plantilla

Después de eso, deberá ingresar el código corto del formulario de contacto de WPForms en su bloque HTML.

Para encontrar el código, vuelva a la configuración de inserción de WPForms y copie el código corto.

Copia el código corto del formulario de contacto

Ahora, ingrese el código corto copiado en su bloque HTML en OptinMonster, donde dice ‘Agregar HTML aquí’.

Agregar código HTML

Una cosa importante a tener en cuenta es que no verá una vista previa del formulario de contacto en la plantilla cuando agregue el código corto.

Esto es normal y su formulario de contacto aparecerá cuando se publique la campaña.

Código corto del formulario de contacto en la plantilla

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.

Pestaña Reglas de visualización en OptinMonster

De forma predeterminada, 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 la configuración de la regla de visualización y seleccionar diferentes activadores y opciones de orientación.

Sugerimos utilizar la segmentación MonsterLink (On Click). De esta manera, su ventana emergente aparecerá cuando un visitante haga clic en un enlace o botón.

Seleccione la orientación de MonsterLink

Después de eso, puede hacer clic en el botón ‘Copiar código MonsterLink’ y agregarlo a cualquier texto, imagen o botón en su sitio web. Para obtener más detalles, puede seguir nuestra guía para principiantes sobre cómo agregar un enlace en WordPress.

Copia tu código MonsterLink

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

Subscribe Now!

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

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

Por ejemplo, supongamos que desea agregar un botón de contacto en su sitio. Puede comenzar editando cualquier página o publicación e ir a su editor de WordPress. A continuación, haga clic en el signo más (+) en la parte superior y agregue un bloque de ‘Botones’.

Agregar un bloque de botones

Después de eso, ingrese un texto para su botón y luego haga clic en el ícono de enlace. Ahora agregue la URL de MonsterLink a su botón.

Incruste el MonsterLink en un botón

Una vez que haya hecho eso, publique su publicación o página de WordPress. El MonsterLink ahora se agregará a su botón de contacto.

A continuación, regrese a su campaña de OptinMonster para completar la configuración.

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

Mostrar condiciones de regla

En la siguiente pantalla, verá opciones para cambiar el tipo de vista de la campaña, agregar una animación MonsterEffect y reproducir un sonido cuando aparezca la ventana emergente. Continúe y haga clic en el botón ‘Siguiente’ cuando esté satisfecho con la configuración.

Mostrar acciones de reglas

Después de eso, OptinMonster mostrará un resumen de la configuración de la regla de visualización. Esto ayuda a asegurarse de que ha configurado correctamente cuándo aparecerán sus campañas en su sitio web.

Mostrar resumen de reglas

Ahora, está listo para llevar su campaña en vivo y publicar la ventana emergente de su formulario de contacto. Para hacer eso, vaya a la pestaña ‘Publicar’ en la parte superior.

A continuación, puede hacer clic en el botón ‘Vista previa’ antes de publicar su campaña. Esto le mostrará una vista previa en vivo de cómo se verá su ventana emergente en su sitio web.

Cuando esté satisfecho con la apariencia de su campaña, cambie el ‘Estado de publicación’ de Borrador a Publicar.

Publica tu ventana emergente de formulario de contacto

Puede salir del creador de campañas de OptinMonster y comprobar el estado de su campaña también desde su panel de WordPress.

Solo ve a OptinMonster »Campañas y debajo de la columna Estado, su campaña emergente de formulario de contacto debe mostrar ‘Publicado’.

Verifique el estado de su campaña

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

Ejemplo en vivo de complemento de formulario de contacto

Esperamos que este artículo le haya ayudado a aprender cómo agregar una ventana emergente de formulario de contacto en WordPress. También puede consultar nuestra guía sobre cómo elegir el mejor creador de sitios web o nuestra comparación del mejor software de nómina de recursos humanos para pequeñas empresas.

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