Recientemente recibimos un correo electrónico de un usuario preguntando: ¿Cómo coloco mi formulario de contacto en una ventana emergente para mi sitio de WordPress? Esta es una tendencia común en muchos sitios donde cuando un usuario hace clic en el botón o enlace de contacto, en lugar de ir a una nueva página, el formulario de contacto se abre en una ventana emergente. En este artículo, le mostraremos cómo agregar una ventana emergente de formulario de contacto en WordPress que funcionará para casi cualquier plugin de formulario de contacto. También le mostraremos cómo abrir la ventana emergente solo cuando un usuario hace clic en el enlace o botón para garantizar la mejor experiencia de usuario.
Para hacerlo simple, hemos creado un video tutorial sobre cómo agregar una ventana emergente de formulario de contacto que puede ver a continuación.
Sin embargo, si solo desea seguir las instrucciones de texto, puede seguir nuestro tutorial paso a paso sobre cómo agregar una ventana emergente de formulario de contacto en WordPress.
Paso 0: guía de introducción
Para este tutorial, necesitará instalar y activar dos plugins.
Primero, necesita el plan profesional OptinMonster que viene con el tipo de módulo Canvas. OptinMonster es el mejor plugin emergente de WordPress del mercado y lo ayuda a convertir a los visitantes del sitio web en suscriptores y clientes.
A continuación, deberá tener un plugin para el formulario de contacto como WPForms, Formas de gravedad, Formulario de contacto 7etc.
Por el bien de este artículo, usaremos la versión gratuita de nuestro plugin de formulario de contacto favorito: WPForms Lite.
Supongamos que tiene ambos plugins instalados y activados. Si necesita ayuda, consulte nuestra guía paso a paso sobre cómo instalar un plugin de WordPress.
Descargo de responsabilidad: WPForms y OptinMonsters fueron creados por el fundador de TrucosWP, Syed Balkhi.
Dicho esto, pasemos a crear un formulario de contacto en WordPress.
Paso 1: crear un formulario de contacto con WPForms
Primero debe crear un nuevo formulario de contacto con WPForms. Si ya tiene un formulario de contacto creado con WPForm, puede omitir este paso.
Haga clic en el menú WPForms en la barra lateral de administración de WordPress, luego haga clic en el botón Agregar nuevo.
Esto iniciará el Creador de formularios. Simplemente ingrese un nombre para el formulario, como «Contáctenos» y luego haga clic en la plantilla «Formulario de contacto simple» para continuar.
El creador de formularios lo llevará al editor de campo. Puede agregar o eliminar campos del formulario o reorganizarlos con solo arrastrar y soltar.
Una vez hecho esto, debe hacer clic en el botón Guardar para guardar sus cambios. Tu formulario de contacto ya está listo.
Debes visitar WPForms »Todos los formularios página. Allí encontrará su formulario de contacto. Junto a él, encontrará un código corto. Necesitará este código corto en el siguiente paso.
Si necesita instrucciones más detalladas, consulte nuestra guía paso a paso sobre cómo crear un formulario de contacto en WordPress.
Ahora que tenemos un formulario de contacto listo, pasemos al siguiente paso y creemos una ventana emergente de caja de luz en WordPress.
Paso 2: Crear una ventana emergente de WordPress usando OptinMonster
Lo primero que debemos hacer es crear una ventana emergente modal usando OptinMonster.
Debe crear una nueva opción haciendo clic en OptinMonster en el menú de administración de WordPress, luego haga clic en el botón Crear nueva opción.
Esto lo llevará al sitio web de OptinMonster, donde creará su ventana emergente. Primero debe proporcionar un título para su campaña. Puede nombrarlo como desee, por ejemplo, «ventana emergente de formulario de contacto».
A continuación, debe seleccionar su sitio web en el menú desplegable. Haga clic en Lienzo debajo de la opción «Seleccione su diseño».
OptinMonster le mostrará las plantillas disponibles. Actualmente, solo está disponible la plantilla de pizarra para Canvas. Haga clic en la plantilla para continuar.
Esto lo llevará a la pantalla del Personalizador de Optin. Notarás que Canvas está en blanco por diseño. Se hace de esta manera, por lo que puede agregar lo que quiera mientras usa el poder de OptinMonster. Puede agregar un formulario de registro, un cuadro similar a Facebook, encuestas, códigos de cupón o, como estamos haciendo en este ejemplo, un formulario de contacto.
En la pestaña Diseño, puede elegir la altura y el ancho de su lienzo. De forma predeterminada, está configurado en 700 x 350 px. Establecemos la altura en al menos 520.
En el cuadro «HTML personalizado», ingresará el código corto del formulario de contacto junto con cualquier otro HTML personalizado que desee agregar.
Aquí hay un ejemplo de código HTML que usamos para crear la ventana emergente modal para este tutorial.
<h3>Do You Have Any Questions?</h3> <p class="tagline">Want to ask us more about our services? Simply fill out this form and we will get back to you as soon as possible. </p> [wpforms id="119"]
Tenga en cuenta que también hemos incorporado el código corto de WPForms. Si está utilizando otro formulario de contacto, simplemente reemplace el shortcode con el shortcode del formulario de contacto.
Después del HTML personalizado, la siguiente opción es insertar su propio CSS personalizado. Debajo del cuadro CSS personalizado, verá una cadena de texto aleatoria similar a esta html div # om-mw7pzo63ch6wpfzi. Este es el prefijo CSS que utilizará en su CSS personalizado.
Aquí está el CSS que usamos para crear la ventana emergente modal para este tutorial.
html div#om-mw7pzo63ch6wpfzi div#om-canvas-whiteboard-optin {
background-color:#f8f8f8;
}
html div#om-mw7pzo63ch6wpfzi h3 {
text-align:center;
}
html div#om-mw7pzo63ch6wpfzi .tagline {
font-style:italic;
}
html div#om-mw7pzo63ch6wpfzi .wpforms-container-full .wpforms-form .wpforms-field {
padding: 10px 0;
clear: both;
}
html div#om-mw7pzo63ch6wpfzi .wpforms-container-full .wpforms-form .wpforms-field-label {
display: block;
font-weight: 700;
font-size: 16px;
float: none;
line-height: 1.3;
margin: 0 0 4px 0;
padding: 0;
}
html div#om-mw7pzo63ch6wpfzi .wpforms-container-full .wpforms-form .wpforms-field-hp {
display: none !important;
position: absolute !important;
left: -9000px !important;
}
No se preocupe si no puede obtener una vista previa ahora, puede editar el CSS más tarde. Podrá usar la herramienta Inspeccionar elemento de su navegador para averiguar qué clases y selectores de CSS desea apuntar y luego agregar CSS personalizado editando su opción.
Ahora que hemos terminado con la parte de diseño. Pasemos a la pestaña de configuración en el personalizador.
Cambie tanto la «Duración de la cookie de opción» y la «Duración de la cookie de éxito de la opción» a 0. Esto evitará que OptinMonster establezca la duración de la cookie.
También debe cambiar el «Mensaje de éxito de Optin». De forma predeterminada, agradecemos a los usuarios por registrarse, pero lo estamos usando en un formulario de contacto. Debe cambiar el mensaje de éxito para agradecer a los usuarios que se hayan puesto en contacto con usted.
Dado que nuestra ventana emergente solo aparecerá cuando un usuario haga clic en un enlace o botón, esto significa que debemos habilitar la activación manual. Marque la casilla debajo de «¿Cargar en disparador manual?» opción.
Haga clic en el botón Guardar para almacenar la configuración de activación, luego haga clic en el botón Cerrar para salir de la personalización.
Paso 3: agregar ventanas emergentes en su sitio de WordPress
Regrese a su área de administración de WordPress y haga clic en OptinMonster. Verá su lista de suscripciones. Si no ve su suscripción, haga clic en el botón Actualizar opciones.
Haga clic en el enlace «Cambiar la configuración de salida» bajo su consentimiento. Esto lo llevará a la configuración de salida de la ventana emergente.
Primero debe marcar la casilla junto a las opciones «Habilitar suscripción en el sitio» y «Subir suscripción globalmente». Si no los marca, la ventana emergente no aparecerá en su sitio.
Desplácese hacia abajo en la página y verá la opción «Analizar contenido para código corto». Asegúrese de que esté marcado; de lo contrario, OptinMonster no analizará los códigos cortos dentro de su ventana emergente.
Luego, debe ingresar el código corto que ha incluido en su ventana emergente. Este es el código abreviado del formulario de contacto.
Haga clic en Guardar configuración para guardar los cambios.
Agregar un enlace o botón para activar la ventana emergente del formulario de contacto
Primero necesitará su optin slug de OptinMonster. Haga clic en el icono de OptinMonster en la barra lateral de WordPress. Verá la barra de suscripción junto a su título de suscripción.
Cree una nueva página en WordPress o edite una publicación o página donde desee agregar el enlace del formulario de contacto o el botón emergente. En el editor de publicaciones, cambie al editor de texto y agregue su enlace emergente de esta manera:
<a href="#" class="manual-optin-trigger" data-optin-slug="mw7pzo63ch6wpfzi">contact us</a>
No olvide reemplazar la barra de opciones de datos con la suya propia.
Guarde sus cambios y visite su publicación / página. Haga clic en el enlace para ver la ventana emergente del formulario de contacto en acción.
Puede utilizar este enlace en cualquier lugar de su sitio de WordPress. Puede agregarlo a publicaciones o páginas, a widgets de texto, incluso en sus plantillas de WordPress.
Eso es todo. Esperamos que este artículo le haya ayudado a aumentar sus tasas de conversión mediante el uso de una ventana emergente de formulario de contacto en WordPress. También puede comprobar cómo OptinMonster nos ayudó a aumentar nuestros suscriptores de correo electrónico en un 600%.
¿Te ha resultado útil??
0 / 0