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

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.

List Text

Add features like textarea, placeholder and custom validation to a column or multiple columns in a Gravity Forms List Field.

List Datepicker

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

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.

See all add-ons

Read tutorials about

Gravity Forms Notion Integration: Create Database Pages Without Zapier

Connect Gravity Forms to Notion without Zapier. This tested tutorial shows how to create Notion database pages from form submissions and save the returned page ID, URL, creation time, and API response.

Gravity Forms ClickUp Integration: Create Tasks Without Zapier

Create a Gravity Forms ClickUp integration without Zapier. This step-by-step tutorial shows how to create ClickUp tasks from form submissions, map priority and requester data, and save returned task details back into Gravity Forms.

Gravity Forms Zendesk Integration: Create Support Tickets Without Zapier

Create Zendesk support tickets from Gravity Forms submissions with GravityWP API Connector and OAuth 2.0, then save returned ticket data in the original entry.

Gravity Forms Discount Code Field: Apply Fixed or Percentage Discounts in a Form

Learn how to create a Gravity Forms discount code field that applies fixed or percentage discounts. This tutorial shows how to calculate subtotals, discount amounts, and final totals using tested form logic.

See all tutorials