CSS Ready Classes for Gravity Forms WordPress Plugin

, , , , , ,

CSS Ready Classes for Gravity Forms WordPress Plugin

 

[ 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.

 

Download from WordPress Download from Github

CSS Ready Classes for Gravity Forms Plugin Logo

 

CSS Ready Classes for Gravity Forms

Contributors: endurox
Donate link: https://endurtech.com/give-thanks/
Tags: css ready classes, ready classes, css classes, gravityforms, gravity forms
License: GPLv3 or later
License URI: http://www.gnu.org/licenses/gpl-3.0.html
Requires at least: 5.0
Tested up to: 5.8
Stable tag: 2.7.3

Description

This WordPress plugin for Gravity Forms will allow you to quickly and conveniently select from a fully updated list of CSS Ready Classes available under your form fields’ Appearance tab. This plugin is a modified version of Brad’s Gravity Forms CSS Ready Class Selector WordPress plugin. Special thanks to Brad Vincent for the original code and Mike Kormendy for the cleaned up version! Visit the new and improved plugin web site for more details.

This plugin, as of v2.5, will also HIDE ALL Gravity Forms backend tooltips when managing your forms. Those tooltips are helpful to the uninitiated but quickly become a pest to those of us who are initiated. To restore tooltip function simply disable this plugin. In a future release I will look into embedding this feature into the main Gravity Forms Settings area so that it can be toggled. If anyone wants to help me achieve this please get in touch with me.

Donate now to ensure future improvements to this plugin by sending me a tip using Brave or by sending me a one-time donation.

Features

* Conveniently accessible with a link next to the “Custom CSS Class” field under a fields’ “Appearance” tab.
* Clean and simple popup / modal window listing a fully updated list of Gravity Forms CSS Ready Classes.
* Click to clear all previously submitted CSS Ready Classes from the “Custom CSS Class” field.
* You are able to add more than one CSS Ready Class, when done just click away or the close button.
* Double click any CSS Ready Class to add it and auto-close the popup / modal window.
* Hover over any CSS Ready Class to obtain a description of the class.
* Hides ALL Gravity Forms backend tooltips when managing your forms (as of v2.5).

Installation

1. Make sure Gravity Forms is installed and activated.
2. Upload the plugin folder to your ‘/wp-content/plugins/’ folder.
3. Activate the plugin through the ‘Plugins’ menu in WordPress.

Screenshots

1. CSS link accessible under form field’s ‘Appearance’ tab.
2. Convenient CSS Ready Class selection Popup / modal window.

Changelog

= 2.8.0 (coming soon) =
* Adding new Confirmation Classes. Add a class to the ‘CSS Class Name’ input under ‘Form Layout’ within the ‘Form Settings’ page. Turns confirmation message into colored banner. Works with ‘text’ type confirmation messages, NOT page or redirect confirmations.
* Will repurpose double click action from closing popup to removing selected class, if exists.

= 2.7.3 =
* Tested against WordPress 5.8

= 2.7.2 =
* Tested against WordPress 5.7

= 2.7.1 =
* Tested against WordPress 5.6

= 2.7.0 =
* Added a convenient ‘Clear classes’ link to the top of the popup. This removes all previously entered CSS Ready Classes from the ‘Custom CSS Class’ field.
* Tested against the lastest beta version (2.5 beta 1) of the new Gravity Forms plugin.
* Various code improvements, minification and styling updates.

= 2.6.1 =
* Corrected an invalid link within the readme (thanks Michael D.)

= 2.6.0 =
* Added new HTML field CSS Ready Classes. This turns an HTML field and its contents into a colored banner message.

= 2.5.0 =
* All backend tooltips within Gravity Forms are now hidden by default.
* Added new Read-only CSS class. NOTE: Requires an embedded JavaScript snippet within a hidden HTML form field. [Get the needed JavaScript snippet](https://endurtech.com/create-read-only-field-in-gravityforms/).
* Tested against WordPress 5.5

= 2.4.6 =
* Tested against WordPress 5.3.1

= 2.4.5 =
* Tested against WordPress 5.3

= 2.4.4 =
* Uniquely renamed functions to ensure compatibility with other plugins.

= 2.4.3 =
* Updated name for publication on WordPress.org Plugin directory.

= 2.4.2 =
* Simplified Class Section.
* Tested against latest WP and GF versions.

= 2.4.1 =
* Added new invisible CSS class.
* Updated code, made it cleaner.

= 2.4 =
* Added new vertical CSS classes, reordered classes and updated titles.
* Added donate link.

= 2.2 =
* Added new CSS classes and titles.
* Replaced linked icon with text link.
* Removed extraneous instantiation and cleaned up styling (Thanks Mike).

= 1.2 =
* Initial release.

Frequently Asked Questions

= Does this plugin rely on anything? =
Yes, you must have Gravity Forms v2.0+ installed and activated.

= How do I restore tooltips within Gravity Forms? =
This plugin hides all backend tooltips. To restore tooltips you may temporarily disable this plugin. In the future I will look into embedding this feature into the main Gravity Forms Settings area so that it can be toggled.

= Where did my Gravity Forms tooltips go? =
This plugin hides all backend tooltips. To restore tooltips you may temporarily disable this plugin. In the future I will look into embedding this feature into the main Gravity Forms Settings area so that it can be toggled.

= How do I use the Read-only CSS Ready class? =
This class requires the use of an embedded JavaScript snippet within a hidden HTML form field. Get the needed JavaScript snippet.

= I found this plugin helpful. How can I help? =
Happy to have helped! Support my work and future improvements to this plugin by sending me a tip using your Brave browser or by sending me a one-time donation. If you have any ideas for improvements or want to contribute to the code you may get in touch with me.

 

Conclusion

I welcome your thoughts, questions or suggestions on my article regarding my CSS Ready Classes for Gravity Forms Plugin for WordPress.

I hope my efforts on this WordPress plugin benefits you as much as it has benefited me. This plugin allows me to more easily recall all of Gravity Forms built in CSS Ready Classes to best display my various web forms.

You may support my work by sending me a tip using your Brave browser or by sending me a one time donation using your credit card.

Let me know if you found any errors within my article or if I may further assist you by answering any additional questions you may have.

 

Editors Note: