Skip to main content

How to Replace the Default Buttons in Multi-Page Wizards

Custom Navigation & Submit Buttons in Team Forms Wizards

Updated this week

When building a form with multiple pages (a multi-page wizard), Team Forms automatically includes tab navigation at the top and “Next”/“Previous” buttons at the bottom of each page. These navigation options help users move through your form smoothly and consistently.

We recommend using the default navigation controls for simplicity, but in some cases, you may want more control. For example, you might want to add a custom button that jumps straight to a specific page in the form (e.g. “Jump to Section 4”). You can do this by following the steps below:

Step-by-Step Guide

  1. Create or convert your form to a multi-page form - Each page in your form will appear as a “panel.”

  2. (Optional) Hide the default navigation controls
    If you want to hide the default tab navigation or Next/Previous buttons:

    1. Open the Panel Settings for each page.

    2. Set Bread Crumb Type to Hidden to remove the top tabs.

    3. Adjust the Panel Navigation Buttons to hide the “Next” or “Previous” buttons as needed.

  3. Add a custom button

    1. Drag a Button component into your page.

    2. Set the Label to something meaningful, like “Jump to Section 4.”

    3. Set the button action to “Custom”

    4. Under the Action setting, select Custom.

  4. Add custom navigation logic - In the Button Custom Logic section, enter JavaScript to control navigation.

// Move to the next page
form.nextPage();

// Move to the previous page
form.prevPage()

// Or jump directly to a specific page index (zero-based)
form.setPage(3); // Navigates to the 4th page


Replace the default “Submit Form” button (Wizard)

If you want to change the label or styling of the wizard’s built‑in Submit Form button, hide it and add your own button.

  1. Hide the default submit button

    1. Open Custom CSS for your form.

    2. Paste the following CSS:

      .btn-wizard-nav-submit{
      display: none;
      }
  2. Add your custom Submit button by draging a Button component onto the page(s) where you want the Submit button to appear. Button components act as submit buttons by default.

Using custom navigation allows you to tailor the form flow to your specific use case while still leveraging the power of Team Forms’ multi-page structure.

Did this answer your question?