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

関連記事

  1. JavaScript

    シンプル・軽量・簡単なLightBox系モーダルウィンドウのjQueryプラグイン「portBox」…

    portBoxというjQueryプラグインを使えばシンプルで軽量なLi…

  2. Adi.js

    JavaScript

    アドブロックを検知してくれる「Adi.js」

    Adi.jsはアドブロックを検知してくれるjQueryプラグインです。…

  3. stickyNavbar.js
  4. JavaScript

    画像をボックス単位に分割してスライドさせていくjQueryプラグイン「Maskify Slider」…

    とてもお洒落なjQueryのイメージスライダーがあったのでご紹介します…

  5. jQuery TextFill

    JavaScript

    テキストをリサイズしてコンテナにフィットさせる「jQuery TextFill」

    jQuery TextFillはテキストをリサイズしてコンテナにフィッ…

  6. Yamm 3

    JavaScript

    メガメニューをBootstrap3で実装する「Yamm 3」

    Yamm 3はメガメニューをBootstrap3を使って実装することが…

最近の記事

  1. iPhone 11 ProとApple Watch Hermès
  2. cheero Energy Plus mini Wireless 4400mAh
  3. cheero 2 port PD Charger
  4. 台座と紅葉
  5. ニルヴァーナ バターチキンカレー

アーカイブ

PAGE TOP