ステップ式ウィザードフォーム

<form class="wiz">
          <div class="prog"><span class="fill"></span></div>
          <div class="steps">
            <div class="step is-on"><h4>基本情報</h4><input type="text" placeholder="お名前"><input type="email" placeholder="メール"></div>
            <div class="step"><h4>ご希望</h4><input type="text" placeholder="ご希望のプラン"><input type="text" placeholder="ご予算"></div>
            <div class="step"><h4>確認</h4><p>内容を確認して送信してください。</p></div>
          </div>
          <div class="nav">
            <button type="button" class="prev-b" disabled>戻る</button>
            <span class="count">1 / 3</span>
            <button type="button" class="next-b">進む</button>
          </div>
        </form>

.d11-02-02 .wiz{width:250px}
        .d11-02-02 .prog{height:6px;border-radius:6px;background:#e6e6ef;overflow:hidden;margin-bottom:16px}
        .d11-02-02 .fill{display:block;height:100%;width:33.3%;background:#5b6ef5;border-radius:6px;transition:width .4s}
        .d11-02-02 .step{display:none;flex-direction:column;gap:8px}
        .d11-02-02 .step.is-on{display:flex}
        .d11-02-02 .step h4{margin:0 0 4px;font-size:15px;color:#26264a}
        .d11-02-02 .step input{border:1px solid #d5d5e0;border-radius:8px;padding:8px 10px;font-size:12px}
        .d11-02-02 .step p{margin:0;font-size:12px;color:#666;line-height:1.6}
        .d11-02-02 .nav{display:flex;align-items:center;justify-content:space-between;margin-top:16px}
        .d11-02-02 .nav button{border:0;border-radius:8px;padding:8px 16px;font-size:12px;cursor:pointer;background:#5b6ef5;color:#fff}
        .d11-02-02 .nav button:disabled{background:#c9c9d6;cursor:not-allowed}
        .d11-02-02 .prev-b{background:#e6e6ef;color:#26264a}
        .d11-02-02 .count{font-size:12px;color:#888}

(function(){
        var r=document.querySelector('#item-11-02-02 .d11-02-02');
        var steps=r.querySelectorAll('.step'),fill=r.querySelector('.fill'),count=r.querySelector('.count');
        var prev=r.querySelector('.prev-b'),next=r.querySelector('.next-b'),i=0;
        r.querySelector('.wiz').addEventListener('submit',function(e){e.preventDefault();});
        function upd(){
          steps.forEach(function(s,n){s.classList.toggle('is-on',n===i);});
          fill.style.width=((i+1)/steps.length*100)+'%';
          count.textContent=(i+1)+' / '+steps.length;
          prev.disabled=i===0;
          next.textContent=i===steps.length-1?'送信':'進む';
        }
        next.addEventListener('click',function(){if(i<steps.length-1){i++;upd();}else{next.textContent='完了';next.disabled=true;}});
        prev.addEventListener('click',function(){if(i>0){i--;next.disabled=false;upd();}});
      })();