Last Updated on July 3, 2019

Caldera Forms CSS Styling – Misc. Looks

Nov 11, 2017 | CSS Tutorial | 6 comments

Post Views: 10,556

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
View Demo / Get Code

Opaque fields

Caldera form with transparent background and opaque fields
View Demo / Get Code

Material design inspired

Caldera form styled like material design
View Demo / Get Code

Simple, clean

Caldera form with only bottom borders
View Demo / Get Code

See-thru form

Transparent Caldera form with transparent fields and a background image
View Demo / Get Code

Colored opaque form

Caldera form with colored opaque form
View Demo / Get Code

6 Comments

  1. Nicole
    Nicole on February 28, 2018 at 11:18 am

    Hi! When I add the CSS, only the button changes appearance. This happens with all the codes. Please help!

    Reply
    • Leslie Bernal
      Leslie Bernal on February 28, 2018 at 12:19 pm

      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?

      Reply
  2. bex
    bex on January 24, 2019 at 6:59 pm

    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/

    Reply
    • Leslie
      Leslie on January 25, 2019 at 9:35 pm

      Hi! I see the caldera shortcode, are you having issues with the caldera plugin itself?

      Reply
  3. Paul
    Paul on April 13, 2019 at 4:40 am

    Hi, I have several forms on the same site. How do I pinpoint one form to change the css without affecting the others?
    Thanks

    Reply
    • Leslie
      Leslie on April 15, 2019 at 11:04 pm

      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 🙂

      Reply

Submit a Comment

Your email address will not be published.