Cómo agregar una ventana emergente de formulario de contacto en WordPress
¿Está buscando una manera fácil de mostrar ventanas emergentes de formularios de contacto en su sitio de WordPress?
Los formularios de contacto son excelentes para comunicarse con sus visitantes. Colocarlos en ventanas emergentes facilita que sus clientes se comuniquen 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é usar ventanas emergentes de formularios de contacto?
Cada sitio o blog de WordPress necesita un formulario de contacto para que los usuarios puedan contactarlos con preguntas, comentarios o preguntas.
Sin embargo, si su formulario de contacto está solo en una página, será difícil para las personas encontrarlo y es posible que se muestren reacios a abandonar la página en la que se encuentran.
Como resultado, sus usuarios pueden terminar abandonando su sitio web y usted puede perder clientes potenciales y conversiones.
Las ventanas emergentes del formulario de contacto ayudan a resolver este problema al permitir que sus visitantes vean rápidamente el formulario con solo 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 las personas en su sitio porque no tienen que salir de la página que están viendo. También puede hacer crecer su lista de correo electrónico con la ventana emergente del formulario de contacto.
Dicho esto, primero debe crear un formulario de contacto y luego colocarlo en una ventana emergente para mostrarlo en su página 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, debe elegir un complemento de formulario de contacto de WordPress.
Puede elegir entre muchas opciones gratuitas y de pago, pero recomendamos WPForms ya que es la mejor opción.
WPForms es un complemento de formulario para principiantes que proporciona un generador de arrastrar y soltar que le permite crear formularios de contacto en WordPress con solo unos pocos clics. También ofrece plantillas de formulario preconstruidas y muchas opciones de personalización.
Para este tutorial, utilizaremos la versión WPForms Lite, ya que es gratuita y proporciona plantillas de formularios 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, potentes complementos y le permite cobrar pagos en línea.
Primero, primero debe 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.
Con el complemento activado, ahora puede crear un formulario de contacto.Todo lo que tienes que hacer es ir WPForms » Agregar nuevo desde tu panel de WordPress.
Después de eso, WPForms le pedirá que ingrese un nombre de formulario y elija una plantilla. Continúe y elija la plantilla “Formulario de contacto simple”.
A continuación, puede usar el generador de arrastrar y soltar para agregar campos al formulario.
Simplemente arrastre los campos que desea agregar al formulario desde las opciones disponibles en el menú de la izquierda. También puede reordenar la posición de cada campo en el formulario.
WPForms también le permite personalizar cada campo en su formulario de contacto.
Por ejemplo, si hace clic en el campo de 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 hecho esto, continúe y haga clic en la opción Configuración para configurar las notificaciones y confirmaciones de formularios.
En la configuración general, puede cambiar el nombre del formulario, cambiar el texto del botón de envío, habilitar la protección antispam 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 configuró en su sitio de WordPress.
Sin embargo, puede optar por enviar notificaciones de 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 según sea necesario.
Después de eso, continúe y haga clic en la opción “Confirmar”.
WPForms utilizará “Mensaje” como tipo de confirmación predeterminado y sus visitantes verán un mensaje de agradecimiento al enviar el 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 el formulario.
Una vez que haya creado su formulario de contacto, asegúrese de hacer clic en el botón “Guardar” en la esquina superior derecha para guardar los cambios.
A continuación, haga clic en la opción “Incrustar” en la esquina superior derecha junto al botón “Guardar”. Cuando aparezca una nueva ventana, seleccione la opción “Usar código abreviado”.
Después de hacer clic en el enlace, WPForms mostrará el código corto para su formulario de contacto. Le recomendamos 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 la ventana emergente.
Para crear una ventana emergente de formulario de contacto, necesita un complemento emergente de WordPress.
Recomendamos OptinMonster ya que es el mejor complemento de optimización de conversiones 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 ventanas emergentes.
Primero debe visitar el sitio web de OptinMonster para registrar una cuenta.
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 complementos de WordPress.
Después de activar el complemento, debe conectarlo a su sitio de WordPress.
Para hacer esto, simplemente vaya a OptinMonster » Ajustes Desde su tablero de WordPress, luego haga clic en el botón “Conectar cuenta existente”.
Aparecerá una ventana emergente y OptinMonster le pedirá que se conecte a su cuenta. Simplemente haga clic en el botón “Conectar a WordPress”.
Ahora que su cuenta está conectada, el siguiente paso es crear una nueva actividad para la ventana emergente de su formulario de contacto.
puedes ir primero OptinMonster » Eventos Luego haz clic en el botón “Crea tu primera campaña”.
En la siguiente pantalla, debe elegir un tipo de campaña. Dado que crearemos una ventana emergente de formulario de contacto, seleccione “Ventana emergente” como tipo de campaña.
Después de eso, desplácese hacia abajo para seleccionar la plantilla para la ventana emergente. OptinMonster ofrece más de 75 diseños atractivos y atractivos para sus ventanas emergentes.
Le recomendamos que elija la plantilla Canvas. Esta es una plantilla en blanco perfecta para mostrar su formulario de contacto, ya que los usuarios pueden concentrarse en completar el formulario sin distraerse.
Luego, ingrese un nombre para su campaña y haga clic en el botón “Comenzar a construir”.
Ahora, utilizando el generador de arrastrar y soltar en OptinMonster, puede editar plantillas emergentes. Primero, haga clic en el botón “+ Agregar bloque” en la parte superior.
Ahora verá los diferentes bloques en el menú de la izquierda. Simplemente vaya al bloque HTML y arrástrelo y suéltelo en su plantilla.
Después de eso, debe ingresar su código abreviado de formulario de contacto de WPForms en el bloque HTML.
Para encontrar el código, vuelva a la configuración de incrustación de WPForms y copie el código abreviado.
Ahora, ingrese el código abreviado copiado en el bloque HTML de OptinMonster que dice “Agregar HTML aquí”.
Lo importante a tener en cuenta es que cuando agrega el código abreviado, no verá una vista previa del formulario de contacto en la plantilla.
Esto es normal y su formulario de contacto aparecerá cuando se publique el evento.
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 configurará para que la ventana emergente aparezca en cualquier página cuando el tiempo de permanencia de la página sea de 5 segundos.
Sin embargo, puede cambiar la configuración de la regla de visualización y elegir diferentes opciones de activación y orientación.
Recomendamos usar la segmentación MonsterLink (On Click). De esta manera, cuando un visitante haga clic en un enlace o botón, aparecerá su ventana emergente.
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 enlaces 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 incrustar un enlace en su publicación o página de blog de WordPress, todo lo que necesita es la URL en el código.
https://app.monstercampaigns.com/c/ep6f5qtakxauowbj8097/
Por ejemplo, supongamos que desea agregar un botón Contáctenos a su sitio web. Puede comenzar editando cualquier página o publicación, luego vaya a su editor de WordPress. A continuación, haga clic en el signo más (+) en la parte superior y agregue un bloque de “botón”.
Después de eso, ingrese el texto para su botón y haga clic en el ícono del enlace. Ahora agregue la URL de MonsterLink a su botón.
Una vez hecho esto, publique su publicación o página de WordPress. MonsterLink ahora se agregará a su botón Contáctenos.
A continuación, vuelva a su actividad de OptinMonster para completar la configuración.
Una vez que haya seleccionado MonsterLink como su objetivo y se muestre 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 activa, agregar una animación MonsterEffect y reproducir un sonido cuando aparezca la ventana emergente. Cuando esté satisfecho con la configuración, continúe y haga clic en el botón “Siguiente”.
Después de eso, OptinMonster mostrará un resumen de la configuración de la regla de visualización. Esto ayuda a garantizar que haya configurado correctamente cuándo aparecerá su campaña en su sitio.
Ahora está listo para comenzar su campaña y publicar su formulario de contacto emergente. Para hacer esto, 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á la 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 Publicado.
También puede salir del creador de campañas de OptinMonster y comprobar el estado de la campaña desde el panel de control de WordPress.
solo vamos OptinMonster » Eventos En la columna “Estado”, la campaña emergente del formulario de contacto debe decir “Publicado”.
A continuación, vaya al botón Contáctenos 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 ventanas emergentes de formularios 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 te gustó este artículo, suscríbete a nuestro canal de YouTube para videos tutoriales de WordPress.También puedes encontrarnos en Gorjeo y Facebook.
Los datos expuestos en este sitio web son de índole informativo, no necesariamente están actualizados. Esta información es una recopilación de información de internet.
