Campos de formulario en dos columnas con Gravity Forms

Los formularios son elementos que se utilizan en la mayoría de páginas web, ya sea para contactar, solicitar información o presupuesto, etc… Existen varios plugins para poder configurar estos formularios, uno de ellos es Gravity Forms, cada vez más utilizado por la cantidad de funcionalidades que trae, así como los numerosos add-ons e integraciones con…


por

Los formularios son elementos que se utilizan en la mayoría de páginas web, ya sea para contactar, solicitar información o presupuesto, etc…

Existen varios plugins para poder configurar estos formularios, uno de ellos es Gravity Forms, cada vez más utilizado por la cantidad de funcionalidades que trae, así como los numerosos add-ons e integraciones con herramientas externas.

Como siempre, a veces las cosas más simples son las que más nos traen de cabeza, y una de ellas, que me consultan a menudo, es cómo podemos hacer que los campos de nuestros formularios aparezcan en dos o más columnas en lugar de uno debajo de otro.

Con Gravity Forms es realmente fácil, pero nada intuitivo, y debes encontrar las indicaciones apropiadas en la documentación de su web, ya que tienen predefinidas unas clases CSS para poder hacerlo.

Gravity Forms columnas

Clases para colocar los campos en dos columnas:

  • gf_left_half: para el campo que quieras colocar a la izquierda
  • gf_right_half: para el campo de la derecha

Estas clases deben añadirse en el campo Clase CSS Personalizada de las propiedades del campo:

En el caso de 3 columnas, las clases a asignar serían:

  • gf_left_third
  • gf_middle_third
  • gf_right_third

También tienen disponibles clases CSS para colocar los elementos de una lista de opciones (radiobutton o checkbox) en varias columnas o un párrafo de texto dentro de un div con scroll…

En este enlace tenéis todas las CSS Ready Classes para Gravity Forms

Desarrollo Web by esther solà
Resumen de privacidad

Esta web utiliza cookies para que podamos ofrecerte la mejor experiencia de usuario posible. La información de las cookies se almacena en tu navegador y realiza funciones tales como reconocerte cuando vuelves a nuestra web o ayudar a nuestro equipo a comprender qué secciones de la web encuentras más interesantes y útiles.