Multi-Step Form

<div class="card border-0 shadow-sm" style="max-width:380px"><div class="card-body">
  <div class="progress mb-3" style="height:5px"><div class="progress-bar" id="msBar" style="width:33%"></div></div>
  <div data-step="0"><h6 class="fw-bold">Account</h6><input class="form-control mb-2" placeholder="Email"></div>
  <div data-step="1" style="display:none"><h6 class="fw-bold">Profile</h6><input class="form-control mb-2" placeholder="Name"></div>
  <div data-step="2" style="display:none"><h6 class="fw-bold">Done</h6><p class="text-success small">All set! Review and submit.</p></div>
  <div class="d-flex justify-content-between mt-2"><button class="btn btn-light btn-sm" id="msPrev">Back</button><button class="btn btn-primary btn-sm" id="msNext">Next</button></div>
</div></div>

var steps=document.querySelectorAll('[data-step]'),bar=document.getElementById('msBar'),i=0;
function show(){steps.forEach(function(s,k){s.style.display=k===i?'block':'none'});bar.style.width=((i+1)/steps.length*100)+'%';document.getElementById('msNext').textContent=i===steps.length-1?'Submit':'Next'}
document.getElementById('msNext').onclick=function(){if(i<steps.length-1){i++;show()}};
document.getElementById('msPrev').onclick=function(){if(i>0){i--;show()}};