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.

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.

  1. formreset.min.css
  2. datepicker.css
  3. formsmain.min.css
  4. readyclass.min.css
  5. 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

Download the ZIP File (66KB)

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.
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.
select box
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.
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.
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.
Multi-file uploads look great alongside other form elements, too.
File uploads match other inputs.
File uploads match other inputs.
Even many columns fit nicely together.
Even many columns fit nicely together.
Column and lists!
Column and lists!
Multiselects look good with a few or a bunch of options, and indicate scrolling when there are more than can fit in the box.
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.
Time inputs.
Time inputs.

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

Known Issues

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

  1. Multiselects with the enhanced interface enabled (Chosen) don’t display very well. Working on updating this for the next version.
  2. A better solution for the calendar icon replacement would be nice, short of requiring Javascript.
  3. 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