Widget Elementor de Gravity Forms: agregue y estilee Gravity Forms sin CSS
Gravity Forms es un widget Pro en Master Addons que coloca cualquier Gravity Form en una página de Elementor y le permite diseñarlo desde el panel. Elija el formulario desde un menú desplegable, comience desde una de las 11 variaciones de diseño, luego ajuste etiquetas, campos, casillas de verificación, el botón de envío, barras de progreso de varias páginas y mensajes de error. El formulario sigue funcionando exactamente como lo creó en Gravity Forms.
11 diseños de formas confeccionadas
El menú desplegable Variaciones de diseño tiene 11 estilos. Elija uno como punto de partida y luego cambie lo que desee en la pestaña Estilo. También puede ocultar el título y la descripción establecidos en Gravity Forms y escribir un encabezado personalizado en Elementor.
- Cambie entre 11 variaciones de diseño desde un menú desplegable.
- Mostrar u ocultar el título del formulario, descripción, etiquetas y marcadores de posición.
- Agregue un título y una descripción personalizados sin editar el formulario en sí.
Estilo de campo, casilla de verificación y botón de opción
Las entradas y áreas de texto obtienen fondo, color de texto, borde, radio, sombra de cuadro y tipografía, con un estado de enfoque separado. Establezca anchos y alturas para entradas y áreas de texto de forma independiente, además de relleno y sangría de texto. Los botones de radio y las casillas de verificación pueden tener tamaños, colores y radios de borde personalizados para los estados normal y marcado.
- Estados normal y de enfoque para campos de entrada.
- Ancho y alto separados para entradas y áreas de texto.
- Estilos de radio y casillas de verificación personalizados, divisores de secciones y colores de precios de productos.
Botón de envío, formularios de varias páginas y mensajes
Haga que el botón de envío sea automático, de ancho completo o de ancho personalizado, luego diseñe sus colores, borde, radio, relleno, sombra de cuadro y tipografía, con colores flotantes. Los formularios de varias páginas obtienen estilo para los botones de página y la barra de progreso. Los mensajes de error, los campos no válidos y el mensaje de agradecimiento tienen cada uno su propia configuración de color y puede ocultar los mensajes de error por completo.
- Botón de envío automático, de ancho completo o de ancho personalizado con colores flotantes.
- Estilo de botones de página y barra de progreso para formularios de varias páginas.
- Colores para mensajes de error, campos no válidos y el mensaje de agradecimiento.
Widget de código corto de Elementor frente al widget de Gravity Forms
El widget Shortcode gratuito de Elementor también puede mostrar un formulario de gravedad con [gravityform id="1"]. El formulario funciona, pero parece que su tema y Gravity Forms lo estilizan, y cambiar eso significa escribir CSS.
| Widget de código corto | Complementos maestros Formas de gravedad | |
|---|---|---|
| Precio | Gratis | Complementos maestros Pro |
| Elegir el formulario | Escriba el ID del formulario en un código corto | Recógelo desde un menú desplegable |
| Diseños confeccionados | Ninguno | 11 variaciones de diseño |
| Estilo de campos y botones | Css personalizado | Pestaña Estilo, con estados de enfoque y desplazamiento |
| Barra de progreso y estilo de error | Css personalizado | Pestaña Estilo |
| Ajustes móviles | Consultas de medios CSS | Controles responsivos para tamaños y espaciado |
¿usar un complemento de forma diferente? Master Addons tiene widgets de estilo gratuitos para Formulario de contacto 7, Formularios WPF, Formas ninja y weForms.
Cómo agregar una forma de gravedad a Elementor
Necesita Gravity Forms con al menos un formulario creado y Master Addons Pro. Luego sigue estos pasos:
- Active el widget Gravity Forms en el panel de complementos maestros.
- Abra su página en Elementor, busque en el panel de widgets “Gravity Forms” y arrastre el widget Master Addons a su lugar.
- Elija su formulario en el menú desplegable Formulario de contacto.
- Elija una de las 11 variaciones de diseño.
- Decida si desea mostrar el título, la descripción, las etiquetas y los marcadores de posición del formulario. Active Usar Ajax para enviar el formulario sin recargar la página.
- Abra la pestaña Estilo para establecer colores, bordes, espacios y tipografía, luego publique.
Si el menú desplegable está vacío, verifique que Gravity Forms esté activo y que haya creado un formulario.
Preguntas frecuentes sobre formas de gravedad
¿necesito instalar el complemento Gravity Forms?
Sí. El widget estiliza los formularios que crea en Gravity Forms, por lo que el complemento debe estar instalado y activo. Sin él, el widget muestra un aviso pidiéndole que active Gravity Forms.
¿cómo agrego una forma de gravedad a Elementor?
Instale Gravity Forms y cree su formulario. En Elementor, arrastre el widget Master Addons Gravity Forms a la página, elija el formulario en el menú desplegable Formulario de contacto, elija una variación de diseño y estílelo en la pestaña Estilo. El guía paso a paso arriba cubre cada configuración.
¿Puedo hacer que los formularios respondan en dispositivos móviles?
Sí. Muchos de los controles de tamaño, espaciado y alineación tienen valores separados para escritorio, tableta y móvil, por lo que puede cambiar el relleno, el ancho de los campos y el ancho de los botones para pantallas más pequeñas.
¿seguirán funcionando la lógica condicional y los complementos de Gravity Forms?
Sí. El widget genera su formulario a través de Gravity Forms, por lo que la lógica condicional, los formularios de varias páginas y los complementos funcionan de la misma manera que los configura. El widget solo cambia la apariencia del formulario.
Widgets y extensiones de Elementor de tendencia
Cree sitios web sofisticados en menos tiempo.
Vidriomorfismo
Extras de contenedores
Patrones
![Extensión de duplicador de páginas/publicaciones de complementos maestros para Elementor: enlace de fila de duplicador MA en la lista de páginas de WordPress que crea una página de inicio - borrador [duplicado #128]](https://d1asvmc6qcowgk.cloudfront.net/wp-content/uploads/2026/09/15102930/post-page-duplicator-768x403.webp)
Duplicador de publicaciones/páginas
