Modificar los estilos de Caldera forms para que parezca el formulario de Divi
Si estás empezando a utilizar Caldera forms y no sabes por dónde empezar para modificar estilos y darle un toque más atractivo a tu formulario estás en el sitio adecuado. Al ser un plugin que está hecho bajo la estructura de Bootstrap3 puede resultar un poco lioso adivinar por que clases empezar a trabajar para poder hacer nuestras modificaciones. Nos hemos inspirado en este sencillo tutorial de ElegantThemes para que veas como poder darle un estilo similar al formulario de Divi que viene por defecto a tu formulario construido con Caldera Forms, lo bueno es que a partir de el código CSS que añadiremos podrás darle tus propios estilos personalizados mucho más fácilmente.
¿Por dónde empezamos?
Primeramente crearemos nuestro formulario de contacto en la pestaña de Caldera Forms dentro del dashboard de nuestra instalación de WordPress
Una vez estamos dentro de el formulario que hemos creado podemos empezar a utilizar el constructor, primeramente seleccionamos los tipos de campos que queremos añadir y modificamos las opciones dentro de ese campo para adaptarlo a nuestras necesidades.
Bien una vez creado el formulario y sin haber cambiado ningún estilo ni modificado ningún apartado visual como ocultar etiquetas, nos debería quedar una cosa así si previsualizamos:
Como puedes ver nos queda un formulario bastante feo y desfasado, muy lejos de lo que queremos conseguir que es algo tipo así:
¿Cómo darle estilo a nuestro formulario?
Bien es muy sencillo simplemente tenemos que acabar de modificar las opciones del formulario ocultando etiquetas de los campos para que los labels salgan dentro de cada campo
También vamos a hacer lo mismo con el campo de mensaje y con el desplegable, pero verás que por defecto no salen con nada dentro de ese campo, bien para que salga un placeholder dentro de ese campo tenemos que añadir dentro de la opción marcador de posición el texto que queremos que nos salga en pantalla impreso.
Ahora ya tenemos las opciones básicas del formulario modificadas, pero aún nos queda mucho para que el formulario se vea como quedemos, para conseguirlo vamos a añadir una pocas líneas de CSS en el personalizador de temas.
/*** Estos cambios afectan a los campos de formulario ***/.caldera-grid .form-control {padding:16px;height:auto;box-shadow:none;background:#eee;color:#999;border:none;}/*** Estos cambios afectan a los estilos del botón ***/.caldera-grid input[type=submit] {padding:10px20px;border-radius:2px;background:transparent;color:#2ea3f2;font-size:20px;border:2pxsolid#2ea3f2;float:right;transition:all0.3s ease-in-out;}/*** Estos cambios afectan a los estilos cuándo haces hover en el botón ***/.caldera-grid input[type=submit]:hover {background:rgba(0,0,0,0.05);border-color:transparent;color:#2ea3f2;}
Con estos cambios integrados, nuestro formulario ya se vería como el que viene por defecto en Divi, y viendo dónde afecta cada cambio en un momento podremos modificarlo dándole el estilo que nosotros queramos por ejemplo modificando un poco el estilo del botón y de los campos:
Ahora ya sabes como poder modificar estilos en Caldera forms.
Esperamos que este pequeño tutorial os haya sido de utilidad ¡No dudéis en dejar vuestro comentario si tenéis cualquier duda!