Design and Layout
Whether you're a beginner or an advanced user, Gravity Forms makes it easy to style your forms as you see fit.
There's a reason that designers love Gravity Forms - targeting specific elements, forms, fields, etc. is quick and easy with CSS selectors and ready classes for everything you could dream of.
When not employing a built-in form theme, Gravity Forms is un-opinionated and intentionally utilizes your theme's styles to make your forms blend seamlessly into your existing designs with minimal modifications.
All Categories
Basics
User Guides related to the basics of design and layout in Gravity Forms, such as CSS targeting.
CSS Selectors
Articles related to CSS Selectors that are available for use with Gravity Forms.
Articles
Form Themes and Style Settings
Gravity Forms themes provide a new, easy way to change the look and feel of your forms, with customization options available right inside the block editor.
Where to Put Your Custom CSS
WordPress includes a tool to enable you to tailor the presentation of your theme. Included in that, is a way to add custom CSS code.
Example: Changing Your Form’s Background Color
Easily change your form’s background color, with or without code.
Example: Changing Font Sizes
Gravity Forms utilizes your current theme’s stying, but in some cases, you may need to change your font size that your theme defines. Here’s how to do it.
List of CSS Ready Classes
This article contains a reference list of the available CSS ready classes in Gravity Forms core. Each of the classes here are expanded upon in our detailed CSS Ready Classes article.
Modifying Field Layout with 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.
CSS Element Naming 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.
CSS Visual Guide and Design Overview
We’ve put together a simple visual guide to help illustrate the structure of a form and the CSS class relationship.
Changes to markup in Gravity Forms 2.5
Gravity Forms 2.5 introduced significant updates to the markup used, and this article contains a list of the major changes that designers should consider.
About Legacy Markup
Legacy markup is a term we used in Gravity Forms to identify the markup code and practices that existed in prior to version 2.5 of our core product. This article explains more.