Streamlined Sign-Up: A Step-by-Step Guide to Crafting a Multi-Step Registration Form with HTML, CSS, and JavaScript

Submitted by oretnom23 on Thursday, December 14, 2023 - 17:20.

In this tutorial, we will explore the creation of a straightforward Registration Form featuring a Multi-Step approach using HTML, CSS, and JavaScript. The tutorial aims to serve as a reference or guide for students and new programmers, helping them enhance their knowledge and skills in developing creative, effective, and efficient web applications. Here, I will provide step-by-step methods with snippets to achieve our goal in this tutorial.

What does Multi-Step Form mean?

A Multi-Step Form in a web application is a form divided into multiple sections or steps, where each step represents a subset of the overall information needed from the user. Instead of presenting the user with a long and overwhelming form all at once, a multi-step form breaks down the information into smaller, more manageable chunks. Common examples of multi-step forms include account registration forms, checkout processes in e-commerce websites, and complex survey forms. The implementation of multi-step forms can be achieved using various web development technologies, such as JavaScript for client-side interactions and server-side processing to handle the form submissions.

Requirements

For the creation of the web application in this tutorial using HTML, CSS, and JavaScript, no web servers need to be installed on your local machine. The only software required includes:

  • Code Editor such as (Sublime Text, VS Code, or Notepad++)
  • Web Browser such as (Chrome browser)

How to create Multi-Step Registration Form?

Below are step-by-step methods with snippets for creating a simple web application with a multi-step registration feature:

Step 1: Creating the Interface

First, let's create the page interface for the registration page. Create a new HTML file and open it with your preferred code editor. Structure the HTML elements according to the desired registration page, including the multi-step progress and form items. Refer to the following snippet and save the file as `index.php`:

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>Multi-step Signup Form</title>
  7.     <link rel="stylesheet" href="style.css">
  8. </head>
  9. <body>
  10.     <div id="main-wrapper">
  11.         <div id="form-wrapper">
  12.             <div class="form-title">Registration</div>
  13.             <div id="step-progress">
  14.                 <div class="step">
  15.                     <div class="step-icon">4</div>
  16.                     <div class="step-text">Review</div>
  17.                 </div>
  18.                 <div class="step">
  19.                     <div class="step-icon">3</div>
  20.                     <div class="step-text">Account Info</div>
  21.                 </div>
  22.                 <div class="step">
  23.                     <div class="step-icon">2</div>
  24.                     <div class="step-text">Contacts</div>
  25.                 </div>
  26.                 <div class="step active">
  27.                     <div class="step-icon">1</div>
  28.                     <div class="step-text">Personal Details</div>
  29.                 </div>
  30.             </div>
  31.  
  32.             <form id="signup-form" method="POST" action="">
  33.                 <div id="form-step-container">
  34.                     <!-- Form Step Item -->
  35.                     <div class="form-step-item active">
  36.                         <div class="form-step-group">
  37.                             <label for="firstname">Firstname</label>
  38.                             <input type="text" class="form-step-inp" id="firstname" name="firstname" autofocus required="required" tabindex="-1">
  39.                         </div>
  40.                         <div class="form-step-group">
  41.                             <label for="lastname">Lastname</label>
  42.                             <input type="text" class="form-step-inp" id="lastname" name="lastname" required="required" tabindex="-1">
  43.                         </div>
  44.                     </div>
  45.                     <!-- Form Step Item -->
  46.                     <div class="form-step-item">
  47.                         <div class="form-step-group">
  48.                             <label for="email">Email</label>
  49.                             <input type="email" class="form-step-inp" id="email" name="email" required="required" tabindex="-1">
  50.                         </div>
  51.                         <div class="form-step-group">
  52.                             <label for="contact">Contact #</label>
  53.                             <input type="text" class="form-step-inp" id="contact" name="contact" required="required" tabindex="-1">
  54.                         </div>
  55.                     </div>
  56.                     <!-- Form Step Item -->
  57.                     <div class="form-step-item">
  58.                         <div class="form-step-group">
  59.                             <label for="username">Username</label>
  60.                             <input type="text" class="form-step-inp" id="username" name="username" required="required" tabindex="-1">
  61.                         </div>
  62.                         <div class="form-step-group">
  63.                             <label for="password">Password</label>
  64.                             <input type="password" class="form-step-inp" id="password" name="password" required="required" tabindex="-1">
  65.                         </div>
  66.                     </div>
  67.                     <!-- Form Step Item -->
  68.                     <div class="form-step-item">
  69.                         <div id="review">
  70.                             <dl>
  71.                                 <dt>Fullname:</dt>
  72.                                 <dd id="review-name"></dd>
  73.                                 <dt>Email:</dt>
  74.                                 <dd id="review-email"></dd>
  75.                                 <dt>Contact #:</dt>
  76.                                 <dd id="review-contact"></dd>
  77.                                 <dt>Username:</dt>
  78.                                 <dd id="review-username"></dd>
  79.                             </dl>
  80.                         </div>
  81.                     </div>
  82.                 </div>
  83.             </form>
  84.  
  85.             <div id="form-action-btns">
  86.                 <button class="form-action" id="previous" type="button">Previous</button>
  87.                 <button class="form-action" id="next" type="button">Next</button>
  88.                 <button class="form-action" id="submit" form="signup-form" type="submit">Submit</button>
  89.             </div>
  90.  
  91.             <div id="data-submitted">
  92.                 Your account has been created successfully!
  93.             </div>
  94.         </div>
  95.     </div>
  96.     <script src="script.js"></script>
  97. </body>
  98. </html>

