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

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

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

https://freemas.org/move_form_sample/

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

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

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

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

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

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

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

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

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

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

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

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