Esta mañana he recibido un correo electrónico dónde me preguntaban cómo podía introducir campos en varias columnas con Ninja Forms. Específicamente se refería a cómo tener el mismo diseño que tiene mi formulario de contacto:
Al introducir campos en Ninja Forms, por defecto nos aparecerá cada uno en una fila, uno debajo del otro.
Si algunos de nuestros campos son más bien cortos (como el nombre y el correo electrónico), nos interesará colocarlos en una misma fila. Aparte de que se verá mejor, el formulario ocupará menos y se podrá ver entero sin hacer scroll.
Introducir CSS en los campos de Ninja Forms
No tiene ningún secreto lograrlo. Simplemente bastará añadirle unas clases CSS a nuestros campos para conseguir el objetivo.
Para ello, en nuestro panel de administración iremos a «Ninja Forms«, «Escritorio» y editaremos el formulario en cuestión.
Una vez dentro de la configuración del formulario, seleccionaremos un campo y nos iremos a la pestaña «Visualización«.
En el campo «Contenedor«, añadiremos clases CSS. Lo que haremos aquí es darle una clase CSS a los campos del formulario, de forma que cada uno ocupe un medio de la columna.
En el caso de que utilicemos Genesis Framework, ya tendremos a nuestra disposición estas clases de columnas. En el caso de que queramos poner dos filas en una misma línea, tendremos que hacer lo siguiente:
- En el primer campo, introduciremos las clases one-half y first.
- En el segundo campo, tan sólo introduciremos la clase one-half.
Cómo su nombre indica, la clase first sólo se tiene que introducir en el campo de la primera columna.
Y no tan sólo podremos dividirlo en dos columnas. También están disponibles las clases one-third, one-fourth, entre otras más.
En el caso de que no utilicemos Genesis Framework, tendremos que implementar nuestras propias clases CSS en style.css. Ya sabremos como aplicarlas en cada uno de los campos de Ninja Forms
Resumen y conclusión
¡Pues esto es todo! Ya hemos visto que en el caso de que utilicemos Genesis Framework lo tendremos muy fácil. En caso de que utilicemos otro tema de WordPress, puede ser una gran oportunidad para reflexionar a cambiarnos al que yo considero el mejor framework de WordPress.