Add-on: CSS Selector

CSS Selector is a free Gravity Forms add-on that adds a small class picker to the field settings. Quickly select custom and add-on CSS classes without remembering their names.

What you can do with CSS Selector

• Open the pop-up from the button under the Custom CSS Class setting.
• Click a class to add it, or double-click to add it and close the pop-up. Add several classes to one field.
• Add the Gravity PDF classes exclude and pagebreak.
• Add the Gravity Wiz Copy Cat shortcut copy-1-to-2, then adjust the field IDs for your form.
• Manage reusable class names, labels, descriptions and groups under Forms → Settings → CSS Selector without PHP.
• Reuse class names from Used on other fields in the same form. Saved Ready Classes carry a Legacy label.
• Add developer-defined buttons with the gwp_css_selector_add_custom_css filter. Your stylesheet supplies the styles.

Legacy Ready Classes and native layouts

Built-in CSS Ready Classes are legacy functionality. On Gravity Forms versions earlier than 3.0, the picker retains the applicable choice layout, alert and field shortcuts. On Gravity Forms 3.0 and later, these built-in Ready Classes are hidden.

Use native Choice Layout settings for radio button and checkbox layouts instead of the old choice layout shortcuts. Use the native form editor for field columns.

Existing saved classes are preserved. CSS Selector does not automatically remove or rewrite classes on your fields. Hiding a shortcut does not change the styling support provided by Gravity Forms or your stylesheet.

Where to start

Open CSS modal shows where the button is. Selecting CSS explains how to pick and combine classes. Add custom CSS buttons shows how to add your own shortcuts.

Requirements

• Gravity Forms 1.5 or later
• Optional: Gravity PDF, for the exclude and pagebreak classes
• Optional: Gravity Wiz Copy Cat, for the copy-1-to-2 class

CSS Selector remains free and available. Development focuses on compatibility and maintenance, not expanding the legacy class catalogue. Download it from the CSS Selector product page.