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: And you'll end up with something like this: 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. Add a custom CSS class to the set of radio buttons. Call the class "tabs" or whatever you like. 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."   Do the same for each field in your form.  

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. You should then see something like this: Hover over the "start paging" area. You should see the little downward-pointing "edit" arrow. Click the arrow to edit the pagination settings. 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. Next, add whatever fields you want to each "page" of your form. If you want to add more pages to your form, click the "duplicate" link on the "page break". 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.