Step 2: Designing the Stylesheet

Now, it's time to craft the Cascading Stylesheet (CSS) for the visual presentation of your webpage. This file houses tailor-made style scripts that dictate how the elements appear on the front-end. Save this file as style.css and integrate it into your HTML document. Below is a CSS snippet representing the styles tailored to complement the structure outlined in the initial HTML step:

  1. @import url('https://fonts.googleapis.com/css2?family=Ubuntu:ital,wght@0,300;0,400;0,500;0,700;1,300;1,400;1,500;1,700&display=swap');
  2.  
  3. * {
  4.     font-family: 'Ubuntu', sans-serif;
  5. }
  6.  
  7. html, body{
  8.     width: 100%;
  9.     height: 100%;
  10.     max-width: 100%;
  11.     max-height: 100%;
  12.     overflow: auto;
  13.         padding: unset;
  14.         margin: unset;
  15.     }
  16.     body{
  17.         background-color: #74EBD5;
  18.         background-image: linear-gradient(127deg, #74EBD5 0%, #9FACE6 100%);
  19.     }
  20.     #main-wrapper{
  21.         width: 100%;
  22.         height: 100%;
  23.         display: flex;
  24.         flex-flow: column;
  25.         justify-content:center;
  26.         align-items:center;
  27.     }
  28.  
  29.     #form-wrapper{
  30.         width: 100%;
  31.         max-width: 400px;
  32.         background-color: #fff;
  33.         border: 1px solid #cacaca;
  34.         box-shadow: 3px 3px 7px #0000003a;
  35.         padding: 1.15em 1.75em;
  36.     }
  37.  
  38.     .form-title{
  39.         font-size: 1.3rem;
  40.         text-align: center;
  41.         font-weight: 400;
  42.         letter-spacing: .8px;
  43.         color:#464646;
  44.         margin-bottom: 5px;
  45.     }
  46.  
  47.     /*
  48.     Step Progress Designs
  49.     */
  50.     #step-progress{
  51.         position: relative;
  52.         width: 100%;
  53.         display: flex;
  54.         flex-flow: row wrap;
  55.         justify-content: space-between;
  56.         align-items: start;
  57.         direction: rtl;
  58.         margin-bottom: 10px;
  59.     }
  60.     #step-progress .step{
  61.         position: relative;
  62.         width: 25%;
  63.         display: flex;
  64.         flex-flow: column wrap;
  65.         justify-content: start;
  66.         align-items: center;
  67.     }
  68.     #step-progress .step > *{
  69.         width: 100%;
  70.         text-align: center;
  71.     }
  72.     #step-progress .step > .step-icon {
  73.         position: relative;
  74.         width: 30px;
  75.         height: 30px;
  76.         display: flex;
  77.         align-items: center;
  78.         justify-content: center;
  79.         border: 2px solid #d1d1d1;
  80.         border-radius: 50% 50%;
  81.         color: #d1d1d1;
  82.         margin-bottom: 5px;
  83.         z-index: 2;
  84.     }
  85.     #step-progress .step:not(:nth-child(1)):before {
  86.         content: "";
  87.         position: absolute;
  88.         top: 15px;
  89.         left: calc(50% + 15px);
  90.         width: calc(100% - 30px);
  91.         height: 2px;
  92.         background-color: #d1d1d1;
  93.     }
  94.     #step-progress .step > .step-text {
  95.         font-size: .8rem;
  96.         color: #858585;
  97.     }
  98.     #step-progress .step.active > .step-icon, 
  99.     #step-progress .step.active > .step-text{
  100.         border-color:#464646;
  101.         color: #464646;
  102.     }
  103.     #step-progress.step-progress-done .step>.step-icon,
  104.     #step-progress .step.active ~ .step>.step-icon{
  105.         border-color:#18da69;
  106.         background: #18da69;
  107.         color: #fff;
  108.     }
  109.     #step-progress.step-progress-done .step>.step-text,
  110.     #step-progress .step.active ~ .step>.step-text{
  111.         color: #18da69;
  112.     }
  113.     #step-progress .step.active ~ .step:before{
  114.         background: #18da69;
  115.  
  116.     }
  117.     #step-progress.step-progress-done .step-icon:before,
  118.     #step-progress .step.active ~ .step>.step-icon:before{
  119.         content: "\2713";
  120.         position: absolute;
  121.         display: flex;
  122.         justify-content: center;
  123.         align-items: center;
  124.         background-color: #18da69;
  125.         height: 100%;
  126.         width: 100%;
  127.         top: 0;
  128.         left: 0;
  129.         border-radius: 50% 50%;
  130.     }
  131.  
  132.     #signup-form{
  133.         overflow: hidden;
  134.     }
  135.     /*
  136.     Multi Step Form Styles
  137.     */
  138.     div#form-step-container {
  139.         width: 400%;
  140.         overflow: hidden;
  141.         position: relative;
  142.         display: flex;
  143.         align-items: center;
  144.         flex-flow: row nowrap;
  145.         transition: .5s ease-in-out;
  146.         left: 0;
  147.     }
  148.  
  149.     div#form-step-container>.form-step-item {
  150.         position: relative;
  151.         width: 100%;
  152.     }
  153.     div#form-step-container>.form-step-item>.form-step-group{
  154.         margin-bottom: .5em;
  155.     }
  156.     div#form-step-container>.form-step-item>.form-step-group > label {
  157.         display: block;
  158.         width: 100%;
  159.         color: #464646;
  160.         margin-bottom: 8px;
  161.         font-size: 1rem;
  162.     }
  163.     div#form-step-container>.form-step-item>.form-step-group > input {
  164.         width: calc(100% - 1.28em);
  165.         display: block;
  166.         padding: 0.5em 0.5em;
  167.         border: 1px solid #cfcfcf;
  168.         border-radius: 3px;
  169.         outline: none;
  170.         color: #464646;
  171.     }
  172.     div#form-step-container>.form-step-item>.form-step-group > input:focus,
  173.     div#form-step-container>.form-step-item>.form-step-group > input:active{
  174.         border-color: #037ca1b0;
  175.         box-shadow: 0px 4px 2px #8ccde100;
  176.     }
  177.  
  178.     #review dl>dt{
  179.         font-size: .85rem;
  180.         color: #464646;
  181.         letter-spacing: 1px;
  182.     }
  183.     #review dl>dd{
  184.         margin-bottom: 5px;
  185.         font-size: .9rem;
  186.         color: #464646;
  187.     }
  188.  
  189.     /*
  190.     Buttons Styles
  191.     */
  192.     #form-action-btns{
  193.         width: 100%;
  194.         display: flex;
  195.         align-items: center;
  196.         justify-content: space-evenly ;
  197.         column-gap:10px;
  198.     }
  199.  
  200.     #previous, #submit, #data-submitted{
  201.         display: none;
  202.     }
  203.  
  204.     button.form-action {
  205.         padding: 0.4em 2.5em;
  206.         background: #20bbff;
  207.         color: #fff;
  208.         font-weight: 700;
  209.         letter-spacing: 1.2px;
  210.         border: unset;
  211.         border-radius: 0.3em;
  212.         font-size: 1rem;
  213.         cursor: pointer;
  214.     }
  215.  
  216.     button.form-action:hover, button.form-action:active {
  217.         background: #1385b7;
  218.         box-shadow: 1px 2px 5px #0c213945;
  219.     }
  220.  
  221.     div#data-submitted {
  222.         padding: 1.75em 0.5em;
  223.         font-size: 1.3rem;
  224.         line-height: 1.4rem;
  225.         text-align: center;
  226.         letter-spacing: 1.5px;
  227.         color: #3b3b3b;
  228.     }

