CSS Visual Guide and Design Overview

Element Relationships (HTML and PNG)

We’ve put together a visual guide to the Gravity Forms CSS hierarchy to illustrate the structure of a form and the CSS class relationship.

You can access it on a few formats here:

View Visual CSS Guide (HTML Version) | Download Guide (png)

Element Naming

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.

All element ID’s are based on the unique form ID and then a field ID.
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.

CSS Ready Classes

Using Ready Classes, you can easily create more advanced alternative layouts for the fields in your forms. Essentially, Ready Classes are class names that you can add to the parent element surrounding each field to take advantage of pre-defined styles included in the default form stylesheet.

Note that the column and inline ready classes were deprecated with the improvements made to the form editor in Gravity Forms 2.5.

CSS Targeting Examples

This article contains a few basic usage examples for targeting each element, one that would be generic for all forms and then one (or two) that would be specific to a unique form ID. If you’re styling a specific form, you would simply view your source, find the form ID and replace the ID in these examples with your own.