¿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.
¿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
Primero, deberá seleccionar un complemento 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.
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 WPForms Lite versión porque es gratuita 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.
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’.
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.
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.
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.
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 de 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.
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.
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.
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’.
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 usar 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 el Versión de 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 de OptinMonster en tu 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’.
Aparecerá una ventana emergente y OptinMonster le pedirá que se conecte a su cuenta. Simplemente haga clic en el botón ‘Conectarse 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”.
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.
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.
Luego, ingrese un nombre para su campaña y haga clic en el botón ‘Comenzar a construir’.
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.
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.
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.
Ahora, ingrese el código corto copiado en su bloque HTML en OptinMonster, donde dice ‘Agregar HTML aquí’.
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.
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.
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 el MonsterLink (al hacer clic) focalización. De esta manera, su ventana emergente aparecerá cuando un visitante haga clic en un enlace o botón.
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.
Su código 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 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’.
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.
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.
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.
Después de eso, OptinMonster mostrará un resumen de la configuración de la regla de visualización. Esto ayuda a asegurarse de haber configurado correctamente cuándo aparecerán sus campañas en su sitio web.
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.
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’.
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.
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 Gorjeo y Facebook.