Cómo añadir un formulario de contacto en WordPress

Recientemente recibimos un correo electrónico de un usuario preguntando: ¿Cómo pongo 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 añadir un popup de formulario de contacto en WordPress que funcionará para casi todos los plugins de formulario de contacto. También le mostraremos cómo abrir la ventana emergente sólo cuando un usuario hace clic en un enlace o botón para garantizar la mejor experiencia de usuario.

Para hacerlo más fácil, hemos creado un video tutorial sobre cómo añadir un formulario de contacto que puede ver a continuación.

Suscribirse a AprenderWP

Sin embargo, si sólo quieres seguir instrucciones de texto, puedes seguir nuestro tutorial paso a paso sobre cómo añadir un formulario de contacto emergente en WordPress.

Paso 0: Primeros pasos

Para este tutorial necesitará instalar y activar dos plugins.

Primero, necesitas el plan profesional de OptinMonster que viene con el tipo de formulario Canvas. OptinMonster es el mejor plugin popup de WordPress del mercado y le ayuda a convertir a los visitantes del sitio web en suscriptores y clientes.

A continuación, necesitará tener un plugin de formulario de contacto como WPForms, Formularios de Gravedad, Formulario de Contacto 7, etc.

Por el bien de este artículo, usaremos la versión gratuita de nuestro plugin de formulario de contacto favorito: WPForms Lite.

Asumimos que ha instalado y activado ambos plugins. Si necesita ayuda, vea nuestra guía paso a paso sobre cómo instalar un plugin de WordPress.

Descargo de responsabilidad: WPForms y OptinMonsters han sido creados por el fundador de AprenderWP, Syed Balkhi.

Dicho esto, 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 su administrador de WordPress y luego haga clic en el botón Agregar nuevo.

Esto lanzará el Constructor de Formularios. Simplemente introduzca un nombre para su formulario, por ejemplo 'Contáctenos' y luego haga clic en la plantilla'Simple Contact Form' para continuar.

El constructor de formularios le llevará al editor de campos. Puede agregar o quitar campos de su formulario o reorganizarlos simplemente arrastrando y soltando.

Una vez que haya terminado, debe hacer clic en el botón Guardar para guardar los cambios. Su formulario de contacto ya está listo.

Necesita visitar la página WPForms " All Forms . Allí encontrará su formulario de contacto. Al lado encontrará un código abreviado. Necesitará este código abreviado 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 listo un formulario de contacto, pasemos al siguiente paso y creemos una ventana emergente en WordPress.

Paso 2: Crear un Popup de WordPress usando OptinMonster

Lo primero que tenemos que hacer es crear un popup modal usando OptinMonster.

Necesita crear un nuevo optin haciendo clic en OptinMonster en el menú de administración de WordPress, y luego haga clic en el botón Create New Optin.

Esto te llevará al sitio web de OptinMonster, donde crearás tu popup. En primer lugar, debe proporcionar un título para su campaña. Puede ponerle el nombre que desee, por ejemplo,'Formulario de contacto'.

A continuación, debe seleccionar su sitio web en el menú desplegable. Haga clic en Lienzo bajo la opción'Seleccione su diseño'.

OptinMonster te mostrará las plantillas disponibles. Actualmente, sólo hay disponible una plantilla de pizarra para el lienzo. Haga clic en la plantilla para continuar.

Esto le llevará a la pantalla de Optin Customizer. Notarás que el lienzo está en blanco por diseño. Se hace de esa manera, para que puedas añadir casi todo lo que quieras mientras usas el poder de OptinMonster. Puedes añadir un formulario de registro, facebook como caja, encuestas, códigos de cupón, o como lo estamos haciendo en este ejemplo un formulario de contacto.

Debajo de la pestaña de diseño puedes elegir el ancho de la altura de tu lienzo. Por defecto, está configurado en 700 x 350 px. Pongamos la altura a 520 por lo menos.

En el cuadro "HTML personalizado", introduzca el código de acceso directo de su formulario de contacto junto con cualquier otro HTML personalizado que desee añadir.

Aquí hay un ejemplo de HTML que usamos para crear el popup modal para este tutorial.

123

¿Tiene alguna pregunta?

<¿Quiere preguntarnos más sobre nuestros servicios? Simplemente rellene este formulario y nos pondremos en contacto con usted lo antes posible.

wpforms ]

Note que hemos incrustado el código abreviado de WPForms allí también. Si está utilizando otro formulario de contacto, simplemente reemplace el código abreviado por el código abreviado de su formulario de contacto.

