jQuery(javascript)を用いた移動するお問い合わせフォームの作り方です。
サンプルは以下。
https://freemas.org/move_form_sample/
よく見るちょっとおしゃれなフォームですね。
jQueryで単純に作れるので、見ていきましょう。
移動するフォームを作ろう
HTML、およびCSSについては詳しくは割愛します。
HTMLに関しては2つのセクションに分けるように作成しましょう。
下記はフォームの詳細は省いた、2つのセクションです。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
<body> <div class="contents"> <form action="#"> <div class="form_area"> <section class="property col"> <h1 class="h1_property">情報入力1</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"><< 戻る</p> </section> </div><!-- form_area --> </form> </div><!-- contents --> </body> |
フォームの詳細は省きますが、情報の入力欄と、個人情報の入力欄があります。
これらのセクションはCSSで横並びにします。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 |
.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ファイルは以下のようになります。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
//次へボタンを押したら必須チェック $(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を戻すことで、左へとフォームを動かしています。
このように仕組みが分かると、おしゃれに見えるフォームも、
しっかりと種と仕掛けがあって動いているんですね。
作り方を簡単に覚えて、もし機会があれば参考にして見てください。