We built a tool that allows you to create Multistep forms in Webflow using the native Tab component.
Step 1
Add the Form component
The first component you need to add is a Form component. Then we should place the Tab component inside the Form component.
Now set a ID to the Form component. (IMPORTANT: Add the id to the Form element and not to the Form block component.)
Step 2
Add form inputs
Now you just need to add all the different inputs inside every Tab Pane.
Style them as you want.
Step 3
Set up Next, Back and Submit buttons
Next Button: In order to include "Next" button on the Tab Pane, Add a Button or Link block. Then, add a class to style and identify this button.
Back Button: In order to include "Back" button on the Tab Pane, Add a Button or Link block. Then, add a class to style and identify this button (This class must be different from the Next button one)
Submit Button: We should place the Submit button on the last Tab Pane. Once you placed the Submit button, add the ID "Submit".
IMPORTANT: You will need to set the same class across all the Next and Back buttons.
Step 4
Copy the script
Now we need to add some JS to turn this form in a multistep form.
Go to "Multistep Form" Page settings and copy the script placed in the Before </body> tag and paste on your project.
Step 5
Modify the script
Now we need to modify the classes and ID on the JS to match with the one we set in our project.
The variable we need to modify are:
const $forwardButton = $(".next-button"): We need to change the class ".next-button" to the class we set for the Next Button.
const $backButton = $(".link-back"): We need to change the class ".link-back" to the class we set for the Back Button.
const $submitButton = $("#Submit"): We need add the ID Submit to the submit button if you didn't do already.
const $form = $("#Multi-Step-Form"): Modify "#Multi-Step-Form" for the ID you set to the Form element in the Step 1.
const tabsClass = "multistep-tabs": Modify "multistep-tabs" for the Class you set to the Tabs component
const paneClass = "multistep-tab-pane": Modify "multistep-tab-pane" for the Class you set to the Tab Pane's.
const linkClass = "multistep-tab-link": Modify "multistep-tab-link" for the Class you set to the Tab Links.