Después del HTML personalizado, la siguiente opción es introducir su CSS personalizado. Debajo del cuadro CSS personalizado, verá una cadena de texto aleatorio que tiene el siguiente aspecto html div#om-mw7pzo63ch6wpfzi . Este es el prefijo CSS que utilizará en su CSS personalizado.

Aquí está el CSS que usamos para crear el popup modal para este tutorial.

12345678910111213141415161717181920212223242526272829html div#om-mw7pzo63ch6wpfzi div#om-canvas-whiteboard-optin {background-color:#f8f8f8;}html div#om-mw7pzo63ch6wpfzi h3{ text-align:center;}html div#om-mw7pzo63ch6wpfzi.eslogan { font-style:italic;}html div#om-mw7pzo63ch6wpfzi.wpforms-container-full.wpforms-form.wpforms-field { relleno: 10px0; claro: ambos;}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: 004px0; padding: 0; } html div#om-mw7pzo63ch6wpfzi .wpforms-container-full.wpforms-form.wpforms-field-hp { display: none!important; position: absolute!important; left: -9000px!important;}    

No te preocupes si no puedes ver la vista previa ahora, puedes ajustar tu CSS más tarde. Podrá utilizar la herramienta Inspect Element de su navegador para averiguar qué clases de CSS y selectores desea seleccionar y luego agregar css personalizados editando su opción.

Ahora que hemos terminado con la parte del diseño. Pasemos a la pestaña de configuración en el Customizing.

Cambie'Optin Cookie Duration' y'Optin Success Cookie Duration' a 0. Esto evitará que OptinMonster configure la cookie de duración.

También tiene que cambiar `Optin Success Message' (Mensaje de éxito de Optin). Por defecto agradece 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 por ponerse en contacto con usted.

Dado que nuestra ventana emergente sólo aparecerá cuando un usuario haga clic en un enlace o botón, esto significa que debemos habilitar el disparo manual. Marque la casilla bajo la opción'Load on Manual Trigger?

Haga clic en el botón Guardar para guardar su configuración de opciones y, a continuación, haga clic en el botón Cerrar para salir del personalizador.

Paso 3: Añadir una ventana emergente en su sitio de WordPress

Vuelva a cambiar a su área de administración de WordPress y haga clic en OptinMonster. Verá su lista de opciones. Si no ve su opción, haga clic en el botón Actualizar opciones.

Haga clic en el enlace 'Editar configuración de salida' debajo de su opción. Esto le llevará a la configuración de salida para la ventana emergente.

En primer lugar, debe marcar la casilla situada junto a las opciones 'Habilitar optin en el sitio' y 'Cargar optin globalmente' . Si no los comprueba, la ventana emergente no aparecerá en su sitio.

Desplácese hacia abajo en la página y verá la opción 'Parse content for shortcodes' . Asegúrate de que está marcada, de lo contrario OptinMonster no analizará los códigos abreviados dentro de tu ventana emergente.

A continuación, debe introducir el código abreviado que ha incluido en la ventana emergente. Este es el código abreviado de su formulario de contacto.

Haga clic en Guardar configuración para guardar los cambios.

Adición de un enlace o botón a la ventana emergente del formulario de contacto del disparador

Primero necesitarás la bala de tu OptinMonster optin. Haz clic en el icono de OptinMonster en la barra lateral de WordPress. Verá la barra de opciones al lado de su título de opción.

Cree una nueva página en WordPress o edite un mensaje o página en la que desee añadir el enlace o botón emergente del formulario de contacto. En el editor de mensajes cambie a editor de texto y añada su enlace emergente de la siguiente manera:

1contáctenos

No olvide reemplazar el data-optin-slug con su propio data-optin slug.

Guarda tus cambios y visita tu post/página. Haga clic en el enlace para ver la ventana emergente de su formulario de contacto en acción.

Puedes usar este enlace en cualquier lugar de tu sitio de WordPress. Puedes añadirlo a un mensaje o a páginas, a widgets de texto, incluso en tus plantillas de WordPress.

Eso es todo. Esperamos que este artículo le haya ayudado a aumentar sus tasas de conversión utilizando un formulario de contacto emergente en WordPress. También puede que quieras ver cómo OptinMonster nos ayudó a aumentar nuestros suscriptores de correo electrónico en un 600%.

Si te ha gustado este artículo, suscríbete a nuestros tutoriales de vídeo de YouTube Channel for WordPress. También puede encontrarnos en Twitter y Facebook.