Cómo crear un formulario emergente en WordPress

¿Le gustaría crear un formulario emergente de WordPress? ¡Puede crear fácilmente ventanas emergentes con un generador de formulación y una ventana emergente de WordPress!

Sobre el tiempo de lectura: 6.5 minutos Si espera crear un formulario emergente para su sitio de WordPress, no está solo. Las formas emergentes de WordPress (a veces llamadas ventanas emergentes) se vuelven muy populares. Para comenzar, necesitará dos herramientas:
Plugin WordPress para el formulario emergente
Complemento para el generador de fórmulas de WordPress
Usando estas herramientas, en realidad es muy fácil instalar cualquier tipo de ventana emergente en su sitio web de WordPress. En este tutorial de paso, le mostraremos cómo crear ventanas emergentes para formularios de contacto.
Hay tres pasos principales para lograr esto:
Cree un formulario de contacto utilizando un generador de formación de arrastre y caída
Cree una ventana emergente con un complemento para crear emergentes
Publique la ventana emergente en su sitio con un botón de activación
Cómo hacer un formulario de contacto emergente en WordPress Para seguir este tutorial, necesitará un complemento de WordPress y un enchufe emergente. Hay muchas opciones para crear formularios, pero le mostraremos cómo usa formularios formidables. Divulgación completa: es el generador de formularios de arrastre y caída que creé.
Formidable Forms es el mejor complemento de constructor de formulario de WordPress. ¡Tómelo gratis!
Pero para los formularios de contacto, ¡es 100% gratis de usar! Entonces, si te gusta gratis, funcionará muy bien. Es posible que se pregunte cuál es el mejor complemento de WordPress para formularios de contacto emergente. En realidad, un excelente complemento emergente puede mostrar cualquier tipo de forma que desee. Sin embargo, si verifica el director del complemento de WordPress, verá muchos creadores emergentes para elegir. En esta guía, usamos OptinMonster. Es un complemento extremadamente popular con casi 1 millón de usuarios. Aunque ya no tiene una versión gratuita, tiene una versión de prueba gratuita. ¿El complemento emergente que utilizamos en nuestro sitio. Hay complementos gratuitos para crear ventanas emergentes? Para ser claros, hay algunos complementos emergentes gratuitos que podrían funcionar muy bien para usted. Si todo lo que necesita es un formulario emergente para su sitio, este tutorial aún podría funcionar con otro complemento. Pero la mayoría de los otros fabricantes emergentes no ofrecen pruebas A/B gratuitas o características avanzadas, como la intención de salida. Otra consideración: muchos complementos emergentes tienen una interfaz de usuario desagradable y están llenas de anuncios desagradables. OptinMonster tiene una interfaz de uso dedicada que hace que la creación de ventanas emergentes súper ligeras y súper potentes. Entonces, aunque viene con una etiqueta de precios, vale la pena pagar este complemento.
Para iniciar, para instalar estos dos complementos. Aquí están los enlaces:
Formularios formidables
Optinmonster
Una vez que estos complementos están instalados y activados, podemos pasar a los siguientes pasos. 1. Cree un formulario de contacto utilizando formularios formidables. Acceso FORMIDABLE → Formularios y haga clic en el nuevo Agregar a la parte superior de la página. Dé un nombre al nuevo formulario y haga clic en Crear para comenzar a construir el formulario.
Ahora que hemos creado el formulario de contacto, debemos agregar algunos campos. En formidable, esto se hace fácilmente utilizando nuestro generador de Formularios Drag y Drop.

Para un formulario de contacto, desea incluir al menos un campo de texto, un campo de correo electrónico y un campo de texto de párrafo. Si lo desea, puede agregar otro campo de texto para permitir a los usuarios agregar un tema a su solicitud de contacto. Siéntase libre de experimentar aquí durante un período, luego haga clic en el botón Actualizar para guardar el formulario cuando esté listo. Ahora, todo lo que necesitamos es el código corto para el formulario recién creado. Haga clic en la pestaña Configuración sobre el generador de Formulario de arrastrar y soltar. Ahí puedes encontrar el código corto.

Manténgalo abierto en una pestaña de navegador separada por el momento. ¡Necesitamos esto en unos minutos! Para obtener más ayuda para crear un formulario en WordPress, haga clic aquí. También tenemos una demostración del formulario de contacto si desea ver un ejemplo. 2. Cree una ventana emergente WordPress usando OptinMonster ahora es el momento de crear nuestras ventanas emergentes modales usando nuestro generador emergente elegido. Para comenzar, haga clic en el botón Cree una nueva campaña en la sección OptInmonster del administrador de WordPress. Esto lo llevará al generador de optinmonster emergente en su sitio web. Viene el formulario emergente

Primero, asegúrese de elegir PopUp (está seleccionado predeterminado) y luego busque la ventana emergente de lona. Optinmonster viene con muchas plantillas interesantes, pero para nuestros propósitos hoy queremos trabajar con un lienzo vacío.

Ahora tenemos que comenzar a construir la ventana emergente del formulario de contacto. Lo más importante a tener en cuenta es la facilidad de uso para los visitantes de su sitio, más fácil de usar, ¡más direcciones de correo electrónico podrá recopilar con sus formularios!
Haga clic en la pestaña Bloque en el menú izquierdo. Allí verá muchas opciones para crear ventanas emergentes modales. Primero, agregue un bloque de texto para que podamos agregar un encabezado y un pequeño texto.

