Cómo crear una ventana emergente de formulario de contacto en WordPress: paso a paso

Cómo crear una ventana emergente de formulario de contacto en WordPress: paso a paso

cómo crear una ventana emergente de formulario de contacto en wordpress

¿Desea mostrar su formulario de contacto cuando un usuario hace clic en el botón o enlace de contacto?

La ventaja es que cada vez que un usuario hace clic en el botón de contacto o en un enlace, en lugar de ir a una nueva página, el formulario de contacto se abre en forma de ventana emergente, lo que aumentaría los envíos de formularios. En este artículo, le mostraremos cómo crear una ventana emergente de formulario de contacto en su sitio de WordPress sin afectar su experiencia de usuario de una manera paso a paso.

Cree fácilmente una ventana emergente de formulario de contacto en WordPress

Con WordPress, crear una ventana emergente de formulario de contacto es fácil. Para comenzar, solo necesita 2 cosas:

  1. un poderoso complemento emergente
  2. un complemento robusto de creación de formularios

Para obtener los mejores resultados, recomendamos usar WPForms para crear su formulario de contacto. Es un poderoso complemento de creación de formularios que le permite crear casi cualquier tipo de formulario en menos de 5 minutos. Obtenga más información sobre WPForms aquí.

WPForms, registro de usuario, complemento, complemento de inicio de sesión de usuario

Cuando se trata de complementos emergentes, creemos que no hay mejor opción que OptionMonster. Es uno de los complementos de generación de clientes potenciales más populares y poderosos que le permite captar la atención de sus visitantes y alentarlos a tomar medidas en su sitio utilizando opciones alucinantes. Con este complemento, puede aumentar la participación del usuario y aumentar sus conversiones y ventas.

optinmonster-popups

Para obtener más información sobre OptinMonster, lea nuestra revisión detallada de OptinMonster.

Paso 1: Instale los complementos de WPForms y OptinMonster

agregar-plugins-wordpress

Empiece por descargar el WPForms conectar. Luego instálelo y actívelo. ¿No sabes cómo? No hay problema. Puede acceder a nuestra guía sobre cómo instalar un complemento de WordPress para solucionar todo. Esperaremos.

¿Todo está listo? Perfecto.

Siga el mismo proceso para activar el complemento OptinMonster. Pero no basta con instalar el complemento. Deberás crear una cuenta con la aplicación OptinMonster también. El complemento actúa solo como un soporte para conectar su sitio de WordPress a la aplicación OptinMonster. Entonces, para que esto funcione correctamente, debe instalar el complemento y también crear una cuenta con la aplicación.

Paso 2: cree un formulario de contacto usando WPForms para la ventana emergente

Primero usaremos el complemento WPForms para crear un formulario de contacto. Pero si ha utilizado WPForms y ha creado un formulario de contacto con él antes, puede omitir este paso.

Si no tiene un formulario de contacto, vaya a su panel y haga clic en WPForms »Agregar nuevo.

wpforms-dashboard

Esto lo llevará a otra página donde puede seleccionar una plantilla de formulario y agregar un nombre a su formulario. Selecciona el Formulario de contacto simple plantilla y asigne un nombre a su formulario.

Plantillas de WPForms Lite

Una vez que se complete el proceso, se iniciará el generador de formularios, lo que facilitará el diseño de sus formularios. Puede agregar o eliminar archivos fácilmente usando el generador de arrastrar y soltar.

Puede agregar cualquier campo que crea que es necesario para su formulario. Una vez que todo esté hecho, haga clic en el botón Guardar para guardar sus cambios. Su formulario de contacto ya está listo para conectarse.

Ahora golpea el Incorporar junto al botón Guardar y copie el código corto.

Paso 3: Cree una ventana emergente de WordPress usando OptinMonster

El siguiente paso es crear una ventana emergente en su sitio web. Crearemos una ventana emergente modal usando OptinMonster. Así que vaya a su panel de WordPress y haga clic en OptinMonster »Crear una nueva campaña.

Esto abrirá una nueva pantalla donde puede seleccionar el tipo de campaña seguida por el modelo de su suscripción. Para el tipo de campaña, seleccionaremos la opción emergente.

Para el modelo, vayamos por Lienzo. Este es un lienzo en blanco que admite todas las formas de códigos cortos. Entonces puede insertar todos los códigos cortos HTML, CSS, JavaScript e incluso WordPress aquí.

Una vez que haya seleccionado la plantilla, se le llevará a una nueva pantalla donde podrá nombrar su campaña.

Luego haga clic en el Empiece a construir lengua. Ahora se le dirigirá al generador de arrastrar y soltar. Notarás que el lienzo está en blanco en términos de diseño. Puede crear cualquier ventana emergente con este lienzo y diseñarlo desde cero. Puede hacer esto usando las opciones debajo Diseño lengua.

Cuando termine, haga clic en el Agregar bloques en la pestaña Diseño. Desplácese hacia abajo para encontrar el Bloques de elementos opciones. A continuación, verá un bloque HTML. Arrástrelo y suéltelo en el área de diseño.

Aquí puede ingresar un código abreviado del formulario de contacto, así como cualquier otro código HTML personalizado que desee agregar. Así que agreguemos nuestro shortcode que es el siguiente:

<h3>Do you have any questions?</h3>
<p class="tagline">Want to ask more about our service?Simply fill out the form and we'll get back to you as soon as possible.

Aquí hay una descripción general de cómo puede hacerlo.

Tenga en cuenta que el código abreviado del formulario que creamos anteriormente también se ha integrado en el código. Puede reemplazar este código corto con el suyo. Ahora guarda tus cambios. Después de eso, ve al Mostrar reglas y establezca el tiempo en cero como se muestra en la captura de pantalla.

Desplácese hacia abajo en esta pantalla y encontrará más opciones. Puede usarlos si desea mostrar este formulario en una página o publicación específica. Golpea el Salvar botón cuando haya terminado.

Paso 4: publique su formulario emergente

Cuando haya terminado de trabajar en los cambios, haga clic en el botón si no en la parte superior y haga clic en el Activar lengua.

Finalmente, ve a Publicar pestaña y cambie el estado a En Vivo.

optinmonster, puerta de bienvenida, puerta de bienvenida de wp, edificio de listas

Una vez hecho esto, vuelva a su panel de WordPress y navegue hasta OptinMonster »Campañas. Aquí verá su campaña. A continuación, haga clic en el Modificar los parámetros de salida Enlace. Se expandirá para mostrar algunas opciones. Marque la casilla junto a Activar la campaña en el sitio opción.

Finalmente haga clic en el Guardar ajustes opción al final de la página.

Paso 5: agregar un enlace para activar la ventana emergente del formulario de contacto

Copie primero la barra de campaña de OptinMonster. Puede encontrarlo junto al nombre de su campaña.

Ahora 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. Crearemos uno nuevo aquí. Vaya a su editor de texto y agregue el siguiente código. Recuerde reemplazar la babosa con la suya propia.


<a href="#" class="manual-optin-trigger" data-optin-slug="your slug goes here">Contact us</a>

Cuando termine, presione el Publicar botón a su derecha. Tu formulario ahora está en acción. Visite su sitio desde el front-end y lo verá.

Esperamos que este artículo le haya resultado útil. Si desea obtener más información sobre cómo crear un formulario de contacto con WPForms, aquí tiene una guía paso a paso.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Ir arriba