丸数字ステップインジケータ付きフォーム

<div class="d04-09-02-wrap">
          <div class="d04-09-02-steps">
            <div class="d04-09-02-node is-active"><span class="d04-09-02-circle">1</span><span class="d04-09-02-label">基本情報</span></div>
            <span class="d04-09-02-line"></span>
            <div class="d04-09-02-node"><span class="d04-09-02-circle">2</span><span class="d04-09-02-label">連絡先</span></div>
            <span class="d04-09-02-line"></span>
            <div class="d04-09-02-node"><span class="d04-09-02-circle">3</span><span class="d04-09-02-label">確認</span></div>
          </div>
          <div class="d04-09-02-panel">
            <div class="d04-09-02-page is-show">
              <label class="d04-09-02-flabel">お名前</label>
              <input type="text" class="d04-09-02-finput" placeholder="山田 太郎">
            </div>
            <div class="d04-09-02-page">
              <label class="d04-09-02-flabel">電話番号</label>
              <input type="tel" class="d04-09-02-finput" placeholder="090-1234-5678">
            </div>
            <div class="d04-09-02-page">
              <p class="d04-09-02-confirm">入力内容をご確認の上、送信してください。</p>
            </div>
          </div>
          <div class="d04-09-02-nav">
            <button type="button" class="d04-09-02-prevbtn" disabled>戻る</button>
            <button type="button" class="d04-09-02-nextbtn">次へ</button>
          </div>
        </div>

.d04-09-02-wrap{width:min(280px,100%)}
        .d04-09-02-steps{display:flex;align-items:flex-start;justify-content:center;margin-bottom:18px}
        .d04-09-02-node{display:flex;flex-direction:column;align-items:center;gap:6px;flex:0 0 auto}
        .d04-09-02-circle{
          width:26px;height:26px;border-radius:50%;background:#e4e8ef;color:#8a93a3;
          display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;
          transition:background .3s,color .3s;
        }
        .d04-09-02-node.is-active .d04-09-02-circle{background:#4a6cf7;color:#fff}
        .d04-09-02-node.is-done .d04-09-02-circle{background:#22b573;color:#fff}
        .d04-09-02-label{font-size:10px;color:#8a93a3;white-space:nowrap}
        .d04-09-02-node.is-active .d04-09-02-label{color:#4a6cf7;font-weight:700}
        .d04-09-02-line{width:30px;height:2px;background:#e4e8ef;margin:12px 4px 0;transition:background .3s}
        .d04-09-02-line.is-done{background:#22b573}
        .d04-09-02-panel{min-height:74px}
        .d04-09-02-page{display:none;flex-direction:column;gap:6px}
        .d04-09-02-page.is-show{display:flex}
        .d04-09-02-flabel{font-size:11px;color:#8a93a3}
        .d04-09-02-finput{
          padding:10px 12px;font-size:13px;border:2px solid #d5d9e0;border-radius:8px;
          outline:none;background:#fff;font-family:inherit;
        }
        .d04-09-02-finput:focus{border-color:#4a6cf7}
        .d04-09-02-confirm{margin:0;font-size:12px;color:#445;line-height:1.7}
        .d04-09-02-nav{display:flex;justify-content:space-between;gap:10px;margin-top:16px}
        .d04-09-02-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-02-nextbtn{background:#4a6cf7;border-color:#4a6cf7;color:#fff}
        .d04-09-02-nav button:disabled{opacity:.4;cursor:not-allowed}

(function(){
        var wrap=document.querySelector('.d04-09-02-wrap');
        if(!wrap)return;
        var nodes=wrap.querySelectorAll('.d04-09-02-node');
        var lines=wrap.querySelectorAll('.d04-09-02-line');
        var pages=wrap.querySelectorAll('.d04-09-02-page');
        var prevBtn=wrap.querySelector('.d04-09-02-prevbtn');
        var nextBtn=wrap.querySelector('.d04-09-02-nextbtn');
        var total=nodes.length;
        var cur=0;
        function paint(){
          nodes.forEach(function(n,i){
            n.classList.toggle('is-active',i===cur);
            n.classList.toggle('is-done',i<cur);
          });
          lines.forEach(function(l,i){l.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?'送信する':'次へ';
        }
        prevBtn.addEventListener('click',function(){
          if(cur>0){cur--;paint();}
        });
        nextBtn.addEventListener('click',function(){
          if(cur<total-1){cur++;paint();}
        });
      })();