Campos de formulario en dos columnas con Gravity Forms

[…]


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

¿Eres implementador o desarrollador WordPress?

En la Zona DPW encontrarás más recursos, tutoriales, plantillas, y una biblioteca de snippets para poder utilizar en tu día a día y ganar tiempo en tu trabajo:

ACCEDER AHORA