【jQuery】移動するフォームを作ろう【段階式】

2021年6月23日
2021年6月23日
jQuery

jQuery

jQuery（javascript）を用いた移動するお問い合わせフォームの作り方です。
サンプルは以下。

よく見るちょっとおしゃれなフォームですね。
jQueryで単純に作れるので、見ていきましょう。

移動するフォームを作ろう

HTML、およびCSSについては詳しくは割愛します。
HTMLに関しては2つのセクションに分けるように作成しましょう。
下記はフォームの詳細は省いた、2つのセクションです。

<body>
	<div class="contents">
	<form action="#">
	<div class="form_area">
		<section class="property col">
			<h1 class="h1_property">情報入力１</h1>
			<div class="quest_box">
			----省略------
			</div>
			<button type="button" class="go2next btdesign">次へ</button>
		</section>

		<section class="personal col hidden">
			<h1 class="h1_personal">個人情報入力</h1>
			<div class="quest_box">
                        ----省略------
			</div>
			<p class="back">&lt;&lt; 戻る</p>
		</section>
	</div><!-- form_area -->
	</form>
</div><!-- contents -->
</body>

<body>

----省略------

</div>

</section>

<h1 class="h1_personal">個人情報入力</h1>

----省略------

</div>

</section>

</div>

</form>

</div>

</body>

フォームの詳細は省きますが、情報の入力欄と、個人情報の入力欄があります。
これらのセクションはCSSで横並びにします。

.contents {
    background: rgba(255, 255, 255, 1);
    border: 5px solid #64c8f0;
    border-radius: 15px;
    filter: drop-shadow(0 0 4px rgba(0, 0, 0, 0.2));
    margin: 0 auto;
    width: 90%;
    padding: 20px 10px 40px 10px;
    position: relative;
    overflow: hidden;
  }

  div.form_area {
    display:block;
    width:200%;
  }

  div.form_area .col{
    float: left;
    width: 50%;
  }

  .property {
    width: 45%;
    background: #fff;
    border-radius: 10px;
  }

  .personal {
    width: 45%;
    background: #fff;
    border-radius: 10px;
  }

.contents {

background: rgba(255, 255, 255, 1);

border: 5px solid #64c8f0;

border-radius: 15px;

filter: drop-shadow(0 0 4px rgba(0, 0, 0, 0.2));

margin: 0 auto;

width: 90%;

padding: 20px 10px 40px 10px;

position: relative;

overflow: hidden;

}

div.form_area {

display:block;

width:200%;

}

div.form_area .col{

float: left;

width: 50%;

}

.property {

width: 45%;

background: #fff;

border-radius: 10px;

}

.personal {

width: 45%;

background: #fff;

border-radius: 10px;

}

floatで横並びにした後に、領域外についてはoverflow:hiddenで非表示にしています。
これで最初の情報の部分のみが表示されています。
個人情報の部分は隠れているだけなので、実際に送信するときには1つのフォームとして情報を送っています。
段階的には送信しないということですね。

さて、それではこのフォームのうち「次へ」ボタンを押したら
移動するようにjQueryを組んでいきましょう。
jsファイルは以下のようになります。

//次へボタンを押したら必須チェック
$(function(){
  $('.go2next').on('click', function(){
    
    //問題なければ、右に移動させる
    $('.form_area').animate({marginLeft:-100 + '%'},500,'swing');

  });
});

//戻るボタンをクリックしたら戻る
$(function(){
  $('.back').on('click', function(){
      $('.form_area').animate({marginLeft:0 + 'px'},500,'swing');

  });
});

//次へボタンを押したら必須チェック

$(function(){

$('.go2next').on('click', function(){

//問題なければ、右に移動させる

$('.form_area').animate({marginLeft:-100 + '%'},500,'swing');

});

//戻るボタンをクリックしたら戻る

$(function(){

$('.back').on('click', function(){

$('.form_area').animate({marginLeft:0 + 'px'},500,'swing');

});

移動するフォームを実現するにはjQueryのanimateを使用します。
進むボタンを使用した場合、左側のmarginを-100%にすることで、
情報のフォームを左にそのままずらしています。

個人情報のフォームはすぐ右にあるので、
左にずらすと自然と個人情報のフォームが表示されます。
画像のスライダーと似ていますね。

画像で表現するとこんな感じです。

なお、個人情報のフォームには戻るボタンも準備しています。
ずらしたmarginを戻すことで、左へとフォームを動かしています。

このように仕組みが分かると、おしゃれに見えるフォームも、
しっかりと種と仕掛けがあって動いているんですね。

作り方を簡単に覚えて、もし機会があれば参考にして見てください。