contact form7とswiper連係によるステップ式フォーム

お世話になります。

https://colers.jp/snippet/step-forms-for-contactform7
こちらの記事を参考にステップ形式のコンタクトフォームを構築し、動作もしているのですが、これでありますと２ステップになり、３ステップにしますと、２→３ページ目がうまく遷移せす、困っております。
おそらくjsへの加筆かと思うのですが。

当方jsは、

/* Contact Form7 Enterで送信しないようにする処理
-----------------------------------------*/
function submitStop(e){

  if (!e) var e = window.event;
  if(e.keyCode == 13)
    return false;
}
window.onload = function (){
  var list = document.getElementsByTagName("input");
  for(var i=0; i<list.length; i++){
    if(list[i].type == 'email' || list[i].type == 'password'|| list[i].type == 'text'|| list[i].type == 'number'){
      list[i].onkeypress = function (event){
        return submitStop(event);
      };
    }
  }
}

/* Tabキーを無効に
-----------------------------------------*/
window.onkeydown = function(e) {
  if (e.keyCode == 9)
    return false;
}

/* Swiperでステップ式
-----------------------------------------*/
const nextBtn = document.querySelector(".next-step");
const prevBtn = document.querySelector(".prev-step");
const swiperDemo = new Swiper('.swiper-container', {
  effect: "fade", //フェードのエフェクト
  fadeEffect: {
        crossFade: true
      },
  allowTouchMove: false
});
nextBtn.addEventListener("click", () => {
  swiperDemo.slideNext();
});
prevBtn.addEventListener("click", () => {
  swiperDemo.slidePrev();
});

htmlは

<!-- WordPres管理画面 Contact Form7 コンタクトフォーム編集 -->
<div class="swiper-container">
  <div class="swiper-wrapper">
    <div class="swiper-slide step1">
      <label> お名前 (必須)
      [text* your-name] </label>
      <label> メールアドレス (必須)
      [email* your-email] </label>
      <input type="button" class="next-step" value="次へ">
    </div>
<div class="swiper-slide step2">
      <label> 題名
      [text your-subject] </label>
      <label> メッセージ本文
      [textarea your-message] </label>
      <input type="button" class="prev-step" value="戻る">
      <input type="button" class="next-step" value="次へ">
    </div>
    <div class="swiper-slide step3">
      <label> 題名
      [text your-subject] </label>
      <label> メッセージ本文
      [textarea your-message] </label>
      <input type="button" class="prev-step" value="戻る">
      [submit "送信"]
    </div>
  </div>
</div>

になります。

一点参考サイトはスライドになっていたのですが、フェードへカスタムしております。

以上ご教示いただけますと助かります。

• このトピックはosat99が2年、 6ヶ月前に変更しました。
• このトピックはosat99が2年、 6ヶ月前に変更しました。