Cómo agregar un formulario de gravedad al sitio web de Elementor

No te puedes imaginar un sitio web sin formularios. La mayoría de los sitios web utilizan formularios únicos o múltiples para cumplir con sus diferentes propósitos. Por lo tanto, también es esencial aprender cómo agregar formularios a su sitio de Elementor.

Si tiene la herramienta adecuada en la mano, puede hacer todo el proceso en un par de minutos sin tocar una línea de código.

Hoy, hemos compartido cómo crear/agregar formularios al sitio web de Elementor, utilizando el widget Gravity Forms gratuito de Happy Addons.

También compartimos los otros widgets de formulario Happy Addons que son compatibles con complementos de formulario populares.

Cómo usar el widget Gravity Forms de Happy Addons para crear formularios para el sitio web de Elementor

Puede crear fácilmente diferentes formularios utilizando el widget Gravity Forms.

En el siguiente segmento, le mostraremos cómo usar el widget Gravity Forms y crear formularios perennes para su sitio web de Elementor de forma gratuita.

Siga estos cuatro sencillos pasos :

1. Instalar y activar los complementos necesarios
2. Crear una nueva forma de gravedad
3. Agregue el widget Gravity Forms de Happy Addons
4. Personaliza el formulario con tu propio estilo

Empecemos:

Paso uno: instalar y activar los complementos necesarios

Primero, necesitamos instalar y activar los complementos necesarios para nuestro sitio web. Aquí, ya hemos instalado y activado los siguientes complementos. Puede usar los siguientes enlaces para descargar los complementos.

1. Elementor (Gratis)
2. Complementos felices (gratis)
3. Formas de gravedad (Pro)

Nota: Para su preocupación, el complemento Gravity Forms no ofrece una versión gratuita. Tienes que comprar su versión pro.

Paso dos: cree una nueva forma de gravedad

Después de instalar el complemento, debe ir al área Formularios o Nuevos formularios . Luego haga clic en el botón Agregar nuevo para crear un nuevo formulario.

En la siguiente ventana emergente modal, obtendrá la opción para crear el formulario. Agregue su título de formulario y descripción de formulario aquí. Finalmente, haga clic en el botón Crear formulario para crear un nuevo formulario.

¡Bien hecho! Has creado un nuevo formulario. Ahora, debe agregar los campos de formulario necesarios al formulario. En el complemento Gravity Forms, puede agregar fácilmente los campos de formulario requeridos utilizando la función de arrastrar y soltar.

Primero, debe escribir el nombre del campo en la barra de búsqueda. Luego arrastre y suelte el campo en el área del lado izquierdo.

Aquí, verá que estamos buscando el campo de formulario Nombre de la barra de búsqueda y arrástrelo al lugar correcto.

También hemos agregado otros tres campos de formulario en nuestros formularios, como Correo electrónico, Sitio web y Mensaje , para crear un formulario completo. Después de agregar los campos de formulario esenciales, haga clic en el botón Actualizar para guardar el formulario.

Paso tres: agregue el widget Gravity Forms de Happy Addons

Es hora de mostrar el formulario en su sitio web de Elementor.

Primero, busque el widget Gravity Forms de Happy Addons en el menú de la barra lateral izquierda y luego arrástrelo y suéltelo en el lugar adecuado de su sitio web.

En segundo lugar, elige el nombre del formulario de la lista desplegable. Aquí, hemos seleccionado el formulario de muestra que ha creado anteriormente.

También puede mostrar el Título del formulario y Habilitar Ajax Enviar aquí en la sección Contenido .

Nota: cuando realiza un cambio en el panel del editor de Elementor, debe hacer clic en el botón Aplicar para actualizar los cambios en la página de inicio.

Paso cuatro: personalice el formulario con su propio estilo

En la sección Estilo , obtendrá las opciones de estilo esenciales para una mejor personalización del formulario.

Aquí están ellos.

• Campos de formularios
• Etiqueta de campos de formularios
• Botón de enviar
• Descanso
• Lista

En este blog, utilizaremos los tres primeros campos de formulario, la etiqueta de campos de formulario y la configuración del botón Enviar , que se utilizan a menudo para diseñar el formulario.

Campos de formulario

En el área Estilo-> Campos de formulario , encontrará muchas opciones de estilo para cambiar el estilo predeterminado de los campos de formulario. Estas son las opciones Ancho de campo grande, Espaciado de campo, Relleno, Radio de borde, Tipografía, Color de texto de campo, Color de marcador de posición de campo, Tipo de borde, Sombra de cuadro y Color de fondo que puede usar para personalizar los campos.

