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.
Disclaimer
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.
