¡Cómo personalizar el diseño de su formulario en Elementor usando los widgets Happy Form GRATIS!

Publicado: 2021-03-04

¿Quiere agregar un formulario de aspecto elegante en su sitio web de Elementor y necesita una solución perfecta para eso? ¡Tu tiempo de búsqueda finalmente ha terminado!

Sus complementos Happy Elementor favoritos lanzaron recientemente widgets de formulario gratuitos que le permiten agregar un formulario en diferentes páginas o secciones de su sitio web sin esfuerzo. Su integración con 7 creadores de formularios populares significa que puede agregar formularios desde cualquiera de ellos y estilizarlos usando Happy Addons. Esto indica solo una cosa, y solo una cosa.

Con los widgets de formulario Happy Addons, obtendrá "Toneladas de estilo y alcances de personalización".

En este tutorial, le mostramos cómo usar los widgets de formulario Happy Addons dentro de su página web diseñada por Elementor, también aprenderá cómo puede personalizar su diseño, tal como lo desea.

Pero antes de eso, comprendamos por qué los widgets de formulario son necesarios para su sitio web.

Widgets de formulario Happy Addons de un vistazo

Happy Addons es uno de los mejores complementos de Elementor que ayudó a más de 1,00,000+ usuarios de WordPress a construir su sitio web. Viene con toneladas de funciones y widgets esenciales para personalizar las publicaciones de su sitio web, las páginas, los productos de WooCommerce, los formularios y más.

Como ya sabrá, Elementor ofrece un widget de formulario predeterminado para mostrar formularios en el sitio web. Pero no tiene suficientes funciones para personalizar un formulario con su extenso diseño y estilo.

Ahí es donde entra en juego Happy Addons. Los widgets de formularios de Happy Addons le permiten integrar formularios de 7 de los creadores de formularios más populares en WordPress. Cada uno de los widgets viene con varios diseños que ayudarán a que sus formularios sean más fáciles de usar y estén mejor diseñados.

Los 7 complementos de formulario que admite Happy Addons Form Widget son:

  1. Formulario de contacto 7
  2. Formas Ninja
  3. weForms
  4. Formas de Caldera
  5. WPForms
  6. Formas de gravedad
  7. Formas fluidas

Cómo usar widgets de formulario Happy Addons en su sitio web de Elementor

Con el widget de formulario Happy Addons, puede personalizar y mostrar fácilmente un formulario en su sitio web de Elementor, en un par de minutos.

Como mínimo, necesita tres complementos para hacer eso. Ellos son -

  • Elementor (Gratis)
  • Complementos Happy Elementor (gratis)
  • WPForms (Gratis)

Aquí, usamos uno de los complementos de formulario populares WPForms.

Configuremos un formulario de contacto.

Primero, instale y active los complementos necesarios que mencionamos en la lista anterior.

Paso 1: cree un formulario de muestra

Después de instalar el complemento WPForms, debe crear su primer formulario.

Para hacer esto, vaya a WPForms–> Agregar nuevo

Add new form

En la página siguiente, obtendrá la opción de crear su formulario.

Create form

Luego puede editar su formulario de acuerdo con sus requisitos y agregar muchos campos. Aquí agregamos tres campos Nombre, Correo electrónico y Mensaje.

Después de finalizar la edición del formulario, debe hacer clic en el botón Guardar .

Create a sample form

Luego, debe crear una página para configurar su formulario. También puede configurar el formulario en su página de contacto.

Paso 2: cree una página para la integración de formularios

Primero haga clic en Páginas–>Agregar nuevo .

Add new page Elementor

En la siguiente pantalla, verá la opción para agregar el título de su página.

Add your page title

Paso 3: Agregue WPForms

Para diseñar la página de contacto, hemos utilizado el diseño de página de contacto prefabricado de WPForm. Hemos copiado el diseño usando la función ' Live Copy ' de Happy Addons Pro.

El prediseño se utiliza en dos filas para diseñar la página de contacto.

