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 que aparezca 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 una 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 paso a paso..

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

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

  1. un poderoso complemento emergente
  2. un robusto plugin de generador de formularios

Para lograr los mejores resultados, le 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. Lea más 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 otra opción que sea mejor que OptionMonster. Es uno de los complementos de generación de leads más populares y potentes que le permite captar la atención de sus visitantes y alentarlos a tomar medidas en su sitio con el uso de impresionantes opciones. A través de este complemento, puede aumentar la participación del usuario y aumentar sus conversiones y ventas.

ventanas emergentes optinmonster

Para saber más sobre OptinMonster lea nuestra revisión detallada de OptinMonster.

Paso 1: Instale los complementos WPForms y OptinMonster

add-wordpress-plugins

Comience descargando el WPForms enchufar. Luego, instálalo y actívalo. ¿No estás seguro de cómo? No hay problema. Puede consultar nuestra guía sobre cómo instalar un complemento de WordPress para solucionarlo. Bueno, espera.

¿Todo listo? Perfecto.

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

Paso 2: crear un formulario de contacto con WPForms para la ventana emergente

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

Si no tiene un formulario de contacto, vaya a su tablero 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 dale un nombre a tu formulario.

Plantillas WPForms Lite

Al completar el proceso, se iniciará el generador de formularios, lo que facilita el diseño de sus formularios. Puede agregar o eliminar archivos fácilmente con el generador de arrastrar y soltar.

Puede agregar todos los campos que considere necesarios para su formulario. Una vez que todo esté listo, presione el botón Guardar para guardar sus cambios. Su formulario de contacto ya está listo para publicarse.

Ahora presiona el Empotrar pestaña al lado del botón Guardar y copie el shortcode.

Paso 3: Crear 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. Vaya a su panel de WordPress y haga clic en OptinMonster »Crear nueva campaña.

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

Para la plantilla, vamos a Lona. Este es un lienzo en blanco que admite todas las formas de códigos cortos. Para que pueda insertar cualquier código corto HTML, CSS, JavaScript e incluso WordPress aquí.

Una vez que seleccione la plantilla, se lo dirigirá a una nueva pantalla donde podrá nombrar su campaña.

Luego haga clic en el Comienza a construir lengüeta. Ahora se lo 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 utilizando este lienzo y diseñarlos desde cero. Puede hacerlo usando las opciones debajo de Diseño lengüeta.

Una vez hecho esto, haga clic en el Agregar bloques pestaña debajo de la pestaña Diseño. Desplácese hacia abajo para encontrar el Bloques de elementos opciones. Debajo de esto, verá un bloque HTML. Arrástrelo y suéltelo en el área de diseño.

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

Tiene usted alguna pregunta?

¿Quiere preguntar más sobre nuestro servicio? Simplemente complete el formulario y nos pondremos en contacto con usted lo antes posible.

Aquí hay una vista previa de cómo puedes hacerlo.

Observe que el código abreviado del formulario que creamos anteriormente también se ha incrustado en el código. Puede reemplazar este shortcode con el suyo. Ahora guarda tus cambios. Después de eso, ve al Mostrar reglas pestaña y establecer el tiempo a 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: Publicar tu formulario emergente

Una vez que haya terminado de trabajar en los cambios, haga clic en el Sí No opción en la parte superior y haga clic en el activar lengüeta.

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

optinmonster, puerta de bienvenida, puerta de bienvenida de wp, creación de listas

Una vez hecho esto, regrese a su panel de WordPress y vaya a OptinMonster »Campañas. Aquí verá su campaña. Debajo de ese clic en el Editar configuración de salida enlace. Se expandirá para mostrar algunas opciones. Marque la casilla al lado de Habilitar 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

Primero copie la babosa de la campaña OptinMonster. Puedes encontrarlo justo al lado del nombre de tu campaña.

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

Contáctenos

Una vez hecho esto, presiona el Publicar botón a su derecha. Tu formulario ya está en acción. Visite su sitio desde el front-end y lo verá..

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

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map