Articles

CSS Visual Guide

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.

CSS Visual Guide and Design Overview (Legacy)

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

Form Wrapper CSS Selectors (Legacy)

Overview and examples of the Legacy CSS selectors available for form wrappers.

Form Heading CSS Selectors (Legacy)

Overview and examples of the Legacy CSS selectors available for form headings.

Form Body CSS Selectors (Legacy)

Overview and examples of the Legacy CSS selectors available for the main form content, field list, list items, field input container, description container and required field indicator.

Form Footer CSS Selectors (Legacy)

Overview and examples of the Legacy CSS selectors available for form footers.

Form Confirmation CSS Selectors (Legacy)

Overview and examples of the Legacy CSS selectors available for form confirmations.

Validation Errors CSS Selectors (Legacy)

Overview and examples of the Legacy CSS selectors available for form validation errors.

Multi-Page Forms CSS Selectors (Legacy)

Overview and examples of the Legacy CSS selectors specific to multi-page forms.

Save and Continue Link CSS Selectors (Legacy)

The Save and Continue link allows a user to save their form data and resume entry at a later time.