パンくず型ステップナビフォーム

<div class="d04-09-07-wrap">
          <nav class="d04-09-07-crumbs">
            <span class="d04-09-07-crumb is-active">① アカウント</span>
            <span class="d04-09-07-sep">›</span>
            <span class="d04-09-07-crumb">② プロフィール</span>
            <span class="d04-09-07-sep">›</span>
            <span class="d04-09-07-crumb">③ 完了</span>
          </nav>
          <div class="d04-09-07-panel">
            <div class="d04-09-07-page is-show">
              <label class="d04-09-07-flabel">メールアドレス</label>
              <input type="email" class="d04-09-07-finput" placeholder="you@example.com">
            </div>
            <div class="d04-09-07-page">
              <label class="d04-09-07-flabel">表示名</label>
              <input type="text" class="d04-09-07-finput" placeholder="ニックネーム">
            </div>
            <div class="d04-09-07-page">
              <p class="d04-09-07-done">アカウントの作成が完了しました。</p>
            </div>
          </div>
          <div class="d04-09-07-nav">
            <button type="button" class="d04-09-07-prevbtn" disabled>戻る</button>
            <button type="button" class="d04-09-07-nextbtn">次へ</button>
          </div>
        </div>

.d04-09-07-wrap{width:min(280px,100%)}
        .d04-09-07-crumbs{display:flex;align-items:center;justify-content:center;gap:8px;margin-bottom:18px;flex-wrap:wrap}
        .d04-09-07-crumb{font-size:11px;color:#c3c9d4;font-weight:700;transition:color .3s}
        .d04-09-07-crumb.is-active{color:#4a6cf7}
        .d04-09-07-crumb.is-done{color:#22b573;cursor:pointer}
        .d04-09-07-sep{font-size:11px;color:#d5d9e0}
        .d04-09-07-panel{min-height:64px}
        .d04-09-07-page{display:none;flex-direction:column;gap:6px}
        .d04-09-07-page.is-show{display:flex}
        .d04-09-07-flabel{font-size:11px;color:#8a93a3}
        .d04-09-07-finput{
          padding:10px 12px;font-size:13px;border:2px solid #d5d9e0;border-radius:8px;
          outline:none;background:#fff;font-family:inherit;
        }
        .d04-09-07-finput:focus{border-color:#4a6cf7}
        .d04-09-07-done{margin:0;font-size:13px;color:#1c7c4e;font-weight:700;text-align:center}
        .d04-09-07-nav{display:flex;justify-content:space-between;gap:10px;margin-top:16px}
        .d04-09-07-nav button{
          padding:9px 14px;font-size:12px;font-weight:700;border-radius:8px;cursor:pointer;
          border:2px solid #d5d9e0;background:#fff;color:#444;
        }
        .d04-09-07-nextbtn{background:#4a6cf7;border-color:#4a6cf7;color:#fff}
        .d04-09-07-nav button:disabled{opacity:.4;cursor:not-allowed}

(function(){
        var wrap=document.querySelector('.d04-09-07-wrap');
        if(!wrap)return;
        var crumbs=wrap.querySelectorAll('.d04-09-07-crumb');
        var pages=wrap.querySelectorAll('.d04-09-07-page');
        var prevBtn=wrap.querySelector('.d04-09-07-prevbtn');
        var nextBtn=wrap.querySelector('.d04-09-07-nextbtn');
        var total=crumbs.length;
        var cur=0;
        function goTo(i){
          cur=i;
          paint();
        }
        function paint(){
          crumbs.forEach(function(c,i){
            c.classList.toggle('is-active',i===cur);
            c.classList.toggle('is-done',i<cur);
          });
          pages.forEach(function(p,i){p.classList.toggle('is-show',i===cur);});
          prevBtn.disabled=cur===0;
          nextBtn.textContent=cur===total-1?'完了':'次へ';
        }
        crumbs.forEach(function(c,i){
          c.addEventListener('click',function(){
            if(i<cur)goTo(i);
          });
        });
        prevBtn.addEventListener('click',function(){
          if(cur>0)goTo(cur-1);
        });
        nextBtn.addEventListener('click',function(){
          if(cur<total-1)goTo(cur+1);
        });
      })();