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 an 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 the Collapsible 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 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
<li id="field_x" class="gfield gsection collapsible-sections-field collapsible-sections-description-title">
<h2 class="gsection_title">Section Title</h2>
<div class="gsection_description">Section Description</div>
</li>
<div class="collapsible-sections-collapsible-body" id="collapsible-section_x">
<li id="field_x" class="gfield">
<label class="gfield_label" for="input_x">Field Label</label>
<div class="ginput_container">
<input name="input_x" id="input_x" type="text" value="" class="medium">
</div>
</li>
<!-- remaining fields in section... -->
</div>Section description within the collapsible body
<div id="field_x" class="gfield gsection collapsible-sections-field collapsible-sections-description-inside">
<h2 class="gsection_title">Section Title</h2>
</li>
<div class="collapsible-sections-collapsible-body" id="collapsible-section_x">
<div class="gsection_description">Section Description</div>
<div id="field_x" class="gfield">
<label class="gfield_label" for="input_x">Field Label</label>
<div class="ginput_container">
<input name="input_x" id="input_x" type="text" value="" class="medium">
</div>
</div>
<!-- remaining fields in section... -->
</div>