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. Shuffle Images

    JavaScript

    画像をシャッフルすることができるjQueryプラグイン「Shuffle Images」

    Shuffle ImagesというjQueryプラグインを使えば、画像…

  2. no-image

    JavaScript

    リッチキャプションを備えたイメージビューア「CaptionBox」

    CaptionBoxは、リッチキャプションを備えた美しいイメージビュー…

  3. JQuery Clock

    JavaScript

    シンプルなアナログ時計を実装できる「JQuery Clock」

    JQuery Clockはシンプルなアナログ時計を実装できます。画像を…

  4. basicContext

    JavaScript

    使いやすいコンテキストメニューを実装できる「basicContext」

    basicContextはシンプルで使いやすいコンテキストメニューを実…

  5. Tipso

    JavaScript

    レスポンシブでアニメーションもいい感じのツールチップのjQueryプラグイン「Tipso」

    Tipsoはレスポンシブに対応した軽量でアニメーションもいい感じのツー…

  6. tsorter

    JavaScript

    テーブルにソート(並べ替え)機能を実装できる「tsorter」

    tsorterは、JavaScriptを用いてHTMLテーブルにソート…

最近の記事

  1. オータムスイートポテトフラペチーノ
  2. 紅葉
  3. ナノケア EH-NA0E
  4. スターバックス コロンビア サンタンデール

アーカイブ

PAGE TOP