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

Entry to Database

Integrates Gravity Forms with internal or external databases, offering flexible mapping of form fields to database columns and real-time synchronization between entries and database rows.

DateTime Field

The GravityWP - DateTime Field add-on adds a dedicated Date/Time field to Gravity Forms so users can enter both a date and a time in a single input.

List Dropdown

Add a Dropdown Select with choices 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

Show Previous Gravity Forms Submissions Using Advanced Merge Tags

This step-by-step tutorial shows how to use GravityWP Advanced Merge Tags to count previous Gravity Forms submissions and calculate total submitted value based on a matching email address.

Gravity Forms LeadConnector Integration with OAuth 2.0

This documentation-based tutorial explains how to connect Gravity Forms to LeadConnector/HighLevel with OAuth 2.0, search contacts by email, and map returned CRM values back into form fields using GravityWP API Connector.

Gravity Forms Zoho CRM Integration: How to Auto-Populate Form Fields by Email

Learn how to auto-populate Gravity Forms from Zoho CRM using GravityWP API Connector. This tutorial shows how to search Zoho Contacts by email and fill form fields with the returned data.

How to Create a Public Submission Business Directory in WordPress (Gravity Forms + GravityView)

Build a moderated business directory where users submit listings through a form, admins approve entries, and approved businesses appear in a searchable GravityView directory.

See all tutorials