Last Updated on July 3, 2019

Gravity Forms CSS Styling – Misc. Looks

Nov 12, 2017 | CSS Tutorial | 6 comments

Post Views: 9,005

I love creating different styles for Gravity 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!

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!

Even though I work in Divi these CSS snippets are using Gravity’s own classes, so you can use these on any WordPress site using their plugin. The one using the ET font can use Font Awesome (or another icon library) in its place.

The Divi Look

Gravity form styled to look like Divi
View Demo / Get Code

Add ET Icons

Gravity form with ET icons for radios and checkboxes
View Demo / Get Code

Material Design Inspired

Gravity Form styled like material design
View Demo / Get Code

6 Comments

  1. Paul
    Paul on September 26, 2018 at 5:30 am

    Thank you, just what i needed. The Devi looks great.

    • Leslie
      Leslie on September 26, 2018 at 1:35 pm

      Thanks Paul! 🙂

  2. TIM C MARTIN
    TIM C MARTIN on January 23, 2019 at 10:49 pm

    Do you have more snippets you can share?

    • Leslie
      Leslie on January 25, 2019 at 8:39 pm

      Hi Tim! Not sure what you mean, do you mean different form designs? If you have a look in mind that you can post a link to I can try to replicate it in Gravity 🙂

  3. Cherie
    Cherie on February 7, 2019 at 11:01 am

    I’m trying to piece all of the code together from all three of your forms to make my own form that looks like the one that I styled with Divi forms. I can’t figure out how to change the placeholder color for the drop down field.

    The page I’m working on is here – http://keopix.flywheelsites.com/contact-2/
    The top form is Divi, the bottom form is my Gravity form (as a work in progress).

    I hate to ask for help, but we’re trying to integrate this form into our CRM…and it is frustrating me to no end. I’m a CSS beginner.

    • Leslie
      Leslie on February 8, 2019 at 10:00 am

      Hi Cherie! 😀 I only see one form on that page (the gravity form, which looks great by the way!), are you referring to fields like the “how many hours” and “how did you hear about us” fields? And are you trying to make it a different color then what is there now or did you figure this out already? Most people try to change placeholder color for readability issues but I can read yours fine so just need a bit more info to be sure I’m understanding your issue.