Basics

The Design and Layout > Basics section covers background knowledge you may need to modify form presentation. There are simple changes you can make using external plug-ins and field tweaks, but the most powerful control options will require some knowledge of CSS.

Options For Making Style Changes

1. Field Appearance: You can make field level layout changes using the Appearance tab for a field within the form editor. It is the Custom CSS Class option that holds hidden power, especially when combined with our CSS Ready Classes.
2. Third Party Plug-Ins: There are a selection of third party plug-ins that give you fine-grained control over the appearance of your Gravity Forms, and can help alleviate any anxiety you may have about dealing with CSS. Search our community plugin repository for options.
3. Modifying CSS: The greatest amount of customization exists for those who are comfortable working with CSS. Refer to [this article] (https://docs.gravityforms.com/where-to-put-your-custom-css/) describing methods you can use to modify theme styles.

CSS Reference Materials

The following documents contain lots of information on Gravity Forms CSS.

• CSS visual guide and overview contains a visual indictaor of the classes and where they exist in the form hierarchy. An HTML and a downloadable PDF version are available.
• CSS element naming structure describes
• CSS targeting examples contains a large list of form element IDs, allowing you to target items such as validation messages and the submit button style.

CSS Examples

These articles contain a few simple examples of using CSS to modify form appearance, hopefully just enough to get you started:

• change font sizes
• change form background color.

Then extend your knowledge with our comprehensive list of CSS targeting examples.