Create a Multi-step/Wizard Form Using HTML, CSS, jQuery & Bootstrap
When dealing with forms that contain a large amount of information, creating a multi-step form can prevent users from becoming overwhelmed.
In this article, I will provide a step-by-step process to create a multi-page form using modern web technologies. (HTML, CSS, JavaScript, jQuery, Bootstrap) There will be a next button on the initial page, back & submitbuttons on the last page, and previous and next buttons on the in-between pages. There will also be some form validation that will prevent required form fields from being skipped on each page.
Creating a multi-step form using modern technologies can be tricky but with proper planning and intention, this can be a very straightforward process.
Why am I Creating a Multi-Step Form?
I wanted to create a multi-step form for my aspiring freelancing website. You can view the website and submit a website inquiry here. The form would be a multi-page assessment that potential clients would be encouraged to complete. This assessment would allow me (and them) to fully comprehend what they desire to see on their website. This includes website features, look and feel, user experience, and other information pertaining to design and development.
Some perceived benefits of creating a multi-step form would be:
- Helps make the assessment less overwhelming for clients.
- Alleviates the pressure when viewing form submissions.
- Organizes groups of similar information.
Steps to Build a Multi-Page/ Wizard Form
- Create the structure & layout of the form using HTML5 and Bootstrap CSS classes.
- Make the form functional and validate user input using JavaScript & jQuery.
- Add additional styling with CSS3.
Dependencies Needed
We will be working with Bootstrap & jQuery, two external dependencies which will need to be added to our project. We will be getting both by using a CDN or content delivery network. We will add these dependencies to our HTML file.
Bootstrap is a CSS framework designed for responsive, mobile-first web design. Bootstrap contains template elements such as buttons, forms, typography, and other components that can help developers create a beautiful, responsive website quickly.
jQuery is a JavaScript library that makes DOM manipulation and traversal much simpler than native JavaScript. jQuery is also useful for event handling and CSS animations.
Creating the HTML layout
Making the Multi-step Form Functional
To make our assessment form functional, I created 4 functions.
validatePage — This function takes in the current page element as a parameter and validates all of the form fields on the page. The function traverses through the form fields on the page and checks if there is any text content in each. If there is an email field on the page, it will be checked against a regular expression or regex.
previousPage — This function navigates to the page before the current page element. We utilize the prev function from jQuery. The prevfunction returns the sibling element that comes before the element in question. We then remove our active class from our current element and add it to the previous element. The active CSS class is responsible for the conditional display of each page. Refer to the CSS file below.
nextPage — This function navigates to the page after the current page element. We utilize the next function from jQuery which returns the sibling element that comes after the element in question. We then remove our active class from our current element and add it to the next element.
submitForm — Lastly, this is our submit function which passes our form values to an external function that ultimately stores our data in a database. This function formats all values from the form into a JavaScript object that is easier for submission. It also displays a simple confirmation alert and resets the form after submission.
Styling the Form Elements
Something to note here is the use of .page:not(.active) CSS class on line 11 of the file above. The :not() CSS pseudo-class is used to select all elements that do not fulfill a certain condition. Essentially, we selected all child elements inside the element with the id assessment-formthat has the CSS class page and does not have the CSS class active . We then hide all of these elements and toggle each as needed.
Submitting the Form
This is out of the scope of this article, but it might help to see the function I wrote to submit the form. I used Firebase, a provider of cloud services for app development. I set up a Real-time database and registered my application with Firebase. This is where all form submissions will reside. If you would like to learn how to set up and initialize a Firebase database with your app, please review this article.
Conclusion
You can create a highly functional, multi-step form for any website using a few cutting-edge technologies. Multi-step forms help users digest all of the information on the form, allowing you to get the best conversion rates and the most accurate information. They also help to organize information for those reviewing form submissions. Ultimately, it is up to you to decide if a single-step or multi-step form is appropriate for the task at hand.
Thank you for reading my article!
You can refer to the full source code reference on my website here
