homefinance blog
¿Le gustaría mostrar su formulario de contacto cuando un usuario haga 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 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 las referencias de formulación. En este artículo, le mostraremos cómo crear una ventana emergente de formulario de contacto en su sitio web de WordPress, sin afectar su experiencia de usuario en paso a paso. Crear fácilmente un formulario de contacto emergente en WordPress con WordPress, crear una ventana emergente de formulario de contacto es fácil. Para comenzar, solo tienes que tener 2 cosas:
un complemento emergente fuerte
un complemento robusto para generar formularios
Para obtener los mejores resultados, recomendamos usar WPForms para crear su formulario de contacto. Es un complemento poderoso que le permite crear casi cualquier tipo de forma en menos de 5 minutos. Lea más sobre WPForms aquí.
Cuando se trata de complementos emergentes, creemos que no hay otra opción mejor que optionMonster. Es uno de los complementos más populares y potentes para generar clientes potenciales, lo que le permite llamar la atención del visitante y alentarlos a actuar en su sitio con la ayuda de Amazing Opine. A través de este complemento, puede aumentar la participación de los usuarios y aumentar sus conversiones y ventas.
Para obtener más información sobre OptinMonster, lea nuestra revisión detallada de OptinMonster. Paso 1: Instale WPFFORMS y complementos OptInmonster
Comience descargando el complemento WPFORMS. Luego instálelo y activelo. ¿No está seguro de cómo? No hay problema. Puede acceder a nuestra guía sobre cómo instalar un complemento de WordPress para resolver todo. Esperaremos. ¿Listo? Perfecto. Siga el mismo proceso para activar el complemento OpinMonster. Pero no es suficiente instalar solo el complemento. También deberá crear una cuenta con la aplicación OptInmonster. El complemento solo actúa como un entorno para conectar su sitio de WordPress con la aplicación OptinMonster. Entonces, para funcionar correctamente, debe instalar el complemento y crear una cuenta con la aplicación. Pero si ha usado WPForms y ya ha creado un formulario de contacto con él, puede omitir este paso. Si no tiene un formulario de contacto, vaya al tablero y haga clic en WPForms »Agregar nuevo.
Esto lo llevará a otra página donde puede seleccionar una plantilla de formulario y agregar un nombre a su formulario. Seleccione el formulario de contacto simple y le dé un nombre a su formulario.
Al final del proceso, se iniciará el constructor de formulación, lo que facilita el diseño de sus formularios. Puede agregar o eliminar fácilmente archivos utilizando la herramienta de deslizamiento y arreglo.
Puede agregar todos los campos que considera necesarios para su formulario Una vez que todo esté hecho, presione el botón de rescate para guardar los cambios. Su formulario de contacto ahora está listo para transmitir. Ahora presione la pestaña de información junto al botón de rescate y copie el código corto.
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. Por lo tanto, vaya al tablero de WordPress y haga clic en OptinMonster »Crear una nueva campaña. Abrirá una nueva pantalla donde puede seleccionar el tipo de campaña seguido de la plantilla Optin. Para el tipo de campaña, seleccionaremos la opción emergente.
Para la plantilla, vamos por el lienzo. Este es un lienzo vacío que acepta todas las formas de códigos cortos. Por lo tanto, puede introducir aquí cualquier HTML corto, CSS, JavaScript e incluso WordPress.
Después de seleccionar la plantilla, se le dirigirá a una nueva pantalla donde puede nombrar su campaña.
Luego haga clic en la pestaña Inicie la construcción. Ahora se le dirigirá al generador de arrastre y caída. Notará que el lienzo está vacío en términos de diseño. Puede crear cualquier ventana emergente con este lienzo y diseñarlos desde cero. Puede hacer esto utilizando las opciones de pestaña de diseño.
Después de haber terminado, haga clic en la pestaña Agregar bloques en la pestaña de diseño. Desplácese hacia abajo para encontrar las opciones de bloque de elementos. Bajo esto, verá un bloque HTML. Tírelo y colóquelo en el área de diseño.
Aquí puede ingresar un código corto del formulario de contacto junto con cualquier otro código HTML personalizado que desee agregar. Entonces, agregemos nuestro código corto, que es el siguiente:
¿Tiene alguna pregunta?
!
Aquí hay una vista previa de cómo puede hacerlo.
Observe que el código corto del formulario que creamos anteriormente se incorporó en el código. Puede reemplazar este código corto con usted ahora guarde sus cambios. Después de eso, vaya a las reglas de visualización y establezca la sincronización en cero como se muestra en la captura de pantalla. Derular a continuación en esta pantalla y encontrará más opciones. Puede usarlos si desea mostrar este formulario en una página o publicación en particular. Presione el botón Guardar cuando haya terminado. Paso 4: Publicar su formulario emergente Después de haber terminado de trabajar en los cambios, haga clic en la opción sí / no en la parte superior y haga clic en la pestaña de activación.
Finalmente, toma la pestaña de publicación y cambia el estado de vida.
Después de haber terminado de regresar al tablero de WordPress y ir a las campañas de OptinMonster ». Aquí, verá su campaña a continuación, haga clic en el enlace Editar la configuración de salida. Se expandirá para mostrar algunas opciones. Marque la casilla junto para activar la campaña en el sitio.
Finalmente, haga clic en la opción Guardar configuración al final de la página. Paso 5: Agregue un enlace para activar la ventana emergente del formulario de contacto primero copiar la canción de la campaña OptinMonster. Puede encontrarlo justo al lado del nombre de la campaña.
Ahora cree una nueva página en WordPress o edite una publicación o página donde desea agregar el enlace o el botón emergente del formulario de contacto. Crearemos uno nuevo aquí. Vaya al editor de texto y agregue el siguiente código. Recuerde reemplazar al sirviente con su propia babosa.
