Better Gravity Forms Stylesheet: 10% Faster + More Beautiful

Originally Posted on June 3, 2016 Last Updated on May 9, 2019

Don’t want to read the “why” and just want to download the Gravity Forms stylesheet? Skip right to that section.

I use Gravity Forms in nearly every project that requires forms on a WordPress site. It’s just a great plugin, and is continually being made better.

Well, the interface to create forms is great. The front end? Not so much.

Here’s what a typical Gravity Form looks like if you just install the plugin and add a form to your site.

Gravity Forms out of the box screenshot — Default styling of Gravity Forms.

Whoa, wait a minute! That’s not terrible…

I completely agree, and the guys at Gravity Forms have done a great job updating the style of the plugin while retaining backwards compatibility. But for my clients, I’m hoping for something a little better than “not terrible”.

Another issue is the number of forms the plugin loads to accomplish these styles. I count at least five, and that’s no good for our websites’ performance.

formreset.min.css
datepicker.css
formsmain.min.css
readyclass.min.css
browsers.min.css

I do everything I can to limit the number of stylesheets on a particular page to two, one for the styles and one for a webfont if it’s required by the design.

Luckily, we can turn all of those off directly via the plugin’s settings page (Forms > Settings).

screenshot showing Gravity Forms settings — Turn off the CSS that Gravity Forms creates.

That’s even worse though, assuming our theme doesn’t have any built in styles for form elements.

screenshot showing an unstyled form — A form with no styles is not better than Gravity Forms’ defaults!

The Solution?

I have created a minimalistic stylesheet specifically for Gravity Forms. It covers all of the fields that come with the core plugin, plus a few addons. Here’s a complete list:

Core Plugin, including all fields, headers, confirmations, error messages, etc.
All HTML5 Elements, from text inputs to multi-file uploads.
Stripe Add On, specifically the credit card field
Signature Add On

You can download the complete package here:

Download the ZIP File (66KB, v. 1.3)

What Will This Do for My Site?

Well, it’ll make Gravity Forms look nice and clean. It’ll also work toward unifying forms on your site in general, but you may have to tweak some CSS if your theme already has form styling. Or you can delete the /* Forms */ and /* Buttons */ sections of the CSS.

But most importantly, it’ll make your site faster!

Check out these comparisons of using the default Gravity Forms stylesheets (all 5+ of them) with integrating this stylesheet into your theme’s own style.css:

chart showing ~10% improvement in PageSpeed score — Google Pagespeed shows my stylesheet method improves speed by 9% on the overall page, just with this one method!

So what does it all look like? Here are some screenshots of the highlights:

an HTML form — A basic form showing the overall style of the forms.

All of the various ways you can request a name, from prefixes to suffixes, are covered.

gravity forms name inputs — Fields that need to be on one line look great and span the width of the form every time.

Addresses all line up, no matter if you use US, International or Canadian, including select boxes (such as for states).

calendar — Calendar icon and popup is styled to match, and will inherit your site’s settings for link color.

Character counts turn red when you've neared the limit. — Character counts turn red when you’ve neared the limit.

Checkboxes and radio buttons just look great.

credit card form on a website — Credit Card forms are crisp and clear, resulting in more sales!

Dropdowns match other input fields like text, textarea, etc.

red fields — Clean, concise error reporting to users.

Multi-file uploads look great alongside other form elements, too.

Multiselects look good with a few or a bunch of options, and indicate scrolling when there are more than can fit in the box.

product selection — Product costs and quantities are easy to recognize and adjust.

$100 — Form totals are clear and easy to read.

HTML inputs — Descriptions look great, and clearly indicate which field they belong to, whether they’re above or below.

And of course, it’s completely responsive, too!

Known Issues

The following are known issues I’m still working on:

Multiselects with the enhanced interface enabled (Chosen) don’t display very well. Working on updating this for the next version.
A better solution for the calendar icon replacement would be nice, short of requiring Javascript.
Issues with dropdown arrows on enhanced interface selects when there’s a problem with a fields submission. In other words, if a field is required, but the user doesn’t complete it, after form submission the enhanced interface tweaks a bit…the dropdown arrow jumps out of the way.

Browser Tested!

This has been tested in Chrome, Firefox and Safari, latest versions as of June 3rd, 2016, as well as Internet Explorer 10, 11 and Edge. Mobile testing was done on an iPhone, as well as with the dev tools in Chrome and Safari on a Mac.

IE9 requires some additional love, you can read about it here.

Enjoy! And let me know if you have any questions or improvements in the comments.

Up Next: Better Looking Select Elements that Look the Same in All Browsers via CSS

Discussion

Rachel R. 17 Nov 2016

I WISH mine looked that good (like the “before” shot). The forms look downright AWFUL on my site. The previews are okay — just boring — but once the form is actually embedded it’s so bad it’s basically unusable. The font turns an unreadable light grey, everything gets broken up onto multiple lines, weird extra blocks of color (like empty form fields with weird background colors) get added, checkboxes don’t line up. It’s really bad. I definitely will have to give your stylesheet a try!

Reply
1. nathan 21 Nov 2016
  
  Hope it works for you! Your theme may have it’s own form styling built in that’s conflicting with the default Gravity Forms stylesheets (ie, why you’re not seeing the “before” style).
  
  Reply
Michael 28 Nov 2016