Step 3: Implementing Functionality

To complete the process, generate a fresh JavaScript file housing the necessary scripts to make your multi-step registration form fully functional. This script incorporates event listeners enabling users to seamlessly navigate between various form items or sections. Save this file as script.js and ensure it is integrated into your HTML document. Consult the following JS snippet for a clearer understanding of this crucial step:

  1. // Progress Step Elements
  2. const stepProgress = document.getElementById('step-progress')
  3. // Form Step Elements
  4. const formProgress = document.getElementById('form-step-container')
  5.  
  6. // Buttons
  7. const nextBtn = document.getElementById('next')
  8. const previousBtn = document.getElementById('previous')
  9. const submitBtn = document.getElementById('submit')
  10.  
  11. // Form Element
  12. const form = document.getElementById('signup-form')
  13.  
  14.  
  15. /** Next Button Event Listner */
  16. nextBtn.addEventListener('click', function(e){
  17.     e.preventDefault()
  18.     // Get the current step element
  19.     var currentStep = stepProgress.querySelector('.step.active')
  20.     // Get the next step element
  21.     var nextStep = currentStep.previousElementSibling
  22.  
  23.     // Get the curent form item element
  24.     var currentItem = formProgress.querySelector('.form-step-item.active')
  25.     // Get the curent next item element
  26.     var nextItem = currentItem.nextElementSibling
  27.     // Get the curent next item index
  28.     var nextIndex = Array.from(formProgress.querySelectorAll(".form-step-item")).indexOf(nextItem)
  29.  
  30.     // Check the validity of the input
  31.     var is_valid = true;
  32.     currentItem.querySelectorAll('input[required]').forEach(function(el){
  33.         if(!el.checkValidity()){
  34.                 form.reportValidity();
  35.                 is_valid = false;
  36.                 return false;
  37.         }
  38.     })
  39.     if(!is_valid)
  40.         return false;
  41.  
  42.     // disallow tabindexing on the current item inputs
  43.     currentItem.querySelectorAll('input').forEach(el=>{
  44.         el.setAttribute('tabindex', "-1");
  45.     })
  46.  
  47.     if(nextItem.querySelectorAll('input').length > 0){
  48.         setTimeout(function(){
  49.             // select/focus the next item first input
  50.             nextItem.querySelectorAll('input')[0].focus();
  51.             // allow tabindexing on the next item inputs
  52.             nextItem.querySelectorAll('input').forEach(el=>{
  53.                 el.removeAttribute('tabindex');
  54.             })
  55.         }, 500)
  56.     }else{
  57.         if(nextIndex >= 3){
  58.             // Preview entered data value
  59.             document.getElementById('review-name').innerText = `${document.getElementById('firstname').value} ${document.getElementById('lastname').value}`
  60.             document.getElementById('review-email').innerText = `${document.getElementById('email').value}`
  61.             document.getElementById('review-contact').innerText = `${document.getElementById('contact').value}`
  62.             document.getElementById('review-username').innerText = `${document.getElementById('username').value}`
  63.         }
  64.     }
  65.     var formLeftCSS = 0;
  66.     if(nextIndex > 0)
  67.         formLeftCSS = (nextIndex * 100)
  68.  
  69.     // Slide to next item
  70.     formProgress.style.setProperty('left', `-${formLeftCSS}%`)
  71.  
  72.     // Update active classes
  73.     currentStep.classList.remove('active')
  74.     nextStep.classList.add('active')
  75.  
  76.     currentItem.classList.remove('active')
  77.     nextItem.classList.add('active')
  78.  
  79.     // Update button display
  80.     if(nextIndex < 3)
  81.         previousBtn.style.setProperty('display', 'block');
  82.     else{
  83.         nextBtn.style.setProperty('display', 'none');
  84.         submitBtn.style.setProperty('display', 'block');
  85.     }
  86. })
  87.  
  88. /** previous Button Event Listner */
  89. previousBtn.addEventListener('click', function(e){
  90.     e.preventDefault()
  91.     // Get the current step element
  92.     var currentStep = stepProgress.querySelector('.step.active')
  93.     // Get the previous step element
  94.     var prevStep = currentStep.nextElementSibling
  95.  
  96.     // Get the current item element
  97.     var currentItem = formProgress.querySelector('.form-step-item.active')
  98.     // Get the previous item element
  99.     var prevItem = currentItem.previousElementSibling
  100.     // Get the previous item index
  101.     var prevIndex = Array.from(formProgress.querySelectorAll(".form-step-item")).indexOf(prevItem)
  102.  
  103.  
  104.     var formLeftCSS = 0;
  105.     if(prevIndex > 0)
  106.         formLeftCSS = (prevIndex * 100)
  107.  
  108.     // Slide element to the previous element
  109.     formProgress.style.setProperty('left', `-${formLeftCSS}%`)
  110.  
  111.     // disallow tabindexing on the current item inputs
  112.     currentItem.querySelectorAll('input').forEach(el=>{
  113.         el.setAttribute('tabindex', "-1");
  114.     })
  115.  
  116.  
  117.     if(prevItem.querySelectorAll('input').length > 0){
  118.         setTimeout(function(){
  119.             // select/focus the previous item first input
  120.             prevItem.querySelectorAll('input')[0].focus()
  121.             // allow tabindexing on the next item inputs
  122.             prevItem.querySelectorAll('input').forEach(el=>{
  123.                 el.removeAttribute('tabindex');
  124.             })
  125.         }, 500)
  126.     }
  127.  
  128.  
  129.     // Update active classes
  130.     currentStep.classList.remove('active')
  131.     prevStep.classList.add('active')
  132.  
  133.     currentItem.classList.remove('active')
  134.     prevItem.classList.add('active')
  135.  
  136.  
  137.     // Update button display
  138.     if(prevIndex == 0)
  139.         previousBtn.style.setProperty('display', 'none');
  140.     else{
  141.         nextBtn.style.setProperty('display', 'block');
  142.         submitBtn.style.setProperty('display', 'none');
  143.     }
  144.  
  145. })
  146.  
  147. /**
  148.     * Submit Form
  149.     */
  150. form.addEventListener('submit', function(e){
  151.     e.preventDefault()
  152.     if(!form.checkValidity()){
  153.         alert("One or more fields are invalid. Please review the data you have provided.!")
  154.         return false;
  155.     }
  156.     form.style.setProperty('display', 'none')
  157.     document.getElementById('form-action-btns').style.setProperty('display', 'none')
  158.     document.getElementById('data-submitted').style.setProperty('display', 'block')
  159.     stepProgress.classList.add('step-progress-done')
  160. })
  161.  
  162. /**
  163.     * Allow Tabindexing to the input on the active form item
  164.     */
  165. formProgress.querySelector('.form-step-item.active').querySelectorAll('input').forEach(el=>{
  166.     el.removeAttribute('tabindex')
  167. })

Upon the execution of the provided scripts for each step, the outcome will be a straightforward web application featuring a multi-step registration form for user enrollment. Progression to the subsequent step is contingent upon the validation of input values in each field. Users are unable to advance if an invalid entry is detected. Facilitating seamless navigation, individuals can easily move to the next or previous step by interacting with the designated buttons.

Snapshots

Form Step 1

Multi-Step Registration Form using HTML, CSS, and JS

Form Step 2

Multi-Step Registration Form using HTML, CSS, and JS

Form Step 3

Multi-Step Registration Form using HTML, CSS, and JS

Form Step 4

Multi-Step Registration Form using HTML, CSS, and JS

Form Submitted

Multi-Step Registration Form using HTML, CSS, and JS

When Invalid Data is Entered

Multi-Step Registration Form using HTML, CSS, and JS

There you it! I hope that this Comprehensive Tutorial on Building a Multi-Step Registration Form using HTML, CSS, and JavaScript meets your needs and proves beneficial for your ongoing or upcoming web application endeavors. Delve deeper into this website to discover additional Tutorials, access Free Source Codes, and peruse insightful Articles spanning various programming languages.

Happy Coding =)

Tags

Add new comment

About text formats
  • 521 views