Tutorial 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.

Read tutorials about

n8n vs Zapier: Which Automation Tool Actually Fits Your Work?

Trying to decide between n8n vs Zapier? This article breaks down pricing, hosting, integrations, AI features, and where self-hosted n8n on a cheap VPS can beat Zapier’s task-based plans. You’ll also see how Gravity Forms users can plug in the GravityWP n8n Connector and move key workflows off Zapier without rebuilding their forms.

Cloudflare Tunnel + n8n: Expose Local n8n for Webhook Testing (Dev Only)

This guide shows how to use Cloudflare Tunnel Quick Tunnels to put a local n8n instance on the internet for real webhook testing. It’s a dev-only recipe that lets tools like GravityWP’s n8n Connector call your local n8n over HTTPS, without renting a VPS or opening ports.

Self-Host n8n with Docker on a VPS

Learn how to self-host n8n with Docker on a VPS using a production-ready setup. This step-by-step guide walks you through configuring Docker Compose, Postgres, HTTPS, and WEBHOOK_URL so you can run reliable, secure n8n workflows on your own server.

One-Click n8n Hosting: How to Deploy n8n with Railway, Elestio & Coolify

Learn how one-click n8n hosting works on platforms like Railway, Elestio, and Coolify. This guide explains when to pick one-click hosting over n8n Cloud or a raw VPS, how templates are structured, and which env vars, security settings, and troubleshooting tips you can’t skip.

See all tutorials