Creating A Contact Form Popup In Wordpress

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

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 todos los complementos 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.

Para facilitarle las cosas, hemos creado un video tutorial sobre cómo agregar una ventana emergente de formulario de contacto que puede ver a continuación. Suscríbase a MundoCMS Sin embargo, si solo desea seguir las instrucciones basadas en texto, puede seguir nuestro tutorial paso a paso sobre cómo agregar una ventana emergente de formulario de contacto en WordPress.

Paso 0: primeros pasos

Para este tutorial, necesitará instalar y activar dos complementos. En primer lugar, necesita el plan profesional de OptinMonster que viene con el tipo de formulario Canvas. OptinMonster es el mejor complemento emergente de WordPress que existe y lo ayuda a convertir a los visitantes del sitio web en suscriptores y clientes. Luego, necesitará un complemento de formulario de contacto como WPForms, Gravity Forms, Contact Form 7, etc. Para los propósitos de este artículo, usaremos la versión gratuita de nuestro complemento de formulario de contacto favorito: WPForms Lite. Suponemos que ha instalado y activado ambos complementos. Si necesita ayuda, consulte nuestra guía paso a paso sobre cómo instalar un complemento de WordPress. Descargo de responsabilidad: WPForms y OptinMonsters fueron creados por el fundador de MundoCMS, Syed Balkhi. Dicho esto, pasemos a la creación de un formulario de contacto en WordPress.

Paso 1: cree un formulario de contacto con WPForms

Primero debe crear un nuevo formulario de contacto con WPForms. Si ya ha creado un formulario de contacto 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.

Agregue Un Nuevo Formulario De Contacto En Wordpress Usando Wpforms
Esto lanzará el generador de formularios. Simplemente ingrese un nombre para su formulario, por ejemplo, «Contáctenos», luego haga clic en la plantilla «Formulario de contacto simple» para continuar.
Crea Un Nuevo Formulario De Contacto
El Creador de formularios lo llevará al Editor de campos. Puede agregar o eliminar campos de su formulario o reorganizarlos simplemente arrastrándolos y soltándolos.
Modificar Los Campos Del Formulario De Contacto
Una vez que haya terminado, debe hacer clic en el botón Guardar para guardar los 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.
Código Corto Del Formulario De Contacto
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, demos el siguiente paso y creemos una ventana emergente de caja de luz en WordPress.

Paso 2: Cree una ventana emergente de WordPress usando OptinMonster

Lo primero que debemos hacer es crear una ventana emergente modal usando OptinMonster. Debe crear una nueva suscripción haciendo clic en OptinMonster en el menú de administración de WordPress y luego haciendo clic en el botón Crear una nueva suscripción.
Nueva Suscripció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 de formulario de contacto».
Configura Tu Optin
Luego, 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á los modelos disponibles. Actualmente, solo la plantilla de pizarra está disponible 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 esa manera, por lo que puede agregar prácticamente cualquier cosa que desee mientras usa el poder de OptinMonster. Puedes agregar un formulario de registro, una casilla tipo facebook, encuestas, códigos de descuento o, como hacemos en este ejemplo, un formulario de contacto.
Agregar Css Y Html Personalizados A La Opción De Lienzo
En la pestaña de diseño, puede elegir el ancho de la altura de su lienzo. De forma predeterminada, está configurado en 700 x 350 px. Establezcamos la altura en al menos 520. En el campo «HTML personalizado», ingresará el código corto para su formulario de contacto, así como cualquier otro HTML personalizado que desee agregar. Aquí hay un ejemplo del HTML que usamos para crear la ventana emergente modal para este tutorial.

¿Tiene preguntas?

¿Quieres preguntarnos más sobre nuestros servicios? Simplemente complete este formulario y nos comunicaremos con usted lo antes posible.

[wpforms id=»119″]

