TutorialCSS Ready Classes selector for Gravity Forms

Tutorials » GravityWP BV » CSS Ready Classes selector for Gravity Forms

Gravity Forms has CSS Ready Classes to style your form fields. Using these classes, you can easily create more advanced layouts for the fields in your forms. Excellent idea, however, the problem is you always need to remember what the exact class name is. Now with this CSS Ready Classes selector, you don’t need to remember. Simply click on a button to launch the pop-up and choose the class you want to add.

Add your custom CSS

You can add your own CSS to the GravityWP – CSS Selector easily in your functions.php file. Just add the following code there. It adds quick buttons and an accordion on top of the modal. That way you can put easily your own CSS in the layout you want.

// Add custom css: quick buttons and accordion at the top of the GravityWP - CSS Selector modal
function my_custom_gwp_css_selector_add_css() {
    $html .= "<div class='gwp_quick_links'>
    <a class='gwp_css_link' href='#' rel='css_class' title='Insert css_class'>Custom CSS</a>
    <a class='gwp_css_link' href='#' rel='css_class_2' title='Insert css_class_2'>2nd Custom CSS</a></div>
    <li>
    <a class='gwp_css_acc_link' href='#'>Custom CSS</a>
    <div class='gwp_css_accordian'>
    <a class='gwp_css_link' href='#' rel='css_class_3' title='Insert css_class_3'>3rd Custom CSS</a>
    <a class='gwp_css_link' href='#' rel='css_class_4' title='Insert css_class_4'>4th Custom CSS</a>
    </div>
    </li>";
    return $html;
}
add_filter( 'gwp_css_selector_add_custom_css', 'my_custom_gwp_css_selector_add_css' );

Using the CSS Selector

Edit your form in the Form Builder. Then select the field you want to add the CSS Ready classes to. You can add the classes in the input field ‘CSS class name’ under the ‘Appearance’ tab. In the next steps you can find the most commonly used classes. They pretty much speaks for themselves, however a more detailed description is available at the Gravity Forms documentation site. Good to know:

• You can use more than one class for one field.
• You can also add your own classes.

Overview of available CSS Ready classes in Gravity Forms

This paragraph gives an overview of the possible CSS ready classes which can be used in Gravity Forms.

Our Premium Add-ons for Gravity Forms

Advanced Merge Tags
This Gravity Forms Add-On adds extra Merge Tag modifiers (and a lot of power). From the most common used functions like capitalize and length to changing date formats.

List Number Format
With this Gravity Forms Add-on you can change List Field columns into a number field, do calculations within a row or column. Extra merge tags are available with total counts of columns.

JWT Prefill
Create JSON Webtokens to populate fields in your Gravity Form. With a secure key you can validate the data you don’t want to be tampered with.

Advanced Number Field
Functionality for Number Fields, like rounding or only absolute numbers, fixed point notation, range calculation, custom units like % or m2 & show as slider.

Field to Entries
Create entries based on Checkboxes & Multi Select choices & List Field rows.

List Dropdown
Add a Dropdown Select with choices to a column or multiple columns in a Gravity Forms List Field.

Update Multiple Entries
Trigger the update of multiple entries in a target form by submitting an entry in a trigger form.

List Datepicker
Add a Datepicker with calendar select to a column or multiple columns in a Gravity Forms List Field.

Read more tutorials about GravityWP BV

Show all calculations Gravity Forms

Do you need an overview of all the calculations in your Gravity Form? With our Merge Tags Add-on you can easily get a list of all calculations (formulas) in one form.

Pay per word with starting price for Gravity Forms

With the gwp_word_count merge tag modifier for Gravity Forms it is possible to use the word count value of a text field in a formula. This way you can create a flexible Pay per Word calculation based on the amount of words in a text field.

Substring Modifier for Gravity Forms Merge Tags

Do you want to return a portion of a Merge Tag string output? And specify an offset and length of the part of the Merge Tag output? With Advanced Merge Tags it's as easy as it gets.

Quick overview of Gravity Forms Conditional Logic rules

When you're working with a lot of Conditional Logic rules in your form it can be a challenge to keep an overview. Our Merge Tags Add-on for Gravity Forms has a Conditional Logic Tab which creates a quick overview of all the rules in your form.

Bulk Update Gravity Forms Entries

Do you want to bulk update a large batch of Gravity Forms Entries? Like 12321 entries? A nearly undoable task by hand, but a breeze with our Update Multiple Entries add-on.