Multi-Step Form Wizard

<div class="wiz">
  <div class="wiz-bar"><div class="wiz-bar-fill" id="bar"></div></div>
  <div class="wiz-steps">
    <span class="on" data-dot="0">1</span><span data-dot="1">2</span><span data-dot="2">3</span>
  </div>
  <form id="wiz">
    <section class="wiz-step on" data-step="0">
      <h3>Your details</h3>
      <label>Full name<input name="name" required placeholder="Jane Doe"></label>
      <label>Email<input name="email" type="email" required placeholder="jane@example.com"></label>
    </section>
    <section class="wiz-step" data-step="1">
      <h3>Your company</h3>
      <label>Company<input name="company" required placeholder="Acme Inc."></label>
      <label>Role<input name="role" required placeholder="Engineer"></label>
    </section>
    <section class="wiz-step" data-step="2">
      <h3>Review &amp; submit</h3>
      <p class="wiz-summary" id="summary"></p>
    </section>
    <div class="wiz-nav">
      <button type="button" id="back" class="wiz-btn ghost" disabled>Back</button>
      <button type="button" id="next" class="wiz-btn">Continue</button>
      <button type="submit" id="done" class="wiz-btn" hidden>Submit</button>
    </div>
  </form>
  <div class="wiz-ok" id="ok" hidden>
    <svg viewBox="0 0 52 52" width="56" height="56"><circle cx="26" cy="26" r="24" fill="none" stroke="#16a34a" stroke-width="3"/><path fill="none" stroke="#16a34a" stroke-width="4" stroke-linecap="round" d="M15 27l7 7 15-15"/></svg>
    <p>All done — thanks!</p>
  </div>
</div>

*{box-sizing:border-box}
.wiz{width:380px;max-width:100%;background:#fff;border-radius:18px;padding:28px;box-shadow:0 16px 44px rgba(20,25,50,.12);font-family:system-ui,sans-serif}
.wiz-bar{height:6px;background:#eceef3;border-radius:999px;overflow:hidden}
.wiz-bar-fill{height:100%;width:33%;background:linear-gradient(90deg,#ff7a18,#ff477e);border-radius:999px;transition:width .35s ease}
.wiz-steps{display:flex;justify-content:space-between;margin:16px 4px 22px}
.wiz-steps span{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;font-size:13px;font-weight:700;background:#eceef3;color:#9099ad;transition:.3s}
.wiz-steps span.on{background:linear-gradient(135deg,#ff7a18,#ff477e);color:#fff;box-shadow:0 4px 12px rgba(255,71,126,.4)}
.wiz-step{display:none;animation:fade .3s ease}
.wiz-step.on{display:block}
@keyframes fade{from{opacity:0;transform:translateX(12px)}}
.wiz h3{margin:0 0 16px;color:#1a1f36}
.wiz label{display:block;font-size:13px;font-weight:600;color:#5a627a;margin-bottom:14px}
.wiz input{width:100%;margin-top:6px;padding:11px 13px;border:1px solid #d2d7e3;border-radius:10px;font-size:15px;outline:none;transition:.15s}
.wiz input:focus{border-color:#ff477e;box-shadow:0 0 0 3px rgba(255,71,126,.16)}
.wiz input.err{border-color:#ef4444;box-shadow:0 0 0 3px rgba(239,68,68,.14)}
.wiz-summary{color:#46506b;line-height:1.8;background:#f6f7fa;padding:16px;border-radius:10px;font-size:14px}
.wiz-nav{display:flex;gap:10px;margin-top:8px}
.wiz-btn{flex:1;padding:12px;border:0;border-radius:10px;font-weight:700;cursor:pointer;background:linear-gradient(135deg,#ff7a18,#ff477e);color:#fff;transition:transform .12s}
.wiz-btn:active{transform:scale(.98)}
.wiz-btn.ghost{background:#eceef3;color:#5a627a}
.wiz-btn:disabled{opacity:.45;cursor:not-allowed}
.wiz-ok{text-align:center;padding:24px;font-family:system-ui,sans-serif;animation:fade .4s ease}
.wiz-ok p{font-weight:700;color:#16a34a;margin:14px 0 0}

var step=0,steps=document.querySelectorAll('.wiz-step'),dots=document.querySelectorAll('.wiz-steps span');
var bar=document.getElementById('bar'),back=document.getElementById('back'),next=document.getElementById('next'),done=document.getElementById('done'),form=document.getElementById('wiz');
function show(){
  steps.forEach(function(s,i){s.classList.toggle('on',i===step)});
  dots.forEach(function(d,i){d.classList.toggle('on',i<=step)});
  bar.style.width=((step+1)/steps.length*100)+'%';
  back.disabled=step===0;
  next.hidden=step===steps.length-1;done.hidden=step!==steps.length-1;
  if(step===steps.length-1){var f=new FormData(form);document.getElementById('summary').innerHTML='<strong>'+f.get('name')+'</strong><br>'+f.get('email')+'<br>'+f.get('company')+' · '+f.get('role');}
}
function validate(){var ok=true;steps[step].querySelectorAll('input[required]').forEach(function(i){var bad=!i.value.trim()||(i.type==='email'&&!/.+@.+\..+/.test(i.value));i.classList.toggle('err',bad);if(bad)ok=false});return ok;}
next.onclick=function(){if(validate()){step++;show();}};
back.onclick=function(){step--;show();};
form.onsubmit=function(e){e.preventDefault();if(validate()){form.style.display='none';document.getElementById('ok').hidden=false;}};
show();