Free Gravity Forms add-on
CSS Selector
Click to add CSS Ready Classes, no class names to remember
CSS Selector is a free Gravity Forms add-on that adds a button to the field settings, which opens a pop-up with the CSS Ready Classes. Click to add choice columns, alert banners, inline fields, Gravity PDF and Gravity Perks classes, or your own custom classes.
- Rated 5.0/5 by 8 users on WordPress.org
- 4,000+ active installs
- Listed in the official Gravity Forms add-on directory
For Gravity Forms users who style fields with CSS Ready Classes and do not want to look up class names every time.
Nothing to remember
You see all classes in one pop-up, grouped by type, with a short description of each. No more looking up the Gravity Forms documentation.
No typos
A mistyped class name does nothing. Clicking a button always adds the exact class.
Your house style in the same place
Add your own classes to the pop-up, so everyone who builds forms uses the same ones.
Use cases
- Show a long list of checkbox options in three columns.
- Put a colored notice above a form section with an HTML field.
- Hide the character counter on a paragraph field.
- Keep internal fields out of the PDF you send with Gravity PDF.
- Hide a product field that has no visibility setting.
- Give your team a fixed set of house-style classes in the pop-up.
Features
-
One click from the field settings
A button under the Custom CSS Class setting opens the pop-up. Click a class to add it to the field. Double-click to add it and close the pop-up.
-
Layouts for choices
Show radio buttons and checkboxes inline with
gf_list_inline, or in two to five columns withgf_list_2coltogf_list_5col. Vertical columns such asgf_list_3col_verticaland fixed choice heights fromgf_list_height_25togf_list_height_150are also there. -
Alert banners for HTML fields
Turn an HTML field into a green, red, yellow, gray or blue banner message with
gf_alert_green,gf_alert_redand the other alert classes. -
Handy field classes
Hide a field with
gf_invisible, place it inline withgf_inline, make a scroll box withgf_scroll_text, or hide the am/pm selector and the character counter withgf_hide_ampmandgf_hide_charleft. -
Gravity PDF and Gravity Perks
Leave a field out of the PDF with
exclude, start a new PDF page withpagebreak, or copy a value with the Copy Cat classcopy-1-to-2. -
Your own classes
Add quick buttons and your own section to the pop-up with the
gwp_css_selector_add_custom_cssfilter.
Ready to use CSS Selector? Free download.
Download for freeWhy GravityWP
Gravity Forms specialists since 2014. The people who build the add-ons also answer your questions.
Built the Gravity Forms way
Our add-ons use the official Gravity Forms add-on framework, so settings, feeds and entries work the way you already know.
Compatibility guaranteed
Works with current Gravity Forms versions and certified add-ons like Gravity Flow, GravityView and Gravity Perks. If something conflicts, we fix it.
Support from the developers
Your question goes straight to the people who wrote the code. Good feature requests often make it into the next release.
What customers say
I tried the other css selector plugin but that looks like it has been abandoned. Found this and very impressed. Worked well and like all the options. […]
Does the job exactly how you want.. wish I could drop 10 points here
Handy little plugin as I always forget the selectors. Many thanks
Frequently Asked Questions
Yes. CSS Selector is a free add-on for Gravity Forms.
No. You click the class you want and it is added to the field. Only adding your own classes to the pop-up needs a short snippet in your theme’s functions.php.
Yes. Click several classes to combine, for example a column layout and a choice height.
Yes. Use the gwp_css_selector_add_custom_css filter to add quick buttons and your own section at the top of the pop-up.
No. It only runs in the form editor and adds class names to the field setting. It loads nothing on the front end of your site.
The pop-up matches your Gravity Forms version. From Gravity Forms 2.5 you get the vertical column and alert classes; on older versions you also get the half, third and quarter column classes.
Examples
| Class | Use it on | Result |
|---|---|---|
gf_list_3col | Radio buttons, checkboxes | Choices in three columns, left to right and then in rows |
gf_list_2col_vertical | Radio buttons, checkboxes | Choices in two columns, top to bottom and then the next column |
gf_alert_yellow | HTML field | The field and its content become a yellow banner message |
gf_hide_charleft | Paragraph text with a maximum number of characters | The “characters left” counter is hidden |
gf_invisible | Fields without a visibility setting, like product fields | The field is hidden |
exclude | Any field (Gravity PDF) | The field is left out of the PDF |
pagebreak | Any field (Gravity PDF) | A new PDF page starts with this field at the top |
Adding your own classes is described in the documentation.
Requirements
- Gravity Forms 1.5 or later; the vertical column and alert classes appear from Gravity Forms 2.5
- WordPress, tested up to 6.8
- Optional: Gravity PDF, for the
excludeandpagebreakclasses - Optional: Gravity Perks Copy Cat, for the
copy-1-to-2class
Current version 1.1, updated 25 February 2026. View the changelog
Documentation and tutorials
All CSS Selector documentationStart using CSS Selector today
Click to add CSS Ready Classes, no class names to remember
Download for free