Why Use Collapsible Web Sections
First off, if you’re not familiar with collapsible content sections and why they’re becoming such a popular web design trend, here’s the scoop. Accordion-style sections are great way to present large amounts of content in an efficient manner. By compressing long expanses of text into collapsible panels, users can access the information they need quickly and easily.
In my case, I needed a solution for a long intake form (18 different fields and questions). This poses the problem of space if you were to list all 18 questions in a single column. Even with two columns (never three due to the field labels I need) the form was still going to be quite lengthy.
A Gravity Form Tale...
You might ask, why on earth would you need 18 different questions on a single form? Well, my users had the option to purchase different tiers of a service but needed to provide additional information depending on their choices. Having it all set up in a collapsible format was the perfect solution for me – less scrolling and more focused input from my customers.
I’ve been a customer of Gravity Forms for over a decade, and over time I found myself needing to automate more and more tasks in my business. Enter conditional logic, Gravity Forms’ ability to show or hide fields based on user input. This helps me save time and money, because I don’t have to manually follow up with customers for additional information (more on conditional logic in another post). Then, when I read about the Jetsloth extension for Gravity Forms it was a no brainer during the Black Friday promotion.
Now back to the task at hand, I needed a way to organize my questions into a hierarchy that was easy for potential leads to ‘choose their own journey.’ With a piece of paper and pen, yes I’m old school, I listed the questions and categories in order. Everything fit into 4 different sections (see the screenshot below):
When to use a collapsible section on a website
Now you might be wondering, besides a lengthy intake form, when are other uses for collapsible sections. A popular example beyond custom forms are FAQ sections. By having each question in its own panel, users can quickly access the information they need without having to scroll past irrelevant questions. This also helps save space if a specific FAQ requires a lengthy (technical) explanation.
In addition to FAQs, you can use collapsible sections for:
- Product or service feature lists
- Instruction manuals
- Terms & conditions
- Any other long form of content that needs to be organized into categories
How To Get Started With Gravity Forms Collapsible Sections
In order for the collapsible sections plugin to work for Gravity for you first need, gravity forms! The base plugin needs to be installed (and should be up to the most recent version) on your site. This site was built entirely using WordPress with gravity forms implemented via shortcode.
Step 1. Purchase From Jetsloth
Purchase Gravity Forms Collapsible Sections from the JetSloth team. Remember, you can’t use what you don’thave.
Step 2. Download Plugin
Upon purchasing the Jetsloth collapsing fields plugin, you will receive an automated email filled with goodies (mainly license keys and download links). I recommend saving this email for future use as the account area of Jetsloth doesn’t have the downloads available (as far as I can tell). It would also not be located in your Gravity Forms account (two separate logins) as Jetsloth is technically a different group than the main Gravity Forms team.
Step 3. Install Plugin To WordPress
Installing the Jetsloth plugin to WordPress is fairly easy if you are familiar with plugins and already have the base Gravity Forms installed. Upload your ‘new plugin’ to the WordPress section (or via FTP if you are going that route).
Step 4: Add Collapsible Section To Your Form
Now, navigate to the form that you’d like to edit or create a new one. Add a regular section to your form and choose ‘start collapsible section’ in the new option (found on the right hand side with the gravity forms settings, screenshot below).
Important Note:
It’s important to mention that anything underneath the newly created collapsible section will automatically be included in the collapsible section. This means that if you want to create separate sections (like my example above), you will need to add a new section into the list of fields where you want another break. Then, repeat step #4 above and choose ‘start collapsible section’ from the settings on the right.
how to hide sections in gravity forms
There are a few ways to hide full content sections within Gravity forms and you don’t necessarily need the collapsible section extension to do so (however it make it all the much better). By using conditional logic inside Gravity Forms (I’m assuming that since you’re reading this article you already have base knowledge on Gravity Forms) you can hide sections based on a previous or future answer your user might select.
Advanced Collapsible Field Settings
The collapsible sections extension also has nifty new settings that can enhance your form. Some of the ones I find most useful are explained below. In order to get to these settings on each for, first navigate to the collapsible fields settings. You will find these in the settings dropdown at the top of the page, settings –> collapsible sections
description placement
If your section has a description you can force the placement either inside or underneath the collapsible section heading.
open by default
The open by default and behaviour (they are an Australian dev team so I will honor their spelling) setting allow you to set how the collapsible sections open, meaning can they be opened or closed by default and when (default is on page load). Personally, I recommend checking the setting “force only one collapsible section to be open at a time.” This will help save space on your webpage and allow the user to choose which section of the form they are working on.
scrolling to section
I’m a big fan of this one but note that if you use the automatic scrolling feature you will likely have to manually configure the ‘scroll top offset’ setting (explained next). This makes the user’s screen scroll to the collapsible section when it is clicked, allowing them to see what they need to complete a specific section.
Scroll Top Offset
The scroll top offset setting is in pixels (px). If you’re not familiar with pixels, think of them as the units of measurement for a screen, similar to how inches is used for a ruler. The scroll top offset allows you to adjust how far from the collapsible section the users screen will ‘scroll’. In the screenshot above I’ve set the scroll top offset to 150 pixels (that’s probably more than you need but I have a specific menu header that covers a bit more vertical space than most and I didn’t want the top navigation menu to cover the section).
If you are using a non-sticky header menu this will likely not be an issue for you.
scroll speed
Scroll speed is fairly straight forward. It allows you to set the speed at which the browser will scroll when a user clicks on a collapsible section. I’ve set mine to a bit over the default, at 700 milliseconds, to get a bit of a smoother experience.
Troubleshooting Gravity Forms Collapsible Fields
I’ll note here that I’m by no means affiliated with Gravity Forms or their extensions (aside from being a longtime customer) so I won’t be able to answer all questions you might encounter. That being said, here’s a semi-common issue if you are using Siteground and gravity forms.
The issue that I found after publishing my collapsible fields was a glitch in the sections staying open. The issue can be seen in the 10 second video clip below:
As you can see, each time the section was clicked the location skipped a bit and the section automatically closed (that is not me repeatedly clicking to open and close the section). In this scenario I panicked and instantly messaged the Jetsloth team (5 minutes later I realized what the problem was and messaged them back). Their team is great, friendly and fully supportive.
If you just want to know what the solution was in this scenario, it was to uncombine the javascript files and purge the site’s cache. Below is how I did that for siteground and WordPress and a few other options for those that might be having similar problems but maybe you aren’t using Siteground.
the cause
The error was stemming from a javascript issue. If you’re not familiar with Javascript just know that it is a programming language used to create interactivity on webpages. By default, Siteground (the hosting I use) combined all my Javascript files and then I had selected to ‘minify’ them. This means I am combining all the javascript files and forcing the reduction in their file size. Correction, I can’t honestly remember if this was the default for Siteground or not but either way it’s an easy fix.
The reason that javascript, or quite often CSS files, are combined together is to ensure they load as quickly as possible. By combining them the browser only needs to download one file and not 3 or 4 separate ones.
the solution
In order for our gravity form collapsible fields extension to work correctly, we needed to disable this particular setting within the hosting and wordpress environment. If you’re using siteground all these settings are found within the ‘SG Optimizer’ plugin for WordPress. It comes standard with any WordPress installation on Siteground so mine was already in there.
In order to get to this group of settings (in the screenshot below), first from within your WordPress dashboard to the SG Optimizer plugin –> Frontend –> Then click on the javascript tab and you will see the screen below.
If you have ‘combine javascript files’ turned on, simply toggle the option off from the column on the right.
Gravity Forms Collapsible Fields Review
Overall, I highly recommend anything from the Jetsloth team. I’m actually using their entire extension bundle and it’s a great value for the money. The Gravity Forms Collapsible Fields extension is the add-on that I use the most in my web design so I can certainly speak the most to this one for the time being.
If you need to add accordion style-sections to your site, this is a great tool and the customer service from Jetsloth is amazing. I give Gravity Forms Collapsible Fields by JetSloth 5/5 stars for value overall value and extra points for being sloths.
