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. simplePagination.js
  2. emotion-ratings

    JavaScript

    絵文字を使ったレーティング機能を実装できる「emotion-ratings」

    emotion-ratingsは絵文字を使ったレーティング機能を実装で…

  3. notifit

    JavaScript

    多彩なカスタマイズができるシンプルなjQuery通知プラグイン「notifit」

    notifitは多彩なカスタマイズが可能なシンプルな通知機能を実装でき…

  4. jQuery Magnify

    JavaScript

    シンプルで軽量なズーム機能を実装できる「jQuery Magnify」

    jQuery Magnifyはシンプルで軽量なズーム機能を実装すること…

  5. JavaScript

    指定したボックス要素にドロップシャドウをつけてくれるjQuery Shadow Plugin

    指定したボックス要素にドロップシャドウをつけてくれるjQuery Sh…

  6. HTML5 Sortable

    JavaScript

    リストをドラッグ&ドロップで並べ替えることができるjQueryプラグイン「HTML5 So…

    リスト化した要素をドラッグ&ドロップで並べ替えることができるjQuer…

最近の記事

  1. WiMAX
  2. 甘柿
  3. 冬用のふとん
PAGE TOP