Better Gravity Forms Stylesheet: 10% Faster + More Beautiful
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.
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.
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).
That’s even worse though, assuming our theme doesn’t have any built in styles for form elements.
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
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:
So what does it all look like? Here are some screenshots of the highlights:
And of course, it’s completely responsive, too!
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.
- 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.
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.