1. Web Design
  2. JavaScript

How to Build a Multi Step Form Wizard with JavaScript

Scroll to top
Read Time: 7 min

In this tutorial, we will build a multi step form using JavaScript, HTML, and CSS (perfect for questionnaires and quizzes).

Filling out long forms can be tedious! As designers we can enhance the experience by focusing on individual components within a multi step form. This design pattern promotes a more user-friendly way to capture user data while sometimes asking for much of it.

The goal with our multi step form will be to reduce the burden of having a more extended form to capture user data, all while ensuring the appropriate data gets submitted.

Our Multi Step Form Demo

Answer the quiz questions and see how our form makes the whole process much more pleasant! Bear in mind that when the form is submitted, nothing currently happens with the data.

1. Start With the HTML

Our HTML markup will effectively give us a tab-based layout. We’ll have three buttons, a form, and some status indicators so a user will be sure what step they are currently on.

I’ll start with three questions, but you can extend this to include however many you prefer. The JavaScript code, in the end, is dynamic, which means you can easily add and remove additional questions.

2. Styling the Form With CSS

Without CSS, the multi-step approach doesn’t convey as we’d hope. Here’s the CSS I used to style the HTML.

3. Onto the JavaScript

Let’s start by declaring some variables. The first three will target the buttons I mentioned previously. We’ll then target the tab panels and tabs as a collection of elements known as a NodeList in JavaScript. That’s a fancy way of calling it an Array.

I created an isEmpty function to help quickly determine if a string value of form input is empty or not.

Finally, there’s the currentStep variable which will change as the Next and Previous buttons are clicked.

Next and Previous Buttons

Our Next and Previous buttons will be how the user navigates the questionnaire. We’ll leverage the currentStep variable to render the appropriate step and active tab dynamically. Because it returns a number value, we can target the NodeList dynamically.

The Next button, once clicked, will signal the HTML/CSS to get busy, hiding the active tab and tab panel and showing the following question in the wizard.

We’ll extend this action to call some more functions. One function will be responsible for updating the status indicators, and the other will validate the user entered a response before they can continue.

Updating Status Dynamically

To update the status, we need to perform a conditional operation that checks the state of the currentStep variable.

Using the tabTargets variable, we can determine how many tabs there are with the .length() method. The length() method dynamically returns the number of tabs in the HTML.

Below, I added comments in the code to better denote what happens after each conditional statement.

We’ll dynamically show and hide controls relative to the form wizard’s beginning, middle, and end.

Validating User Input

For a multi-step questionnaire/quiz/form to work correctly, we want to ensure data gets adequately submitted.

This tutorial only scratches the surface of what you could validate on the front end, but for now, we are just checking that a value exists for each question.

To extend this functionality, you might check for additional criteria like a length of an answer, if any spam/code entries might otherwise harm the website and more. I’d also advise adding server-side validation so no harmful code enters any database.

I added two functions that work together to help validate that a value is present for each question.

We’ll first validate when the function is initially called and then add a couple of event listener functions to set button permissions dynamically as you interact with the form.

This will disable or enable the Next button and Submit buttons relative to the currentStep variable value and see if there is text present inside each form field.

We add the two functions to the original nextButton function and call them after each click.

Our previous button resembles the following button logic with slightly different math.

We needn’t call the validateEntry() function on the previous button click as it’s assumed there would already be a value in the form field.

Putting it All Together

Below is the final result (check out the JS tab to see all the code together). The JavaScript code could be more optimized for reusability. Still, it is enough context to help you learn how to build a simple form to navigate, and it makes a user's life easier when it comes to focusing on a specific question and answering it simply.

Advertisement
Did you find this post useful?
Want a weekly email summary?
Subscribe below and we’ll send you a weekly email summary of all new Web Design tutorials. Never miss out on learning about the next big thing.
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.