[ See the officially released version of this plugin on WordPress.org ]

 

Gravity Forms comes with a few built-in CSS classes, called CSS Ready Classes, for you to choose from when building your forms. However, unless you have memorized them you will have to look them up.

We’ve updated Brad’s (6+ year old) Gravity Forms CSS Ready Class Selector WordPress plugin which works as a handy CSS Ready Class reference tool. When editing your forms, selecting the old ellipsis image from the Custom CSS Class label within the Appearance tab, this plugin would generate a convenient popup containing all the latest available CSS Ready Classes. But as we mentioned, its over 6 years old and needed to be updated. It was missing a few CSS Ready Classes and had an invalid link to the Gravity Forms CSS Ready documentation. Plus, wouldn’t it be handy to know which fields the intended class would work with? Then we discovered Mike’s forked version and enhancements which further streamlined the code and removed the unnecessary accordions. We didn’t know that we didn’t want the accordions until they were gone.

Our revision of this convenient plugin further refined and streamlined the popup display.

Updated CSS Ready Classes for Gravity Forms

This new plugin, as before, from within your forms’ fields, select the Appearance tab and click the new “CSS” link next to the Custom CSS Class field. This will open the handy reference popup. We replaced the old ellipsis image button with a simple link.

Browse through the various CSS Ready Classes and select the ones you want to have added to your field. Double click on your last selection to automatically close the popup or just hit esc. When you hover your cursor over any class, a description (via link title) will appear of the classes function and intended use. View this project on GitHub.

 

 

Read more