Después de eso, queremos eliminar los elementos existentes de la plantilla de lienzo para dejar espacio para nuestro nuevo formulario de contacto. Para hacer esto, vaya con el mouse sobre un elemento y haga clic en el botón Eliminar.

Ahora tenemos que agregar un bloque HTML. Aquí colocaremos el código corto en el formulario que acaba de crear. Se verá un poco extraño aquí, pero cuando se publique el formulario emergente en su sitio, se unirá. Configure las reglas de visualización emergente Ahora continuaremos haciendo clic en las reglas de visualización en la parte superior de la página. Aquí configuraremos las opciones de activación. Hay muchas maneras de activar una ventana emergente como puede ver. En este caso, probablemente deseamos que nuestro formulario emergente comience a hacer clic con un botón. Para configurar esto, haga clic en la pestaña popular y luego haga clic en Monsterink. Después de eso, haga clic en el botón verde para copiar su código Monsterink. Haga clic en Guardar en la esquina superior derecha y luego haga clic en la pestaña Publicación.

Lo último que debe hacer aquí es hacer clic en el interruptor de estado y establecer el formulario emergente en vivo. Debido a que nuestra ventana emergente se activa al hacer clic, no tenemos que preocuparnos por activar la ventana emergente en otra parte del sitio. 3. Publique el botón emergente en su sitio web antes de publicar el formulario emergente, intente obtener una vista previa para ver si se ve como esperábamos. Primero, vaya a OptinMonster en el administrador de WordPress. Haga clic en las campañas de botón de actualización o la vista previa no funcionará.
Volver a OptinMonster, desde la pestaña de publicación, haga clic en el botón Vista previa de la campaña. Nota: Debe asegurarse de que su sitio esté conectado correctamente a OptInmonster para usar la función de vista previa. Si su formulario no se ve exactamente como era de esperar, puede haber un conflicto. Entre OptinMonster, su tema de WordPress y sus formas formidables, pueden ocurrir errores CSS. Sin embargo, aquí hay otra ventaja de usar un complemento POP -UP pagado: ¡tienen asistencia las 24 horas, los 7 días de la semana para la resolución de problemas! El equipo de asistencia de OptinMonster definitivamente lo ayudará a cambiar las cosas para que se vean geniales. Así es como podría verse en este momento: así que si su vista previa no se ve perfecta, no se preocupe demasiado porque se puede resolver más tarde. Por ahora, creemos un botón que active el formulario emergente. Para hacer esto, vaya a la página que desea el formulario emergente. También puede colocar el formulario emergente en cualquier área de widget en su página, creamos un formulario de contacto pop. Pero puede crear fácilmente un formulario de suscripción emergente o un formulario de registro emergente utilizando el mismo método. Una vez que llegue a su página, puede agregar un bloque si usa el generador Gutenberg. Simplemente copie e inserte su Monsterlink en el botón. También puede usar su MonsterLink con cualquier otro generador de páginas de WordPress.

Ese es que ahora debería tener un formulario de contacto emergente funcional en su sitio web de WordPress. ¡Felicidades! Termina espero que te haya gustado la guía hoy. Un formulario emergente es una forma elegante de hacer que su sitio web se vea aún mejor. ¿Por qué abarrotar su sótano o barra lateral con un formulario de contacto largo? Una ventana emergente resuelve este problema limpio. Por supuesto, hay muchos cambios de diseño que puede agregar al formulario emergente. En formidable, puede usar nuestro estilo de formulación visual para que coincida con el aspecto de sus formularios con su sitio web. Puede cambiar el aspecto de su ventana modal en OptinMonster. Antes de terminar, es posible que desee volver a la configuración del formulario y agregar un correo electrónico de confirmación al formulario. Para obtener más ideas, consulte el blog formidable. ¡Hasta la proxima vez! Lea más sobre los formularios de contacto de Nice ContactDesign en WordPress (con ejemplos) Leer más
Cómo construir una conversación de formulario en WordPress (¡nuevo!) Lea más

6 mejores complementos para páginas de destino de WordPress (¡para obtener conversiones ahora!) Lea más


Cómo insertar imágenes en formularios de WordPress para aumentar la participación Leer más

Cómo hacer un formulario de contacto div con formularios formidables Leer más

Mejores 10 complementos gratuitos y pagados por formularios de contacto de WordPress Leer más

Cómo hacer una excelente página de contacto (con ejemplos) leer más

Cómo crear un formulario de contacto elemental (en 3 pasos) leer más

Cómo crear un formulario de contacto de WordPress con múltiples destinatarios (¡gratis!) Lea más

8 formas de bloquear el spam del formulario de contacto en WordPress Leer más

Cómo hacer un formulario de contacto de deslizamiento en WordPress Leer más

Cómo agregar un formulario de contacto a una barra lateral de WordPress Leer más

Cómo agregar un captcha a los formularios de contacto de WordPress Leer más

Cómo agregar un formulario de contacto simple a WordPress Leer más

Cómo enviar correos electrónicos de confirmación en WordPress Leer más

¿Todavía no usas formularios formidables?¿Por que no?Formidable tiene muchas funciones más allá de los formularios de contacto.Obtenga el complemento gratuito de WordPress o intente formidable con nuestra versión de prueba gratuita de 14 días.