no-image

JavaScript

スライダータイプの質問フォーム実装「jquery.formslider」

jquery.formsliderはスライダータイプによる質問フォームを実装できるプラグインです。質問に答えると次の質問がスライドしながら登場します。選択式で回答していけば、テンポよくフォーム完了までいくので、ユーザーへの負担も軽減できそうですね。

jquery.formslider

jquery.formslider

デモではページ読み込み時に「Are you a woman or man?」という質問が表示されていて、その下にWomen、Boy、Don’t knowの3つが選択できるようになっています。さらにその下にはフォーム完了までの進捗状況が分かるバーが設置されているので、あとどのくらいで質問が終わるのかを視覚的に把握できます。

質問への答えを選択すると、次の質問がスライドで登場します。対応する答えの選択リストもスライドとともに新たに表示されます。

デモでは答えの選択にイラストも付いているので直感的に分かりやすいのがいいですね。

また、レスポンシブやタッチジェスチャーにも対応しているので、パソコンからの閲覧だけではなくスマホやタブレットでも操作できます。

スライド式の質問フォームを実装したい人は、ぜひ「jquery.formslider」を活用されてみてはいかがでしょうか?

jquery.formslider

no-imageマスクエフェクトが素敵なスライダー実装「Masked Circle Slider」前のページ

華やかなレターアニメーションを実装できる「Decorative Letter Animations」次のページno-image

関連記事

  1. jExcel

    JavaScript

    Excelと互換性のあるスプレッドシートを埋め込めるjQueryプラグイン「jExcel」

    jExcelは、ブラウザにExcelと互換性のあるスプレッドシートを埋…

  2. no-image

    JavaScript

    要素ごとにスクロールできるjQueryプラグイン「snapScroll.js」

    snapScroll.jsは要素ごとにきりのいいところでスクロールされ…

  3. A simple DIY responsive image slideshow
  4. Instafeed.js

    JavaScript

    Webサイト内にInstagramの画像を表示できる「Instafeed.js」

    Instafeed.jsはWebサイト内にInstagramの画像一覧…

  5. no-image

    JavaScript

    クッキーバナーを手軽に作れるjQueryプラグイン「Cookie Banner JS」

    Cookie Banner JSは、Webサイト上に表示させるクッキー…

  6. JavaScript

    リストなど複数の要素をランダムにフェードで表示していくjQueryプラグイン「champagne.j…

    どこかで使う機会がありそうな感じのjQueryプラグイン「champa…

最近の記事

  1. クリニカのY字タイプのフロス
  2. 日和山公園の桜
  3. 成城石井 フレンチロースト
  4. COMOLI カシミアシルクニットパーカ
  5. 橋

アーカイブ

PAGE TOP