Add completion tracking to Tabs for Gravity Forms

When it comes to long or complex forms, breaking things up into sections can dramatically improve the user experience. That’s exactly why our Tabs for Gravity Forms add-on is so popular—it allows you to organize your form into clean, clickable tabbed sections.

But what if you could go a step further and track tab completion? With completion tracking enabled, your form can guide users more effectively, ensuring they complete each section before moving on. In this article, we’ll show you how to add this feature to your forms with a few snippets of JavaScript, HTML, and CSS.

What you’ll need to follow along

A copy of Tabs for Gravity Forms

Grab a copy of Tabs for Gravity Forms to follow along with this tutorial.

Gravity Wiz Code Chest

Gravity Wiz Code Chest is a free Gravity Forms add-on that lets you inject custom CSS and Javascript to individual forms.

1. Enable completion tracking via JavaScript filters

The first step is to turn on the built-in completion tracking filters. By default, these settings are turned off, but with a free plugin like Gravity Wiz Code Chest, you can easily inject the following code into your form to enable the features.

These filters allow you to:

Enable completion tracking across all tabs.
Decide whether only the required fields need to be completed.
Prevent users from skipping ahead until a tab is finished.

gform.addFilter('gf_tabs_completion_tracking', () => true);// default is false
gform.addFilter('gf_tabs_completion_tracking_only_required', () => true);// default is false
gform.addFilter('gf_tabs_completion_tracking_disable_incomplete', () => true);// default is true

From there, you’ll also want to enable custom navigation with your Next and Previous buttons. Add this extended script to tie the buttons into the tab system:

// Enable Button Clicks
gform.addAction('gf_tabs_setup', function( formId, currentPage, formDomId ){
 GFTabs.getFormById(formId).querySelectorAll('.gft-next-button').forEach(btn => {
  btn.disabled = true;
  btn.addEventListener('click', (e) => {
   const tabId = e.currentTarget.closest('.gft-tab-pane').id;
   const tab = document.querySelector(`.gft-tab-button[aria-controls="${tabId}"]`);
   const nextTab = tab ? tab.nextElementSibling : null;
   if ( nextTab && !e.currentTarget.disabled ) {
    nextTab.click();
   }
  });
 });
 GFTabs.getFormById(formId).querySelectorAll('.gft-prev-button').forEach(btn => {
  btn.addEventListener('click', (e) => {
   const tabId = e.currentTarget.closest('.gft-tab-pane').id;
   const tab = document.querySelector(`.gft-tab-button[aria-controls="${tabId}"]`);
   const prevTab = tab ? tab.previousElementSibling : null;
   if ( prevTab && !e.currentTarget.disabled ) {
    prevTab.click();
   }
  });
 });
});

gform.addAction('gf_tabs_toggle_tab_completed', function( tabComplete, tabPane, tab, nextTab ){
 const nextBtn = tabPane ? tabPane.querySelector('.gft-next-button') : null;
 if ( nextBtn ) {
  nextBtn.disabled = !tabComplete;
 }
});

add-custom-js-to-gravity-forms — Adding custom CSS and Javascript to your form using Code Chest

2. Add your navigation buttons

Inside each tab section, create a simple navigation block using a Gravity Forms HTML field. Paste this markup into the field:

<!-- First Tab - no previous -->
<div class="gft-nav">
    <button type="button" class="gft-next-button">Next</button>
</div>


<!-- Any other Tab -->
<div class="gft-nav">
    <button type="button" class="gft-prev-button">Previous</button>
    <button type="button" class="gft-next-button">Next</button>
</div>


<!-- Last Tab - no next -->
<div class="gft-nav">
    <button type="button" class="gft-prev-button">Previous</button>
</div>

Finally, make sure your Submit button is placed inside the last tab.

Add completion tracking to Tabs for Gravity Forms — Add HTML fields to hold your next/back buttons

3. Style your buttons with CSS

To polish the layout and give the buttons a clean, modern look, add this CSS to your theme or form stylesheet:

/* Layout Styles */
.gfield--type-submit,
.gft-nav {
     display: flex;
     gap: 20px;
}
.gft-prev-button {
     margin-right: auto;
     margin-left: 0;
}
.gfield--type-submit .gform-button,
.gft-next-button {
     margin-right: 0;
     margin-left: auto;
}
.gft-prev-button[disabled], 
.gft-next-button[disabled] {
   opacity: 0.5;
}


/* Black Buttons */
.gft-next-button, 
.gft-prev-button {
    background: black;
    color: white;
    border-radius: 6px;
    outline: none;
    border: none;
    padding: 16px 30px;
    font-weight: 700;
}
.gfield--type-submit .gform-button,
.gft-next-button {
    background: black;
    color: white;
    border-radius: 6px;
    outline: none;
    border: none;
    padding: 16px 30px;
    font-weight: 700;
}

This ensures your navigation feels intuitive and consistent with Gravity Forms styling.

Wrapping Up

With just a few lines of JavaScript, HTML, and CSS, you can transform your Tabs for Gravity Forms into a guided, step-by-step experience. Completion tracking not only keeps users focused but also reduces incomplete submissions by making sure each section is filled out before moving forward.

Try this setup on your next multi-section form—you’ll notice smoother navigation, fewer errors, and a better overall form experience for your users.

2+ happy customers

Gravity Forms Tabs

Tabs is a sleek new no-code add-on for Gravity Forms that lets you create intuitive tabbed navigation to break up long forms. Includes layout options and themes.

Get Them All & Save!