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
Our Premium add-ons for Gravity Forms
List Dropdown
Add a Dropdown Select with choices to a column or multiple columns in a Gravity Forms List Field.
List Datepicker
Add a Datepicker with calendar select to a column or multiple columns in a Gravity Forms List Field.
Text Field Variables
This Gravity Forms add-on allows the use of custom variables in Single Line Text and Paragraph Text fields. You decide yourself at which moment the custom variables are turned into values.
Dynamic Labels
One form, different questions: field labels and texts come from another form's entry, such as a grant, vacancy or course.
Read tutorials about
How to Create an Event Registration Form for Workshops
Create an event registration form for workshops in WordPress. Learn which attendee details to collect, how to configure confirmation emails and how to update workshop dates for confirmed registrations using GravityWP Update Multiple Entries.
How to Create Gravity Forms Entries from Comma-Separated Text
Turn a comma-separated task list into separate Gravity Forms entries. Follow our tested Field to Entries setup, mapping, and custom separator example.
How to Validate Repeatable Contact Rows in Gravity Forms
Learn how to validate repeatable Gravity Forms List field rows with GravityWP List Text. This tutorial shows how to add email and regex validation, test invalid values, and confirm that valid team roster data is stored correctly.
Gravity Forms Airtable Integration: Create Records From Form Submissions
Learn how to build a Gravity Forms Airtable integration with GravityWP API Connector. Send form submissions to Airtable, create new records automatically, and save the returned Airtable Record ID and response back to Gravity Forms.
