Create a Tabbed Form Using Gravity Forms

So, you’ve created a form using Gravity Forms. Your form has several sections and you want to display each section as a “tab.” Excellent. No problem. It’s actually a piece of cake.

Independent Tabs

For the first example, we’re going to set up a form where each tab is independent of the others and where a user would only submit one tab. For example, let’s say that you’re going to collect information from both men and women, and your tabs are labeled “Male” and “Female”. Generally speaking, a person will chose only one or the other and wouldn’t submit information for both.

In this example, you start out with something like this:

form1

And you’ll end up with something like this:

gravity-forms-tabs

See it in action.

Set Up the Form

Add a set of radio buttons to the top of your form. Each option will become a tab. Set the Field Label to “Tabs.” Make the field required.
tabs1

Add a custom CSS class to the set of radio buttons. Call the class “tabs” or whatever you like.
tabs0

Next, select the first field that will appear below your first tab. Click on the “Advanced” tab. Check the “Enable Conditional Logic” option. Choose “Show this field if All of the following match:” Select your “Tabs” field from the drop down and select the name of the first tab, i.e. whatever you named the first radio in your set of “tabs.”

condition1

 

Do the same for each field in your form.

condition2

 

Add the Form to a Page

Publishing your form on your site will help with styling.

Style the Form

The bare essentials for getting your radio buttons to look like tabs are:

  1. Float the list items that contain the radio buttons to display them horizontally.
  2. Hide the radio buttons.
  3. Style the labels of the radio buttons to give them the appearance of “tabs.”
.tabs > .gfield_label {
    display: none;
}

.tabs li {
    float: left;
    margin-bottom:0;
}

.tabs [type=radio] {
    display: none;
}

.tabs li label {
    margin: 0 2px 0 0;
    padding: 10px;
    border: 1px solid #CCC;
    border-bottom: 0;
    background: #CCC;
    color: white;
}

.gsection_title {
    border-top: 1px solid #CCC;
}

.tabs [type=radio]:checked ~ label {
    background: white;
    color: black;
}

Update 07/07/2015:

Shortly after publishing this post, I discovered this plugin which makes it incredibly easy to create tabs in your Gravity Forms.

To use the plugin:

  1. Install it.
  2. Create your form
  3. Add a “Section Break” above each set of fields that will fall under the same tab
  4. Go to Form Settings > Section Tabs
  5. Check the checkbox to “enable section tabs”

Each section break will automatically become a new tab header. And the fields below the section break will be the content of the tab.

All Tabs Required

For this one, I need to thank Steve Auchettl for pointing out that the tab solution above doesn’t work if you want the user to fill out information under all of the tabs.

In order to have the user complete fields under all of the tabs, we’ll use Gravity Forms’ Page Break feature.

The first step is to add the “Page” field to your form.

Gravity Forms Page

You should then see something like this:

Gravity Forms Pagebreak

Hover over the “start paging” area. You should see the little downward-pointing “edit” arrow. Click the arrow to edit the pagination settings.

gf-pagination-type

Select the type of progress indicator. You’ll want to select “Steps”. Then, name each page. The page names will serve as the labels of your tabs.

gf-progress-indicator

Next, add whatever fields you want to each “page” of your form.

Gravity Forms Fields

If you want to add more pages to your form, click the “duplicate” link on the “page break”.

gf-duplicate

Once you’ve got all your pages and fields, save the form.

The last thing to do is to style the pages

.gf_step_number {
    display: none;
}

.gf_step_label {
    border: 1px solid lightgray;
    border-bottom: none;
    background-color: lightgray;
    color: black;
    padding: 1em 1em 0.6em 1em;
}

And you’re done. See it in action.

9 Responses
  1. Hi there.

    Thanks for a great tutorial 🙂 I like your method better then the alternative plugin you suggested, however I’m wondering if you figured out a way when showing or dising the different ‘tabs’ to not loose the data when you view it again?

    I’ve tried recreating this using your tutorial but any text field data disappears when I move to another tab and then try and go back to it?

    Any thoughts?

    Thanks

    Steve

  2. Dave Meindl

    Hey, Steve. Well, what do you know… You’re absolutely right. The text does disappear. That’s rather odd behavior. I’ll look into it and let you know what I come up with. Thanks for catching that.

  3. Dave Meindl

    Steve, I’ve updated the post with one possible solution to the challenge of submitting information across all tabs. See the end of the post for the new info.

  4. Hi Dave,

    I just wanted to let you know I searched high and low and came across your solution because I was in dire need of tabs for a form…my dilemma was, the nifty tab plugin you found after writing this post won’t work for my form because I’m using it in WooCommerce’s Gravity Forms Add-on module and it doesn’t implement that tab plugin’s code. So I was back to needing a use for the idea you came up with using conditional logic. I too ran into the same issue Steve mentioned and after beating my head on a wall for a couple hours [my head hurts after that] I found the solution! After searching and digging some more, there’s a fix for conditional logic resetting data from section to section. Gravity Forms came up with a filter! Grab it here, https://www.gravityhelp.com/documentation/article/gform_reset_pre_conditional_logic_field_action/

    Just thought it’d help anyone else needing a solution for this if they can’t use the plugin tab filter.

  5. THIS IS A LIFESAVER! The plugin wasn’t working for me, and your way works a lot better. Thanks again for posting such a a concise and simple tutorial!

  6. I use Gravity Forms in tabs, but am experiencing two issues with my forms page here: https://designbuddy.com/hire-me.

    Problem #1: When someone submits a form yet forgets to enter in a required field, the page automatically refreshed to the main tab instead of the tab the form they were filling out. The problem with this is the user is unable to see the following Gravity Theme warning: “There was a problem with your submission. Errors have been highlighted below.”, unless of course they decide to go back to the tab they were working in; but I see no reason why they would. Instead they’ll probably just assume the form had been completed and then wonder why there was no confirmation message. This is obviously not ideal. I need to know how to allow the page to refresh on the same tab so users can see the warnings. When a user submits the form correctly, it’s fine because they are taken to a separate page confirming the form has been submitted. It’s only when the user forgets to complete a field where the issue arrises.

    Problem #2: By default, tabs are auto expanded. This is fine, but on mobile viewing people are only going to see my first tab and won’t realize there are more tabs below the expanded content of the first tab (unless they decide to scroll all the way down, which they probably won’t). I can change the tab settings in WP Bakery’s Tab settings so that they remain un-collapsed, yet this causes the same issue as mentioned in question 1, where after submitting a form, any error messages will not show because the tabs auto collapse after a page refresh.

    Does anyone know a solution that will fix both of my issues? In summary: I need a solution that allows me to use Gravity Forms in tabbed form, and refresh on the same tab after a form is submitted. I’d prefer to keep it how it is currently set where when someone views the main page containing all of my forms on a larger screen, the first form shows automatically expanded…. yet on mobile viewing I need to have the tabs un-expanded so that the user can actually see all of the tabs. And then I need to find a way so page refreshes actually refresh to the same tab. If anyone can assist with this, I can pay you for your time and expertise. My coding abilities are limited. I figure it couldn’t hurt to ask here since this page specifically mentions Gravity Forms and tabs. Thanks.

Leave a Reply