Adding Custom CSS

It’s easy to add custom CSS for styling the collapsible sections in your forms. Of course if you’re a theme developer or have the ability to edit your theme’s CSS file you can add your styles there. As an alternative we’ve provided an area for global custom CSS on the plugin settings page, and and area for form specific custom CSS on the form settings page.

For the global custom CSS just visit the Gravity Forms Settings page and click on the Collapsible Sections tab – the same page where you enter your license key. The CSS you enter here will be loaded for all forms by default.

For custom CSS on specific forms visit the form settings page and click on theCollapsible Sections tab. The CSS you enter here will only be loaded for that form. You also have a setting option here to ignore the global custom CSS. If this option is enabled, then the global custom CSS won’t be loaded for this form. Else by default both the the global and form custom CSS will be loaded.

Collapsible Sections Markup

Below are examples of the markup for a collapsible section that might help you work out how you can apply custom styles. There’s two versions, depending on your settings for where the section description should be displayed – if you have one (you can just have the title only if you prefer).

The fields within a collapsible section are grouped within a new custom div element

Section description within title bar

Section description within collapsible body

Additional classes

The collapsible-sections-field element receives an additional class when its body is open. The additional class name is collapsible-sections-open . You can use this to style the open state of the section title bar (section field).

Example styles

See some of our other support articles for specific styling examples you can use: