JavaScriptで複数のステップを持つフォームを作成するにはどうすればよいですか？

複数のステップでフォームを作成するためのコードは次のとおりです-

例

<!DOCTYPE html>
<html>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
   * {
      box-sizing: border-box;
   }
   body {
      background-color: #f1f1f1;
   }
   #regForm {
      margin: 100px auto;
      font-family: Raleway;
      padding: 40px;
      width: 70%;
      min-width: 300px;
   }
   h1 {
      text-align: center;
   }
   input {
      padding: 10px;
      width: 100%;
      font-size: 17px;
      font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
      border: 1px solid #aaaaaa;
   }
   /* Mark input boxes that gets an error on validation: */
   input.invalid {
      background-color: #ffdddd;
   }
   /* Hide all steps by default: */
   .page {
      display: none;
   }
   button {
      background-color: #4CAF50;
      color: #ffffff;
      border: none;
      padding: 10px 20px;
      font-size: 17px;
      font-family: Raleway;
      cursor: pointer;
   }
   button:hover {
      opacity: 0.8;
   }
   #prevBtn {
      background-color: #bbbbbb;
   }
   .step {
      height: 15px;
      width: 15px;
      margin: 0 2px;
      background-color: #bbbbbb;
      border: none;
      border-radius: 50%;
      display: inline-block;
      opacity: 0.5;
   }
   .step.active {
      opacity: 1;
   }
   .step.finish {
      background-color: #4CAF50;
   }
</style>
<body>
<form id="regForm">
<h1>Register:</h1>
<div class="page">Name:
<p><input placeholder="First name:" oninput="this.className = ''" name="fname"></p>
<p><input placeholder="Last name:" oninput="this.className = ''" name="lname"></p>
</div>
<div class="page">Contact Info:
<p><input placeholder="E-mail:" oninput="this.className = ''" name="email"></p>
<p><input placeholder="Phone:" oninput="this.className = ''" name="phone"></p>
</div>
<div class="page">Birthday:
<p><input placeholder="Date:" oninput="this.className = ''" name="dd"></p>
<p><input placeholder="Month:" oninput="this.className = ''" name="nn"></p>
<p><input placeholder="Year:" oninput="this.className = ''" name="yyyy"></p>
</div>
<div style="overflow:auto;">
<div style="float:right;">
<button type="button" id="prevBtn" onclick="nextPrev(-1)">Previous</button>
<button type="button" id="nextBtn" onclick="nextPrev(1)">Next</button>
</div>
</div>
<div style="text-align:center;margin-top:40px;">
<span class="step"></span>
<span class="step"></span>
<span class="step"></span>
</div>
</form>
<script>
   var currentTab = 0;
   showTab(currentTab);
   function showTab(stepNo) {
      var pageEle = document.getElementsByClassName("page");
      pageEle[stepNo].style.display = "block";
      if (stepNo == 0) {
         document.getElementById("prevBtn").style.display = "none";
      }
      else {
         document.getElementById("prevBtn").style.display = "inline";
      }
      if (stepNo == (pageEle.length - 1)) {
         document.getElementById("nextBtn").innerHTML = "Submit";
      }
      else {
         document.getElementById("nextBtn").innerHTML = "Next";
      }
      changeStepIndicator(stepNo)
   }
   function nextPrev(stepNo) {
      var pageEle = document.getElementsByClassName("page");
      if (stepNo == 1 && !checkForm()) return false;
      pageEle[currentTab].style.display = "none";
      currentTab = currentTab + stepNo;
      if (currentTab >= pageEle.length) {
         document.getElementById("regForm").submit();
         return false;
      }
      showTab(currentTab);
   }
   function checkForm() {
      var pageEle, inputEle, i, valid = true;
      pageEle = document.getElementsByClassName("page");
      inputEle = pageEle[currentTab].getElementsByTagName("input");
      for (i = 0; i < inputEle.length; i++) {
         if (inputEle[i].value == "") {
            inputEle[i].className += " invalid";
            valid = false;
         }
      }
      if (valid) {
         document.getElementsByClassName("step")[currentTab].className += " finish";
      }
      return valid;
   }
   function changeStepIndicator(stepNo) {
      var i, pageEle = document.getElementsByClassName("step");
      for (i = 0; i < pageEle.length; i++) {
         pageEle[i].className = pageEle[i].className.replace(" active", "");
      }
      pageEle[stepNo].className += " active";
   }
</script>
</body>
</html>