Recientemente recibimos un correo electrónico de un usuario que pregunta: ¿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 un formulario emergente de contacto en WordPress que funcionará para casi cualquier complemento de formulario de contacto. También le mostraremos cómo abrir la ventana emergente solo cuando un usuario hace clic en un enlace o botón para garantizar la mejor experiencia de usuario.
Sin embargo, si solo desea seguir 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: Comenzando
Para este tutorial, deberá instalar y activar dos complementos.
Primero, necesitas el plan profesional de OptinMonster que viene con el tipo de formulario Canvas. OptinMonster es el mejor plugin emergente para WordPress.
A continuación, deberá tener un complemento de formulario de contacto como WPForms, Gravity Forms, Contact Form 7, etc.
Por el bien de este artículo, utilizaremos la versión gratuita de nuestro complemento de formulario de contacto favorito: WPForms Lite.
Estamos asumiendo que ha instalado y activado ambos complementos. Si necesitas ayuda
sitio
Habiendo dicho eso, pasemos a crear un formulario de contacto en WordPress.
Paso 1: Crear un formulario de contacto usando WPForms
Primero necesita 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 y luego haga clic en el botón Agregar nuevo.
Esto lanzará el Creador de Formularios. Simplemente ingrese un nombre para su formulario, por ej. ‘Contáctenos’ y luego haga clic en la plantilla ‘Formulario de contacto simple’ para continuar.
El creador de formularios lo llevará al editor de campos. Puede agregar o eliminar campos de su formulario o reorganizarlos simplemente arrastrando y soltando.
Una vez que haya terminado, debe hacer clic en el botón Guardar para almacenar sus cambios. Su formulario de contacto ya está listo.
Tienes que visitar WPForms »Todas las formas página. Encontrará su formulario de contacto allí. Junto a él encontrarás 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 lightbox en WordPress.
Paso 2: Crear una ventana emergente de WordPress usando OptinMonster
Lo primero que debemos hacer es crear una ventana emergente modal utilizando OptinMonster.
Necesita crear una nueva opción haciendo clic en OptinMonster en el menú de administración de WordPress, y 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. Puedes ponerle el nombre que quieras, por ej. ‘Formulario de contacto emergente’.
A continuación, debe seleccionar su sitio web desde el menú desplegable. Haga clic en Lienzo en la opción ‘Seleccionar su diseño’.
OptinMonster te mostrará las plantillas disponibles. Actualmente, solo hay una plantilla de pizarra disponible para Canvas. Haga clic en la plantilla para continuar.
Esto lo llevará a la pantalla Optin Customizer. Notará que Canvas está en blanco por diseño. Se hace de esa manera, por lo que puede agregar casi cualquier cosa que desee mientras usa el poder de OptinMonster. Puede agregar un formulario de registro, un buzón de Facebook, encuestas, códigos de cupones o, como en este ejemplo, un formulario de contacto.
Debajo de la pestaña de diseño puede elegir el ancho de alto de su lienzo. Por defecto, está configurado a 700 x 350 px. Establezcamos la altura en 520 como mínimo.
En el cuadro «HTML personalizado», ingresará el código abreviado de su formulario de contacto junto con cualquier otro HTML personalizado que desee agregar.
Aquí hay un ejemplo de HTML que usamos para crear el menú emergente modal para este tutorial.
¿Tiene usted alguna pregunta?
¿Quieres preguntarnos más sobre nuestros servicios? Simplemente complete este formulario y nos pondremos en contacto con usted lo antes posible.
[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 código corto con el código abreviado de su formulario de contacto.
Después del HTML personalizado, la siguiente opción es ingresar su CSS personalizado. Debajo del cuadro de CSS personalizado, verá una cadena de texto aleatorio que se parece a esto html div # om-mw7pzo63ch6wpfzi . Este es el prefijo CSS que usará en su CSS personalizado.
Aquí está el CSS que usamos para crear el menú emergente modal para este tutorial.
html div # om-mw7pzo63ch6wpfzi div # om-canvas-whiteboard-optin {
color de fondo: # f8f8f8;
}
html div # om-mw7pzo63ch6wpfzi h3 {
text-align: center;
}
html div # om-mw7pzo63ch6wpfzi .tagline {
estilo de fuente: cursiva;
}
html div # om-mw7pzo63ch6wpfzi .wpforms-contenedor-completo .wpforms-form .wpforms-field {
relleno: 10px 0;
Limpia los dos;
}
html div # om-mw7pzo63ch6wpfzi .wpforms-contenedor-completo .wpforms-form .wpforms-field-label {
bloqueo de pantalla;
font-weight: 700;
tamaño de letra: 16px;
flotar: ninguno;
línea-altura: 1.3;
margen: 0 0 4px 0;
relleno: 0;
}
html div # om-mw7pzo63ch6wpfzi .wpforms-contenedor-completo .wpforms-form .wpforms-field-hp {
pantalla: ninguna! importante;
posición: absoluta! importante;
izquierda: -9000px! importante;
}
No se preocupe si no puede ver la vista previa ahora, puede ajustar su CSS más tarde. Podrá utilizar la herramienta Inspeccionar Elemento de su navegador para descubrir qué clases y selectores de CSS desea apuntar y luego agregar CSS personalizado editando su Optin.
Ahora que hemos terminado con la parte de diseño. Pasemos a la pestaña de configuración en el personalizador.
Cambie la «Duración de la cookie de Optin» y la «Duración de la cookie de Optin Success» a 0. Esto evitará que OptinMonster configure la cookie de duración.
También necesita cambiar el ‘Mensaje de éxito Optin’. De manera predeterminada, agradece a los usuarios por suscribirse, pero lo estamos usando en un formulario de contacto. Debería cambiar el mensaje de éxito para agradecer a los usuarios por ponerse en contacto con usted.
Dado que nuestra ventana emergente solo aparecerá cuando un usuario haga clic en un enlace o un botón, esto significa que debemos habilitar el activador manual. Marque la casilla debajo de la opción ‘Cargar con disparador manual’.
Haga clic en el botón Guardar para almacenar su configuración de opciones, luego haga clic en el botón Cerrar para salir del personalizador.
Paso 3: Agregar ventana emergente en su sitio de WordPress
Vuelva a su área de administración de WordPress y haga clic en OptinMonster. Verá su lista de optins. Si no ve su optin, haga clic en el botón refresh optins.
Clickea en el ‘Editar configuración de salida’ enlace debajo de tu optin Esto lo llevará a la configuración de salida para la ventana emergente.
Primero debe marcar la casilla junto a ‘Habilitar optin en el sitio’ y ‘Load optin globalmente’ opciones. Si no los verifica, la ventana emergente no aparecerá en su sitio.
Desplázate hacia abajo en la página y verás la opción ‘Parse contenido para códigos cortos’ . Asegúrese de que esté marcado, de lo contrario, OptinMonster no analizará los códigos cortos dentro de su ventana emergente.
A continuación, debe ingresar el código breve que ha incluido en su ventana emergente. Este es su código abreviado de formulario de contacto.
Haga clic en la configuración de guardar para almacenar sus cambios.
Agregar enlace o botón para activar la ventana emergente de formulario de contacto
Primero necesitarás la babosa OptinMonster optin’s slug. Haga clic en el ícono OptinMonster en su barra lateral de WordPress. Verás el optin slug junto a tu título de optin.
Cree una nueva página en WordPress o edite una publicación o página donde desee agregar el enlace o botón emergente del formulario de contacto. En el editor de publicaciones, cambie al editor de texto y agregue su enlace emergente de esta manera:
Contáctenos
No olvides reemplazar el data-optin-slug con tu propio optin slug.
Guarde sus cambios y visite su publicación / página. Haga clic en el enlace para ver su formulario de contacto emergente en acción.
Puede usar 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 lo ayude a aumentar sus tasas de conversión mediante el uso de un formulario de contacto emergente en WordPress. También es posible que desee comprobar cómo OptinMonster nos ayudó a aumentar nuestros suscriptores de correo electrónico en un 600%.
