bookmark_borderDesign and Layout

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

We’ve put together a simple visual guide to help illustrate the structure of a form and the CSS class relationship.

Basic Structure

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

There are 3 label classes that are applied 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. Additionally, for many of the individual fields, there are classes of .small, .medium and .large which are also defined in the form admin.

Finally, for most of the fields, the user can define additional class names in order to apply additional custom styles or to target elements for other types of manipulation.

CSS Ready Classes

In Gravity Forms 1.5 we added “Ready Classes”. Using these new 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.

CSS Targeting Examples

This section 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 my examples with your own.