Display your form with tabs using Collapsible Sections

April 24, 2020 by JetSloth

So we had a customer write to us this week asking for us to help them tweak the work they have already done to make their Collapsible Sections into Tab sections. Learn how to display your form with tabs using Collapsible Sections

We thought this was a super cool idea, so after helping them with some CSS tweaks, we’re turned this into somewhat of a tutorial. Just a note tho you’ll have to customise this starter CSS to your needs, as it is very specific to the number of tabs/sections you want and how you want it to look. So please please please take this CSS with a grain of salt!

Demo code & examples

We’ll use standard Gravity Forms fields, along with our Gravity Forms Collapsible Sections addon, and pair it with some custom CSS  to get your Collapsible Sections displayed in tab formats.

What you’ll be creating

Add the CSS

Copy the below CSS, and paste it into your Gravity Forms Collapsible Sections form settings > custom CSS screen.

Just a heads up. The below guides and examples are intended for users with a little bit of CSS knowledge. You don’t have to be an expert, but the more confident you are with these, the better results you’ll get.

Notes & things to consider

Now whilst this example might get you 70% of what you’re after, you’ll probably need to further customise the CSS to get it looking how you want it. WordPress themes differ dramatically, so more often than not, you’ll need to tweak the example custom CSS provided further.

These examples are currently not mobile-friendly. Yeh we know we know, we’ll get to it as soon as possible and update the CSS example code above when we do.

Due to the somewhat custom nature of this tutorial, we’re only able to offer very basic support to help you get these examples working. Evey WordPress install is unique for your needs and thus near impossible for us to help implement these examples into everyone’s site. Take these examples as inspiration to try it yourself and see if you learn anything along the way. We’ll help where we can but can’t promise the world. Thanks for understanding.