Creo que ya he dicho en más de una ocasión que Gravity Forms es, de lejos, el plugin de formularios más completo, flexible y potente que existe. Igual te sirve para que tus lectores puedan publicar contenido en tu web desde un formulario que para crear un sencillo sistema de ecommerce, con pago incluido.

Pero quizá eso mismo hace que tenga una curva de aprendizaje algo pronunciada y que, al principio, sea difícil incluso la simple tarea de conseguir que un formulario quede con el formato que queramos. Voy a intentar poner remedio a eso de forma que puedas establecer de forma sencilla el diseño de un formulario gracias a las clases CSS de Gravity Forms.

Clases CSS predefinidas para Gravity Forms

Porque, si no lo sabías, Gravity Forms incluye una serie de clases CSS predefinidas, una serie de estilos que puedes aplicar fácilmente a los campos de los formularios para alinearlos de una forma especial.

Y es que lo más probable es que el primer formulario que crees con Gravity Forms, si no sabes esto, te quede con un campo encima de otro, todo en vertical. Pero esto no tiene por qué ser así, y puedes alinear los campos como quieras.

Cómo aplicar las clases a los campos

En este artículo vamos a ver todos (o al menos la gran mayoría) de clases predefinidas que se pueden aplicar a los campos. Y digo predefinidas porque también puedes aplicarles clases propias que luego definas tú en tu archivo de estilos CSS personalizados.

Pero claro, habrá que empezar por saber cómo aplicar esas clases. Bien, pues es muy sencillo: si no te has dado cuenta, cada campo que crees cuenta con un (valga la redundancia) campo específico para introducir las clases CSS que se le van a aplicar.

Esta opción la tienes en la pestaña Apariencia del campo correspondiente, con el nombre Clase CSS personalizada.

En este campo puedes poner todas las clases que se le aplicarán, separadas con espacios. Tanto las predefinidas como las que definas tú mismo en tus CSS personalizados.

Alineando los campos en Gravity Forms

La primera duda que suele surgir siempre en estos casos es cómo alinear campos en Gravity Forms, es decir, cómo hacer que se muestre un campo junto a otro, y no todos en vertical, en una única columna.

Tenemos predefinidas tres clases CSS para ello en Gravity Forms, que nos permiten organizar los campos de tres formas distintas:

• En dos columnas, alineando dos campos al 50% del ancho
• En tres columnas, alineando tres campos al 33% del ancho
• En columnas desiguales, alineando los campos cada uno con el ancho que necesite

Campos en dos columnas

Para esto Gravity Forms nos facilita dos clases CSS:

• gf_left_half, para el campo que ocupará la mitad izquierda
• gf_right_half, para el campo que ocupará la mitad derecha

Esto lo puedes ver muy claro y sencillo en el siguiente vídeo, en el que te explico tanto esto como lo que veremos en el siguiente apartado (tres columnas de campos):

Y ojo, una nota un poco técnica: estos estilos se aplican mediante la propiedad float. Eso quiere decir que si por ejemplo el campo de la derecha es condicional (sólo se mostrará en función de la respuesta dada en el campo de la izquierda) mientras éste no aparezca los campos de la siguiente línea se van a descolocar, precisamente a consecuencia de ese float y de la visibilidad none que tendrá el campo de la derecha.

¿Cómo podemos evitar esto? Pues muy sencillo: si este es el caso tendremos que añadir a continuación de los dos campos un campo HTML con el siguiente contenido:

Esto anula la propiedad float, haciendo que los siguientes campos queden en su sitio aunque el campo de la derecha no esté.

Campos en “tercios”

De forma similar a los campos en dos columnas, se pueden establecer también en tres columnas, dividiendo el ancho del formulario en tercios. Las clases correspondientes son:

• gf_left_third, para el campo de la izquierda
• gf_middle_third, para el del centro
• gf_right_third, para el campo de la derecha

Aquí sigue siendo válido lo que veíamos en el apartado anterior acerca de la propiedad float y los campos no visibles cuando son condicionados, con el agravante de que si el campo condicionado es el central, el campo de la derecha se desplazará al centro.

En este caso no podemos echar mano del truco del campo HTML con el clear, porque el campo de la derecha entonces se bajaría abajo. No hay otra que evitar esta situación.

Campos en columnas automáticas

También podemos hacer que los diferentes campos queden alineados en columnas desiguales, dejando que cada uno ocupe un ancho de forma automática, fluida, lo que los distribuye de forma desigual. Para ello puedes utilizar la clase gf_inline, y quedaría algo así:

Formularios con Gravity Forms en horizontal

Eso en lo que respecta a los formularios en vertical, pero ¿qué hay si queremos poner nuestro formulario completamente en horizontal con Gravity Forms?

Quizá creas que vale con meterle el gf_inline a todos los campos pero no, olvidas el botón de enviar: éste quedaría debajo. Me refiero a hacer algo así:

Como ves todo el formulario está establecido en horizontal, en una misma línea, incluyendo el botón de submit.

Bien, para esto también hay una clase específica: gf_simple_horizontal. Pero, a diferencia de las anteriores, esta clase no se aplica a los campos (no podrías aplicarla al botón de enviar) sino al formulario. Eso lo tienes en los Ajustes del formulario > Diseño de formulario > Nombre clase CSS:

Ojo porque este estilo elimina las etiquetas de los campos, por lo que necesitarás utilizar marcadores de contenido (placeholders).

Dando estilo a las listas de opciones

Por último, al igual que contamos con estilos CSS predefinidos para los campos, también contamos con ellos para las opciones en los casos de campos con checkboxes (Casillas) y radio buttons (Botones selección). Son los siguientes:

• gf_list_2col para alinear las opciones en dos columnas
• gf_list_3col para alinear las opciones en tres columnas
• gf_list_4col para alinear las opciones en cuatro columnas
• gf_list_5col para alinear las opciones en cinco columnas
• gf_list_inline para alinear las opciones en filas fluidas, cada una lo que ocupe

Selectores en columna en Gravity Forms con gf_list_4col

De igual forma, podemos establecer la separación vertical de cada fila de opciones en píxeles, algo muy útil por ejemplo cuando los textos no tienen igual longitud y se dividen en dos líneas, separando la fila y descuadrando todo el layout.

Son los siguientes (el número del final indica la altura de la línea en px):

• gf_list_height_25
• gf_list_height_50
• gf_list_height_75
• gf_list_height_100
• gf_list_height_125
• gf_list_height_150

Los textos en Gravity Forms

Por último, y aunque esto es menos útil (porque los textos largos no abundan en formularios) también hay ciertas clases CSS predefinidas en Gravity Forms para texto, que se aplican en los campos de Salto de sección.

El más útil de todos ellos es la clase gf_scroll_text, que permite que textos largos se muestren con scroll, de forma que ocupen poco espacio en la pantalla. Útil, como digo, para mostrar por ejemplo licencias y textos de este tipo.

Texto con scroll en Gravity Forms

Conclusión

Pues ya lo ves: Gravity Forms no tiene por qué limitarse a un aburrido formulario en vertical. De hecho, sus posibilidades son enormes, ya que no sólo podemos darle el formato que queramos con estos estilos (o con estilos propios), sino que también podemos hacer muchas otras cosas con ellos, como paginarlos:

Crear un formulario por pasos con Gravity Forms

Como siempre, para cualquier duda o consulta tienes a tu disposición el formulario de contacto. Y si quieres contar en tu web con formularios con funcionalidades avanzadas, no tienes más que darme un toque. 😉