Tenga en cuenta que también hemos integrado el código corto de WPForms en él. Si está utilizando otro formulario de contacto, simplemente reemplace el código corto con el código corto del formulario de contacto. Después del HTML personalizado, la siguiente opción es ingresar su CSS personalizado. Debajo del cuadro CSS personalizado, verá una cadena de texto aleatoria que se ve así html div # om-mw7pzo63ch6wpfzi. Este es el prefijo CSS que usará 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 {color de fondo: # f8f8f8; } html div # om-mw7pzo63ch6wpfzi h3 {alineación de texto: centro; } html div # om-mw7pzo63ch6wpfzi .tagline {estilo de fuente: cursiva; } html div # om-mw7pzo63ch6wpfzi .wpforms-container-full .wpforms-form .wpforms-field {padding: 10px 0; aclarar ambos; } html div # om-mw7pzo63ch6wpfzi .wpforms-container-full .wpforms-form .wpforms-field-label {display: block; peso de la fuente: 700; tamaño de fuente: 16px; flotar: ninguno; altura de la fila: 1.3; margen: 0 0 4px 0; acolchado: 0; } html div # om-mw7pzo63ch6wpfzi .wpforms-container-full .wpforms-form .wpforms-field-hp {display: none! 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. Puede usar la herramienta Inspeccionar elementos en su navegador para descubrir las clases de CSS y los selectores a los que desea apuntar, luego agregar CSS personalizado modificando 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.
Configuración De Optin
También debe cambiar el «Mensaje de éxito de Optin». De forma predeterminada, agradece a los usuarios por registrarse, pero lo usamos en un formulario de contacto. Debe editar 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, eso significa que debemos habilitar la activación manual. Marque la casilla debajo de «¿Cargar en activador manual?» opción.
Carga En Gatillo Manual
Haga clic en el botón Guardar para almacenar su configuración de suscripción, luego haga clic en el botón Cerrar para salir del personalizador.

Paso 3: agregar una ventana emergente a su sitio de WordPress

Regrese a su área de administración de WordPress y haga clic en OptinMonster. Verá su lista de opciones. Si no ve su suscripción, haga clic en el botón Actualizar opciones.
Página De Opciones En Su Sitio De Wordpress
Haga clic en el enlace «Cambiar la configuración de salida» debajo de su opción. Esto lo llevará a la configuración de salida de la ventana emergente.
Activa El Opttin En Tu Sitio
Primero debe marcar la casilla junto a las opciones «Habilitar suscripción en el sitio» y «Cargar 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 «Escanear contenido en busca de códigos cortos». Asegúrese de que esté marcado, de lo contrario, OptinMonster no buscará códigos cortos dentro de su ventana emergente.
Habilitar Códigos Cortos En La Ventana Emergente
Luego, debe ingresar el código corto que incluyó en su ventana emergente. Este es el código abreviado de su formulario de contacto. Haga clic en Guardar configuración para guardar sus cambios.

Agregar un enlace o botón para activar la ventana emergente del formulario de contacto

Primero necesitará el slug de su OptinMonster optin. Haga clic en el icono de OptinMonster en su barra lateral de WordPress. Verá la barra de suscripción junto a su título de suscripción.
Optin Babosa
Cree una nueva página en WordPress o edite cualquier publicación o página donde desee agregar el enlace del formulario de contacto o el botón de contexto. En el editor de publicaciones, cambie al editor de texto y agregue su enlace contextual de esta manera: contáctenos No se olvide de reemplazar el data-optin-slug con su propio optin slug. Guarde sus cambios y visite su publicación / página. Haga clic en el enlace para ver la ventana emergente de su formulario de contacto en acción.
Formulario De Contacto Que Se Muestra En Una Ventana Emergente De Caja De Luz
Puede utilizar este enlace en cualquier lugar de su sitio de WordPress. Puede agregarlo a publicaciones o páginas, widgets de texto, incluso en sus plantillas de WordPress. Es todo. Esperamos que este artículo le haya ayudado a aumentar sus tasas de conversión mediante el uso de un formulario de contacto emergente en WordPress. También puede descubrir cómo OptinMonster nos ayudó a aumentar nuestros suscriptores de correo electrónico en un 600%. Si le gustó este artículo, suscríbase a nuestro canal de YouTube para ver tutoriales en video de WordPress. También puede encontrarnos en Twitter y Facebook.

Leave a Reply