CSS Element Naming Structure

Overview

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 IDs 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 IDs utilize the unique ID of the form or field. For example:

  • #gform_wrapper_xx where “xx” is the form ID (works across themes; on Orbital, scope to the theme framework with .gform-theme--framework#gform_wrapper_6 for a single form or use .gform-theme--framework alone for all Orbital forms using the theme framework)
  • #field_xx_yyy where “xx” is the form ID and “yyy” is the field ID

Configurable Classes

Form Wrapper Classes

Theme & Markup Classes

Gravity Forms applies wrapper classes based on the form’s markup mode and theme.

  • Legacy markup enabled: .gform_legacy_markup_wrapper is applied to the wrapper.
  • Modern markup + Gravity Forms 2.5 Theme: .gravity-theme is applied to the wrapper.
  • Modern markup + Orbital Theme: .gform-theme, .gform-theme--foundation, .gform-theme--framework, and .gform-theme--orbital are applied to the wrapper (custom CSS for Orbital is usually scoped with .gform-theme--framework or .gform-theme--framework#gform_wrapper_{xx}).

Because these classes are on the wrapper, you can scope CSS to a specific theme/markup mode to avoid unintended changes across other forms.

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

In most fields, the user can define additional class names using the Custom CSS Class setting to apply custom styles or 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.

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.