Caldera Forms CSS Styling – Misc. Looks

Nov 11, 2017 | CSS Tutorial | 2 comments

I love creating different styles for Caldera Forms using CSS so I’ve curated a few in this post so you can quickly access the code and view the demos. When I have new ones I’ll add them to this post, hopefully they’ll come in handy 🙂

Even though I work in Divi these CSS snippets are using Caldera’s own classes, so you can use these on any WordPress site using their plugin.

For all of these the CSS can go in your Divi theme options > custom CSS box or your child stylesheet, you’ll just need to change the color codes to match your site. Background images are in the section settings, have fun!

UPDATE MAY 2018: Caldera + Divi has become a bit finicky in recent months. If you find some styles aren’t applying try adding !important to those particular areas of code. I’m not going to add it all over my snippets because you should use it sparingly as it is, so it’s best everyone adds it only where they need to. Also I recommend putting the code in Divi theme options > custom CSS box as that gets loaded before the child stylesheet.

The Divi look

Caldera form styled to look like Divi

Opaque fields

Caldera form with transparent background and opaque fields

Material design inspired

Caldera form styled like material design

Simple, clean

Caldera form with only bottom borders

See-thru form

Transparent Caldera form with transparent fields and a background image

Colored opaque form

Caldera form with colored opaque form