Lst aumenta el relleno de los campos de formulario.

Puede cambiar el color del texto del campo a su manera.

Etiqueta de campos de formulario

También puede restablecer el margen, el relleno de etiqueta, el margen de subetiqueta, la tipografía de etiqueta, la tipografía de subetiqueta, el color de texto de etiqueta, el color de texto de subetiqueta y el color de etiqueta requerido del estilo de etiqueta de campos de formulario .

Aquí, hemos cambiado el Color de etiqueta obligatorio predeterminado y hemos establecido el color rojo.

Botón de enviar

En el área Estilo-> Botón Enviar , obtendrá las posibles opciones de diseño como Ancho completo del botón, Ancho del botón, Margen, Relleno, Tipografía, Tipo de borde, Radio del borde, Sombra del cuadro, Color del texto y Color de fondo para diseñar el envío. botón.

Habilitar el ancho completo del botón y establecer el ancho del botón

Si necesita un botón de envío de ancho completo, puede hacerlo habilitando el Botón de ancho completo . Luego puede configurar el ancho del botón a su manera.

Establecer margen, relleno y radio de borde

También hemos definido el margen, el relleno y el radio de borde del botón Enviar.

Cambiar el color de desplazamiento del botón

Para que el botón sea más visible, hemos cambiado el color de desplazamiento del botón Enviar.

Vista previa final del widget Gravity Forms de Happy Addons

La apariencia final de nuestro formulario Elementor Gravity es similar a la siguiente imagen.

También puedes ver el video.

6 widgets más de Happy Addons Form que puedes usar

Al igual que el widget Gravity Forms, Happy Addons ofrece otros 6 widgets de formulario. También puede usarlos para integrar formularios en su sitio web de Elementor.

Hablemos de estos widgets uno por uno.

1. Formulario de contacto 7

Contact Form 7 es uno de los complementos de formulario destacados para WordPress que la mayoría de los usuarios usan. Por esa razón, Happy Addons permite a sus usuarios agregar formularios utilizando el widget gratuito Contact Form 7.

Con este widget, puede agregar y personalizar fácilmente diferentes tipos de formularios en su sitio web de Elementor.

Consulte la documentación.

2. Formas Ninja

Ahora también puede usar su complemento Ninja Forms favorito. Con el widget Happy Addons Ninja Forms, puede insertar los formularios necesarios en su sitio de Elementor.

Lea la documentación paso a paso de Ninja Forms.

3. NosotrosFormas

Con el nuevo y exclusivo widget weForms de Happy Addons, puede agregar formularios prefabricados a su sitio web de una manera más organizada.

Echa un vistazo rápido a esta documentación y aprende cómo funciona este widget.

4. Formas de caldera

Pruebe el widget gratuito Happy Addons Caldera Forms para agregar formularios impresionantes a su sitio de Elementor. Echemos un vistazo a la guía del usuario.

5. Formularios WP

¿Quiere agregar formularios a su sitio web usando el popular complemento WPForms? En Happy Addons, puede agregar y personalizar fácilmente los formularios preconstruidos usando el widget WPForms. Para más detalles, aquí hay una guía rápida para usted.

Formas fluidas

Por último, si bien no menos importante. También puede usar el widget Fluent Forms de Happy Addons para integrar formularios en su sitio web. Siga la documentación completa de Fluent Forms.

¿Estás listo para usar el widget Gravity Forms de Happy Addons?

Puede facilitar el proceso de diseño de su formulario utilizando los widgets de formulario de Happy Addons. Esperamos que haya seguido todos los pasos anteriores y haya aprendido el proceso de integración de formularios.

Ahora es el momento de agregar Gravity Form al sitio web de Elementor.

¿Estas listo para ir?

Si aún tiene preguntas sobre este blog o los formularios de Elementor Gravity, puede alzar la voz en el cuadro de comentarios a continuación.

Echa un vistazo a algunos otros tutoriales esenciales...

• ¡Cómo personalizar el diseño de su formulario en Elementor usando los widgets Happy Form GRATIS!
• La guía definitiva para crear un formulario de contacto de Elementor
• Comparación de los 7 mejores creadores de formularios de WordPress (pros y contras)
• Formulario de contacto 7: revisión de características y verificación de rendimiento (en comparación con WPForms)
• Revisión honesta de WPForms para especialistas en marketing

No olvides suscribirte a nuestros boletines. ¡También es completamente GRATIS !