En la sección izquierda, agregaremos widgets de WPForm. Y en la sección derecha, ya hemos insertado una imagen y agregado un color de fondo de la sección.

Add widgets in the row

Ahora, busque el widget WPForms en la barra de búsqueda y seleccione el widget en el menú del lado izquierdo. Luego arrástrelo y suéltelo en el área seleccionada.

Add WPForm widgets

Luego seleccionamos el nombre del formulario del menú desplegable que hemos creado anteriormente.

SElect the created form

Paso 4: Diseña el formulario usando Happy Addons

Ahora puede rediseñar fácilmente el formulario de contacto si lo desea.

Aquí te lo mostramos.

Diseñar el encabezado

Primero, agregamos Happy Gradient Heading desde el menú de la barra lateral izquierda.

Add Happy Gradient Heading

Luego, puede personalizar el Encabezado de degradado feliz con su propio estilo. Puede seleccionar Presets–>Design y también editar el Título .

Edit Heading

Después de diseñar el encabezado, cambiaremos el estilo del formulario.

Diseña el formulario

Para rediseñar el formulario, tienes que ir Estilo . Aquí, obtendrá la opción de estilo de formulario como Campos de formulario, Etiqueta de campos de formulario y Botón de envío.

Style the form

Campos de formulario : en la configuración de Campo de formulario, cambiará el Espaciado de campo, el Relleno, el Radio del borde, la Tipografía. Color de texto de campo, Color de marcador de posición de campo, Tipo de borde y más.

Etiqueta de campos: la etiqueta de campos también le permite editar el margen, el relleno, la tipografía de etiqueta, la tipografía de subetiqueta, la tipografía de descripción y los colores.

Botón de envío: si lo necesita, también personalizará el botón de envío cambiando el ancho completo del botón, el ancho del botón, el margen, el relleno, la tipografía, el borde, el color, el radio del borde, la sombra del cuadro, el color del texto y el color de fondo del botón.

Personalicemos un poco el formulario.

Customize the form

Vista previa final

Aquí está la vista previa final de nuestra página de contacto.

Final preview

También puedes ver este práctico videotutorial.

Consulte la documentación completa de WPForm.

Widgets de formulario: ¿Qué son y por qué los necesita?

¿Cuál es el propósito de tener un formulario en una página Web?

Why Form Widget Is So Important

Un formulario se utiliza para varios propósitos en un sitio web. Puedes recibir tus mensajes a través de un formulario y comunicarte con tus usuarios. También ayuda a generar confianza con sus clientes. Por lo tanto, puede aumentar la confiabilidad del sitio web y permitir que los usuarios de su sitio web se comuniquen mejor con usted. Entonces, ¿qué hacen los widgets de formulario?

Los widgets de formulario le permiten mostrar formularios en su sitio web de Elementor fácilmente.

Aquí hay algunos puntos clave que muestran claramente la importancia de tener un formulario en un sitio web:

  • Reducir los correos electrónicos no deseados
  • Recibe mensajes cuando te convenga
  • Realizar un seguimiento de las consultas
  • Generar más clientes potenciales
  • Haga su lista de marketing por correo electrónico
  • Ofrecer atención al cliente
  • Obtener mensajes enviados por usuarios

Los widgets de formulario de Happy Addons pueden ayudarlo a hacer todos ellos a través del proceso intuitivo de integración de widgets de formulario. Conozcamos más sobre el widget de formulario Happy Addons.

Conclusión

En este blog, hemos cubierto todo lo que necesita saber sobre los widgets de formulario de Happy Addons. También le mostramos cómo configurar un formulario usando el widget WPForm de Happy Addons. Puede hacer lo mismo con los otros 6 complementos de formulario, de la misma manera.

En la misma nota, así es como puede crear un formulario de contacto de Elementor.

La guía definitiva para crear un formulario de contacto de Elementor

Si aún tiene alguna consulta sobre cómo puede agregar y personalizar formularios en su sitio web de Elementor, puede comentar. Y comparte la publicación en tus canales sociales y ayuda a tus amigos a aprender.