Last Updated on July 3, 2019
Gravity Forms CSS Styling – Misc. Looks
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
Add ET Icons
Material Design Inspired
Thank you, just what i needed. The Devi looks great.
Thanks Paul! 🙂
Do you have more snippets you can share?
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 🙂
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.
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.