横スライド式フォームウィザード

<div class="d04-09-01-wrap">
          <div class="d04-09-01-bar"><span class="d04-09-01-fill"></span></div>
          <div class="d04-09-01-viewport">
            <div class="d04-09-01-track">
              <div class="d04-09-01-pane">
                <p class="d04-09-01-q">お名前を入力してください</p>
                <input type="text" class="d04-09-01-input" placeholder="山田 太郎">
              </div>
              <div class="d04-09-01-pane">
                <p class="d04-09-01-q">メールアドレスを入力してください</p>
                <input type="email" class="d04-09-01-input" placeholder="you@example.com">
              </div>
              <div class="d04-09-01-pane">
                <p class="d04-09-01-q">ご希望のプランをお選びください</p>
                <select class="d04-09-01-input">
                  <option>ライトプラン</option>
                  <option>スタンダードプラン</option>
                  <option>プレミアムプラン</option>
                </select>
              </div>
            </div>
          </div>
          <div class="d04-09-01-nav">
            <button type="button" class="d04-09-01-prevbtn" disabled>戻る</button>
            <span class="d04-09-01-count">1 / 3</span>
            <button type="button" class="d04-09-01-nextbtn">次へ</button>
          </div>
        </div>

.d04-09-01-wrap{width:min(280px,100%)}
        .d04-09-01-bar{height:4px;background:#e4e8ef;border-radius:99px;overflow:hidden;margin-bottom:16px}
        .d04-09-01-fill{display:block;height:100%;width:33.33%;background:#4a6cf7;border-radius:99px;transition:width .35s ease}
        .d04-09-01-viewport{overflow:hidden;width:100%}
        .d04-09-01-track{display:flex;transition:transform .4s cubic-bezier(.4,0,.2,1)}
        .d04-09-01-pane{flex:0 0 100%;box-sizing:border-box;padding:0 2px}
        .d04-09-01-q{margin:0 0 10px;font-size:13px;color:#333;font-weight:700}
        .d04-09-01-input{
          width:100%;box-sizing:border-box;padding:10px 12px;font-size:13px;
          border:2px solid #d5d9e0;border-radius:8px;outline:none;background:#fff;
          font-family:inherit;transition:border-color .2s;
        }
        .d04-09-01-input:focus{border-color:#4a6cf7}
        .d04-09-01-nav{display:flex;align-items:center;justify-content:space-between;margin-top:16px}
        .d04-09-01-nav button{
          padding:9px 14px;font-size:12px;font-weight:700;border-radius:8px;cursor:pointer;
          border:2px solid #d5d9e0;background:#fff;color:#444;transition:opacity .2s;
        }
        .d04-09-01-nextbtn{background:#4a6cf7;border-color:#4a6cf7;color:#fff}
        .d04-09-01-nav button:disabled{opacity:.4;cursor:not-allowed}
        .d04-09-01-count{font-size:11px;color:#8a93a3}

(function(){
        var wrap=document.querySelector('.d04-09-01-wrap');
        if(!wrap)return;
        var track=wrap.querySelector('.d04-09-01-track');
        var panes=wrap.querySelectorAll('.d04-09-01-pane');
        var fill=wrap.querySelector('.d04-09-01-fill');
        var count=wrap.querySelector('.d04-09-01-count');
        var prevBtn=wrap.querySelector('.d04-09-01-prevbtn');
        var nextBtn=wrap.querySelector('.d04-09-01-nextbtn');
        var total=panes.length;
        var cur=0;
        function paint(){
          track.style.transform='translateX(-'+(cur*100)+'%)';
          fill.style.width=((cur+1)/total*100)+'%';
          count.textContent=(cur+1)+' / '+total;
          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();}
        });
        paint();
      })();