The CSS Ready classes are a new feature that allows you to easily style your form fields using CSS without having to edit the plugin’s stylesheet. This is helpful for developers who want to customize their forms and create unique layouts.
The gravity forms css templates is a CSS Ready Classes for Gravity Forms WordPress Plugin that allows users to create custom CSS layouts.
[On WordPress.org, you can find the officially published version of this plugin.]
When creating your forms, Gravity Forms comes with a few built-in CSS classes called CSS Ready Classes that you may use. You will have to look them up unless you have remembered them.
Brad’s Gravity Forms CSS Ready Class Selector WordPress plugin, which serves as a convenient CSS Ready Class reference tool, has been updated. This plugin would create a handy popup displaying all the current available CSS Ready Classes while updating your forms and choosing the old ellipsis picture from the Custom CSS Class label under the Appearance tab. However, as previously said, it was over 6 years old and needed to be updated. There were a few CSS Ready Classes missing, and the link to the Gravity Forms CSS Ready documentation was broken. Plus, wouldn’t knowing which fields the intended class will operate with be useful? Mike’s forked version and improvements, which further simplified the code and eliminated the superfluous accordions, were then found. We didn’t realize how much we didn’t want the accordions until they were no longer available.
The popup display was further improved and simplified in our updated version of this useful plugin.
Select the Appearance tab from inside your forms’ fields, and then click the new “CSS” link next to the Custom CSS Class field, as previously. This will bring up the convenient reference popup. The old ellipsis picture button has been replaced with a simple link.
Select the CSS Ready Classes you wish to have added to your field from the drop-down menu. To dismiss the popup, either double-click on your last selection or press esc. When you hover your mouse over any class, a description of the class’s function and intended usage appears (through link title). On GitHub, you can find this project.
endurox is one of the contributors. https://endurtech.com/give-thanks/ is a link to donate. css ready classes, ready classes, css classes, gravityforms, gravityforms, gravityforms, gravityforms, gravityforms, gravityforms, gravityforms, gravityforms, gravityforms, gravityforms, gravity GPLv3 or later license http://www.gnu.org/licenses/gpl-3.0.html is the URI for the license. At the very least, 5.0 is required. Tested to a maximum of: 5.8 2.7.3 is a stable tag.
Description
This Gravity Forms WordPress plugin allows you to quickly and easily choose from a completely updated list of CSS Ready Classes beneath the Appearance tab of your form fields. Brad’s Gravity Forms CSS Ready Class Selector WordPress plugin has been updated to create this plugin. Thanks a lot to Brad Vincent for the original code and Mike Kormendy for the improved version! For additional information, go to the new and updated plugin website.
When managing your forms, this plugin will additionally HIDE ALL Gravity Forms backend tooltips as of version 2.5. Those tooltips are useful for the uninformed, but they soon become a nuisance for the initiated. Simply deactivate this plugin to restore tooltip functionality. I’ll work at putting this functionality into the main Gravity Forms Settings section so that it may be toggled in a future version. Please contact me if you wish to assist me in achieving this goal.
Donate today to guarantee that this plugin is improved in the future by giving me a tip through Brave or a one-time payment.
Features
* A link next to the “Custom CSS Class” field in the “Appearance” tab of a field makes it easy to reach. * A completely updated list of Gravity Forms CSS Ready Classes is shown in a clean and simple popup / modal window. * In the “Custom CSS Class” box, click to clear any previously provided CSS Ready Classes. You may add several CSS Ready Classes, and when you’re finished, just click away or the close button. * Double-click any CSS Ready Class to add it and have the popup / modal window disappear automatically. * To get a description of any CSS Ready Class, hover over it. * When handling your forms, hides ALL Gravity Forms backend tooltips (as of v2.5).
Installation
1. Double-check that Gravity Forms is installed and active. 2. Put the plugin folder in the /wp-content/plugins/ directory. 3. In WordPress, go to the Plugins menu and activate the plugin.
Screenshots
1. CSS link on the ‘Appearance’ tab of the form field. 2. CSS Ready Class selection popup / modal window that is easy to use.
Changelog
= 2.8.0 (to be released shortly) = * New Confirmation Classes are being added. In the ‘Form Settings’ page, under ‘Form Layout,’ add a class to the ‘CSS Class Name’ field. Converts the confirmation message to a colorful banner. It only works with ‘text’ confirmation messages, not with page or redirect confirmations. If a chosen class exists, the double-click action will be repurposed from dismissing the popup to deleting it.
* = 2.7.3 = WordPress 5.8 was used in the testing.
* = 2.7.2 = WordPress 5.7 was used in the testing.
* = 2.7.1 = WordPress 5.6 was used in the testing.
* = 2.7.0 = A handy ‘Clear classes’ link has been added at the top of the popup. This clears the ‘Custom CSS Class’ field of any previously entered CSS Ready Classes. * * Tested against the new Gravity Forms plugin’s latest beta version (2.5 beta 1). Improvements to the code, minification, and style.
* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * (thanks Michael D.)
* = 2.6.0 = CSS Ready Classes has been added as a new HTML field. This converts the contents of an HTML field into a colorful banner message.
* = 2.5.0 = By default, all backend tooltips in Gravity Forms are now hidden. A new Read-only CSS class has been added. NOTE: A hidden HTML form field with an embedded JavaScript snippet is required. (https://endurtech.com/create-read-only-field-in-gravityforms/) [Get the required JavaScript code]. WordPress 5.5 was used in the testing.
* = 2.4.6 = WordPress 5.3.1 was used for testing.
* = 2.4.5 = WordPress 5.3 was used in the testing.
* = 2.4.4 = Functions have been renamed to maintain compatibility with other plugins.
* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
* Simplified Class Section = 2.4.2 Tested with the most recent WordPress and GF versions.
= 2.4.1 = * Added a new CSS class that isn’t visible. I cleaned up the code and updated it.
= 2.4 = * New vertical CSS classes were added, classes were reordered, and titles were changed. A donation link has been added.
= 2.2 = * New CSS classes and titles have been added. The connected icon has been replaced by a text link. Extraneous instantiation was removed, and style was tidied up (Thanks Mike).
* Initial release (version 1.2).
Most Commonly Asked Questions
= Is there anything that this plugin is based on? Yes, Gravity Forms v2.0+ must be installed and active.
= How can I get my Gravity Forms tooltips back? All backend tooltips are hidden with this plugin. You may temporarily deactivate this plugin to restore tooltips. I’ll work at integrating this functionality into the main Gravity Forms Settings section so that it may be toggled in the future.
= What happened to my Gravity Forms tooltips? All backend tooltips are hidden with this plugin. You may temporarily deactivate this plugin to restore tooltips. I’ll work at integrating this functionality into the main Gravity Forms Settings section so that it may be toggled in the future.
= What is the Read-only CSS Ready class and how do I use it? This class necessitates the usage of a hidden HTML form field with an embedded JavaScript snippet. Get the JavaScript snippet you’ll need.
= I found this plugin to be quite useful. What can I do to assist you? I’m glad I could assist! Support my efforts and future enhancements to this plugin by tipping me or making a one-time contribution using your Brave browser. If you have any suggestions for improvements or would want to contribute to the code, please contact me.
I’d love to hear your views, questions, and ideas about my CSS Ready Classes for Gravity Forms Plugin for WordPress post.
I hope that my efforts on this WordPress plugin are as beneficial to you as they have been to me. This plugin makes it easier for me to remember all of Gravity Forms’ built-in CSS Ready Classes so that my different web forms look their best.
You may help me out by leaving a tip in the Brave browser or making a one-time payment with your credit card.
Please let me know if you see any mistakes in my post or if I can help you further by addressing any questions you may have.
Note from the Editors:
The gravity forms design examples is a CSS Ready Class for the Gravity Forms WordPress Plugin. It allows you to create custom gravity form designs with ease.
