Tutorials » JetSloth » Accordion Sections Gravity Forms

Do you want to use accordions inside your Gravity Form to make it more compact and easier for you form visitors to get an overview of the form content or the ability to reveal or collapse parts of the form? With the Gravity Forms Collapsible Sections Add-on from JetSloth you can turn Sections in your form into accordions.

Turn a Gravity Forms Section into an accordion

When the Gravity Forms Collapsible Sections Add-on from JetSloth is activated, you get an extra option tab in the Section Field settings: Collapsible Sections. You can choose there:

• None (normal selection): This will keep the section the way you’re used to.
• Start collaspible section: This will mark the top of the accordion, the accordion starts here.
• End collapsible section: This will mark the end of the accordion.

End of accordion

You can add sections inside the accordion. When you start a new collapsible section, the previous one will automatically end. You can also add a section purely to end the current accordion, but choosing for End collapsible section and choose for Hide (only used to end previous collapsible section).

Available Settings for the accordions

In your Gravity Form Settings, you have extra options available:

• Behaviour: you can force to only have one collapsible section open at the same time. The accordion will then always have only one section opened.
• Open by default: You can select one or more of the collapsible sections (accordions) that should be opened when you load the form.
• Scrolling: enable automatically scrolling to the top of the opened sections.
• Form footer placement: by default the Gravity Form Footer (with the next / previous / submit buttons) will be shown at the bottom of the form. With this setting you can place the footer inside the last section (it will only be visible when the last accordion is opened).

Styling Gravity Forms accordion sections

JetSloth produced some wonderful tutorials about styling the accordion sections. You can easily add custom CSS to your collapsible sections in the Gravity Form Settings:

Examples custom styling

Tutorial custom style 1

Tutorial custom style 2

Our Premium Add-ons for Gravity Forms

List Datepicker
Add a Datepicker with calendar select to a column or multiple columns in a Gravity Forms List Field.

Update Multiple Entries
Trigger the update of multiple entries in a target form by submitting an entry in a trigger form.

List Dropdown
Add a Dropdown Select with choices to a column or multiple columns in a Gravity Forms List Field.

Field to Entries
Create entries based on Checkboxes & Multi Select choices & List Field rows.

Advanced Number Field
Functionality for Number Fields, like rounding or only absolute numbers, fixed point notation, range calculation, custom units like % or m2 & show as slider.

JWT Prefill
Create JSON Webtokens to populate fields in your Gravity Form. With a secure key you can validate the data you don’t want to be tampered with.

List Number Format
With this Gravity Forms Add-on you can change List Field columns into a number field, do calculations within a row or column. Extra merge tags are available with total counts of columns.

Advanced Merge Tags
This Gravity Forms Add-On adds extra Merge Tag modifiers (and a lot of power). From the most common used functions like capitalize and length to changing date formats.

Read more tutorials about JetSloth

Colorpicker Gravity Forms

Gravity Forms doesn’t offer a colorpicker as one of their standard fields. JetSloth released a Gravity Forms Add-On to include a color-picker in your form. It hooks into several Standard Fields like ‘Single Line Text’, ‘Radio Buttons’ and ‘Checkboxes’.

Duplicate Section and Fields Gravity Forms

Do you want to duplicate sections and multiple fields in your Gravity Forms? It will take a lot of time when you do it in the standard form builder. Bulk Actions gives you a tool to easily duplicate or clone multiple fields and whole sections.

Gravity Forms Image Choices

Do you want to add images as choices for Radio Buttons or Checkboxes fields within Gravity Forms (or Survey, Quiz, Product and Options)? With this plugin you can add images without having to paste HTML code inside your Form Fields. And it produces beautifully styled and easily adaptable css styling.

Tooltips for Gravity Forms

Do you want to show tooltips in your Gravity Forms (with extra information about a certain field)? With Gravity Forms Tooltips you can add HTML and shortcode inside your Tooltips. Even for every radio button and checkbox item.