formToWizard

JavaScript

ステップごとに入力可能なフォームを実装できる「formToWizard」

formToWizardはステップごとに(ウィザード)入力可能なフォームを実装することができるjQueryプラグインです。フォームを入力するときに、一度にたくさんの項目があると「めんどくさいな……」と思ってしまいがちですが、このようにステップごとにゴールに近づいていく感じにすると、意外とスムーズに入力していけますよね。

入力項目を分割してわかりやすく

デモ

名前やメールアドレスなどを入力して「Forward」をクリックすると、次のステップへ移動します。同様に各項目を入力して進んでいくことでフォームの入力が完成します。前のステップに戻りたい場合は「Previous」をクリックすればOKです。

デモではフォーム画面の上部に、Account information、Company information、Billing informationがあり、現時点でどの場所にいるのかを確認できます。フォームの入力が完了するまで、あとどのくらいなのかを瞬時に把握できるので、ユーザーにも優しいですね。

また、「Forward」や「Previous」といった文字は、「nextBtnName」や「prevBtnName」の設定項目から好きな文字に変更可能です。

フォームを最初から全部表示するのではなくて、ステップごとに入力内容を分割してユーザーに入力させたい場合は、ぜひformToWizardを活用してみてはいかがでしょうか?

formToWizard

関連記事

  1. fullPage.js

    JavaScript

    フルページでコンテンツごとにスクロールする「fullPage.js」

    fullPage.jsはフルページでコンテンツごとにスクロールするレス…

  2. quick-select

    JavaScript

    素早く簡単に選択できるセレクトボックス「quick-select」

    quick-selectは素早く簡単に選択可能なセレクトボックスを実装…

  3. Philter

    JavaScript

    CSSのフィルターをコントロールできるjQueryプラグイン「Philter」

    PhilterはCSSのフィルターを簡単にコントロールすることができる…

  4. JavaScript

    JavaScriptでセレクトボックスから項目を選択したらリンク先にジャンプさせるやり方

    ちょっとした備忘録です。よく見るセレクトボックスから各項目を選択するだ…

  5. no-image

    JavaScript

    2枚の画像の違いを比較できるjQueryプラグイン「baSlider」

    baSliderはビフォー・アフターのような2枚の画像の違いを比較でき…

最近の記事

  1. リンツ リンドール
  2. ジェットストリームの三色ボールペン(+シャーペン付き)と黒の替芯
  3. ブラジルイパネマ

アーカイブ

PAGE TOP