Gravity Forms are structured so that every element can be targeted and manipulated via CSS. Most elements share reusable class names to affect styling, and many elements have unique ID’s that you can use to target specific elements within the form. By using CSS inheritance, you can effectively style every element in your form.
Element IDs
Element ID’s utilize the unique ID of the form or field.
For example:
- #gform_wrapper_xx where “xx” is the form ID, or
- #field_xx_yyy where “xx” is the form ID and “yyy” is the field ID.
Configurable Classes
Form Wrapper Classes
Theme & Markup Classes
There are 2 classes applied to the form wrapper based on whether or not legacy mode is enabled for a form. The class .gravity-theme is applied to all forms that do no have legacy mode enabled. The class .gform_legacy_markup_wrapper is applied to all forms that have legacy mode enabled.
Label Position Classes
There are 3 label classes that are applied to the form wrapper based on the individual form settings, .top_label, .left_label and .right_label.
Other elements change positions, widths, etc. based on inheritance from these label classes.
Field Size Classes
For many of the individual fields, there are classes of .small, .medium and .large which are defined in the form admin by changing the field size setting.
Custom Classes
Finally, for most of the fields, the user can define additional class names with the Custom CSS Class setting in order to apply additional custom styles or to target elements for other types of manipulation.
More Information
We’ve put together a help guide and a visual CSS diagram to illustrate the structure of a form and the CSS class relationships in an article here.
Additionally, review our article of CSS targeting examples for an expanded list of elements.