En este rápido tutorial vemos cómo poner varios campos en una misma fila en Gravity Forms con las clases CSS que vienen ya predefinidas en éste plugin.
Varios campos en una misma fila
Un suscritor de los cursos que está haciendo el curso de Gravity Forms me manda el siguiente correo:
Duda sobre el uso de las columnas en Gravity Forms
Por defecto, los campos aparecen uno en cada fila, siempre uno debajo de otro., pero podríamos combinar varios en una. Básicamente se refiere a lograr este efecto:
Mostrar varios campos en una misma fila en Gravity Forms
Como podéis ver, los campos de "Nombre", "Email" y "Website" están en una misma fila, repartidos en tres columnas. En la siguiente fila tenemos el campo "Mensaje", y finalmente en la tercera fila el botón de "Enviar".
Clases predefinidas de Gravity Forms
Lograrlo no es difícil, pero es cierto que está bastante "escondido", pues no hay una opción directa en el panel de control, sino que deberemos usar unas clases que vienen predefinidas en Gravity Forms.
Las clases para dos columnas son las siguientes:
- gf_left_half
- gf_right_half
Y las clases para tres columnas son estas:
- gf_left_third
- gf_middle_third
- gf_right_third
No hay clases para más de 3 columnas, aunque también es cierto que sería raro un formulario con 4 o más columnas.
En todo caso, ¿Qué debemos hacer con estas clases? Fácil (aunque rebuscado), sólo tenemos que ponerlas en el apartado "Clase CSS personalizada" que encontramos dentro del apartado "Apariencia" de cada elemento, tal que así:
Indicamos la clase en "Clase CSS personalizada"
Como podéis ver, este campo es "Nombre", el primero de la fila, y de ahí que le corresponda "gf_left_third". Ahora tocará hacer lo mismo con Email, que tendrá "gf_middle_third" y el campo Website, con "gf_right_third".
Lo que hemos hecho aquí es darle una clase CSS a cada uno de los campos del formulario, de forma que cada uno ocupa un tercio de la columna y se justifican a la izquierda, centro y derecha. ¡Y listos! Si quisiéramos una fila con dos campos, deberíamos asignar gf_left_half al primero y gf_left_half al segundo.
Y si queremos más, deberemos crear nuestras propias clases del estilo gf_first_fourth, gf_second_fourth, gf_third_fourth y gf_last_fourth, y añadirlas a nuestro CSS, eso sí, disminuyendo el width al 25%. Para saber como hacerlo os recomiendo echar un vistazo al curso de CSS.
Resumen y conclusión
Gravity Forms nos permite colocar campos en una misma fila gracias a las clases predefinidas que van de serie, con la que podemos poner campos en dos o tres columnas.
Si queréis saber más echado un vistazo a los cursos de Gravity Forms y de CSS. Ya sabéis que tendréis acceso a más de 6911 vídeos.