TutorialCSS 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

List Dropdown

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

n8n Connector

Connect Gravity Forms to n8n and automate your workflows with secure, flexible, and powerful webhooks. Go beyond simple notifications and build advanced, two-way automations.

API Connector

Connect Gravity Forms to External API's: Query the API using form field values and automatically fill other form fields with the API response.

Personal Edit Link

Let people correct their own Gravity Forms entries. Send a secure personal link that reopens the form with their saved answers and updates the original entry, with locked fields, audit history and optional Gravity Flow steps.

See all add-ons

Read tutorials about

How to Create an Event Registration Form for Workshops

Create an event registration form for workshops in WordPress. Learn which attendee details to collect, how to configure confirmation emails and how to update workshop dates for confirmed registrations using GravityWP Update Multiple Entries.

How to Create Gravity Forms Entries from Comma-Separated Text

Turn a comma-separated task list into separate Gravity Forms entries. Follow our tested Field to Entries setup, mapping, and custom separator example.

How to Validate Repeatable Contact Rows in Gravity Forms

Learn how to validate repeatable Gravity Forms List field rows with GravityWP List Text. This tutorial shows how to add email and regex validation, test invalid values, and confirm that valid team roster data is stored correctly.

Gravity Forms Airtable Integration: Create Records From Form Submissions

Learn how to build a Gravity Forms Airtable integration with GravityWP API Connector. Send form submissions to Airtable, create new records automatically, and save the returned Airtable Record ID and response back to Gravity Forms.

See all tutorials