by ProgramMatek
Table of Contents
Gravity Forms CSS Ready Classes offer a convenient way to tweak and customize your forms without any technical expertise. In this article, we’ll dive deep into Ready Classes, exploring their benefits, how they can enhance your forms, and how to use them effectively.
What Are Gravity Forms CSS Ready Classes and How Do They Help?
Gravity Forms CSS Ready Classes empower you with greater control over the style and layout of your forms. These pre-defined CSS styles are part of the default form stylesheet, allowing you to effortlessly apply them to your form fields by adding the relevant class name to the parent element. Think of Ready Classes as an extension of the design options provided by the Gravity Forms editor.
With Ready Classes, you gain access to a wide range of form customization options beyond what the editor offers. Let’s take a closer look at what you can achieve with Gravity Forms CSS Ready Classes:
- Change the style and layout of list items within field types like Checkboxes and Radio Buttons. For instance, display list items in multiple columns instead of a single long list.
- Modify text styling in form fields and confirmation messages. You can even add banners or alerts to draw attention to important information.
- Alter how text is displayed, such as presenting lengthy text in a fixed height scroll box, perfect for terms of service agreements.
- Hide fields even when there are no visibility settings available in the editor.
This list merely scratches the surface of what Gravity Forms CSS Ready Classes can accomplish. Continue reading for a detailed exploration of these features with real-life examples.
What You Can Achieve Without CSS Ready Classes
It’s important to note that while CSS Ready Classes expand your layout options, you can already access a wide range of design choices directly in the Gravity Forms editor, especially since version 2.5. For instance, you can easily create multi-column form layouts by dragging form fields next to each other—no Ready Classes required. Furthermore, you can customize the relative width of these columns, enabling you to achieve a balanced layout. The Appearance settings for individual fields offer additional options to tweak label visibility, description placement, and more.
Form-wide settings can be found in the Form Settings under Form Layout, granting you further control over your form design. If the provided options still don’t meet your needs, you can turn to Ready Classes for more comprehensive customization.
How to Use Gravity Forms CSS Ready Classes
Now that you understand what Ready Classes are and how they can enhance your forms, let’s explore how to utilize them when editing a form. We’ll begin with a general overview of adding Ready Classes, followed by specific examples of popular Ready Classes and their applications.
Where to Add a Ready Class in Gravity Forms
To apply a Ready Class to an individual form field, you can use the Custom CSS Class field found in the Appearance tab of the field’s settings:
- Open a field’s settings in the Gravity Forms editor.
- Expand the Appearance section.
- Enter the relevant Ready Class in the Custom CSS Class field.
You can add multiple Ready Classes to a single form field if needed. Simply separate each class name with a space. Here’s an example:
In some cases, you may need to add the Ready Class at the form level instead of the field level. For example, to customize the style of the confirmation message. In such cases, add the relevant Ready Class(es) to the CSS Class Name box in the Form Layout section of the Form Settings area:
- In the form editor, expand the Settings dropdown menu and select Form Settings.
- Scroll down to the Form Layout section.
- Enter the relevant Ready Class in the CSS Class Name field.
How to Preview the Design of Ready Classes
It’s important to note that Ready Classes will not fully display in the editor. When you initially apply a Ready Class to your form, you may not see any changes or encounter slight discrepancies in the editor’s appearance.
To preview how your Ready Classes will look on the live form:
- Save the form by clicking the Save Form button in the top-right corner.
- Click the Preview button to the left of the Save Form button.
This will open a new tab displaying a basic preview of your form, complete with the relevant styling from the Ready Classes.
Now, let’s delve into specific tutorials on using Ready Classes to adjust and enhance your forms.
How to Adjust List Items With Ready Classes
One of the most useful applications of Ready Classes is adjusting the formatting of list items in fields like Checkboxes and Radio Buttons. This can be particularly helpful when there are many items to select, allowing you to group them into multiple columns and adjust their spacing.
How to Separate Gravity Forms Lists Into Multiple Columns
Gravity Forms provides eight different Ready Classes to separate list items (such as Checkboxes and Radio Buttons) into multiple columns:
- gf_list_2col
- gf_list_3col
- gf_list_4col
- gf_list_5col
- gf_list_2col_vertical
- gf_list_3col_vertical
- gf_list_4col_vertical
- gf_list_5col_vertical
Both sets of Ready Classes divide list items into multiple columns, ranging from two to five columns based on the number of items. The distinction lies in how the items are filled into these columns.
The first four Ready Classes fill items from left to right across the columns and then descend in rows until the list is fully displayed. Example:
By adding the _vertical modifier to the Ready Class, the items will fill from top to bottom in the left column first, and then continue across the columns until the list is exhausted. The items will be divided evenly across the columns whenever possible.
To clarify, consider the following example. We have a form with 43 options in a Checkboxes field:
When applying the gf_list_3col Ready Class, the list items will fill the columns as shown:
When using the gf_list_3col_vertical Ready Class, the list items will fill the columns like this:
Use an Inline List Instead of Distinct Columns
Alternatively, you can choose to display list items as an inline list using the gf_list_inline Ready Class. With this option, items will not be displayed in evenly spaced columns like previous Ready Classes. Instead, they will fill the available space and wrap onto the next line when necessary.
