Last Updated on July 3, 2019
Caldera Forms CSS Styling – Misc. Looks
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
Opaque fields
Material design inspired
Simple, clean
See-thru form
Colored opaque form
Hi! When I add the CSS, only the button changes appearance. This happens with all the codes. Please help!
Hi Nicole! Where are you putting the CSS, and do you have other CSS from somewhere else that is for caldera forms in there also? Do you have a link to the site so I can try to see the code?
Thanks so much! I have done a caldera form. In preview it looks ok (well, needs more styling) but when I place the shortcode into the page I want to use it on, it’s blank. It also removes 2 images near the bottom of the page in another module. What’s all that about, any ideas? Thanks! https://test.ampair.co/contact/
Hi! I see the caldera shortcode, are you having issues with the caldera plugin itself?
Hi, I have several forms on the same site. How do I pinpoint one form to change the css without affecting the others?
Thanks
Hi Paul! You can add a custom class in the advanced section of your row (or section) that the form you want to style is in, so for instance: row > advanced > CSS class > styled-form (you can name it something else)
Then in the code you’re going to put .styled-form (note the period here) before each of the classes, so it looks similar to this
.styled-form .caldera-grid p,
.styled-form .caldera-grid label {
color: #f5f5f5;
}
let me know if you have any issues 🙂