Hello. Did I miss how to actually upload or add this? I could not seem to find the instructions here.

Thanks.

Reply
1. nathan 28 Nov 2016
  
  You would add it to your site’s CSS file (style.css) or via a child theme if you’re using a pre-purchased / pre-built theme.
  
  Reply
Gerard 23 Dec 2016

Nice job Nathan! One remark; the @font-face declaration has your theme path (/dougfir/) inside. In order to make it work a user should change this. Maybe you could add this to the _readme.txt?

Reply
1. nathan 23 Dec 2016
  
  Good point, Gerard! I’ve got a few updates I need to make to this as well.
  
  Reply
yabo 24 Mar 2017

The style changes are not appearing on my site after pasting the css changes into style.css.

Reply
1. nathan 3 Apr 2017
  
  Double check the CSS is actually in the live style.css file, or whatever your theme serves up, and that you have CSS turned off in Gravity Forms > Settings.
  
  Reply
James Rodriguez 20 Jan 2018

You rock!!!!!
Just saved me at least a day’s worth of frustation. Thank You!!!!!

Its working as expected. Just a small request, by any means can the submit/input button be of the same width as that of the form (width)?

Reply
1. nathan 22 Jan 2018
  
  Great, glad that worked out for you! You’ll just need to use CSS to make the submit buttons larger. Something like this should do it:
  
  form input.gform_button { width:100%; display:block; float:none; clear:both; }
  
  Reply
richard 31 Mar 2018

Hi, I am working on some custom CSS on my gravity forms site and i’m struggling with the date picker, can you give me just the CSS from the date picker styling you are using above?

Reply
1. nathan 12 Apr 2018
  
  You could just try and pick it apart from the full code, Richard.
  
  Reply
GIAN 27 Apr 2018

I need some help.
I downloaded your css and used just a bit of it in my theme custom css to change the appearance of the confirmation page. I was able to change some by adding
div.gform_confirmation_message {
background: red;
color: white;
padding: 1em;
margin: 1em 0;
border-radius: 3px;
}
but still I can’t find what code I need to include to change the look of the actual info the user entered. Like Name and email address and message, still not visible on the page, it’s kind of a table with 2 shades rows.

Please help. Thanks

Reply
1. nathan 2 May 2018
  
  You’d need to do something like put a `<span>`{user_input}`</span>` around it, and then either give that a class and style that or do some inline CSS.
  
  Reply
Chris 26 Jul 2018

Thanks for this! Just a couple of quick things I noticed. First is that the gravity forms ul is being overridden by my global ul styling. Second is the honeypot field is visible.

Reply
1. nathan 30 Jul 2018
  
  For the uls you’ll just have to write more specific CSS or use !important. For the hidden fields, definitely need to update that but you can use this:
  
  li.gform_validation_container, li.gform_hidden { position: absolute; left: -999em; }
  
  Reply
Greg Montaño 24 Sep 2018

Were you able to make the signature field fluid and 100% width? The appearance settings for that field require a pixel width. If I override this with CSS the pen is inaccurate rendering the field unusable. Maybe JS is required to constantly resize the field as the browser window scales?

Reply
1. David Zack 28 Dec 2018
  
  I have the same issue. It doesn’t look like this new CSS addresses this particular problem.
  
  Reply
Kevin 14 Mar 2019

Ready Classes, please! https://docs.gravityforms.com/css-ready-classes/

Reply
1. nathan 14 Mar 2019
  
  Feel free to add them in and I can review and post back here again, Kevin.
  
  Reply
  1. andrew 15 Mar 2019
    
    Thank you very much for this stylesheet, I got it to work but now my ready classes and hidden field labels are not working. Is there a way to get your style sheet to work with ready classes as well as Field Label Visibility?
    
    Reply
Andrew Pierson 15 Mar 2019

Thank you very much for making this stylesheet. I got it to work however now my ready classes as well as Field Label Visibility is no longer working. Is there a way to use this stylesheet in combination with ready classes and hidden field visibility?

Reply
1. nathan 25 Mar 2019
  
  I have not had a chance to add in the ready classes, however that would be a great addition. I didn’t even know about them until recently. However, I have updated it to include the validation and hidden fields’ CSS.
  
  Reply
Paul Houlihan 11 Apr 2019

Really nice Job Nathan! The design is quiet simple and beautiful. thanks for putting this out there!

Reply
1. nathan 11 Apr 2019
  
  You bet. Working on those ready classes slowly but surely as others have requested.
  
  Reply
Camille Ang 23 Apr 2020

I’ve added a couple adjustments, but still works great. Thanks!

Reply
1. nathan 23 Apr 2020
  
  Feel free to share your adjustments! I know I find things occasionally which need added depending on add-ons, etc.
  
  Reply
Randy 16 Jul 2022

Thanks for this. You obviously worked very hard. I have put off re-styling about 12 rather complex multi-page forms because I remember what a pain it was to do it the first time – and really got inconsistent result. I abandoned GF because of it.

But I just pasted your main css file in the header of a few pages just to check it out, and it looks a lot better than it did. All that tedious coding cost me days of work.

Reply
1. nathan 16 Jul 2022
  
  Keep in mind this was for previous versions / “legacy formatting” – not sure what it’ll look like for the new formatting but probably won’t work at all unless you check legacy formatting.
  
  Reply