formToWizard

JavaScript

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

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

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

デモ

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

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

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

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

formToWizard

Illustratorで、かわいいガーリーなイメージの作り方前のページ

Webページにマーカー機能を実装できるjQueryプラグイン「markerPen」次のページmarkerPen

関連記事

  1. JavaScript

    jQueryプラグインのレスポンシブなカルーセルのスライダー「Elastislide」を使ってみた

    jQueryプラグインで画面のサイズによってレイアウトを合わせてくれる…

  2. Animsition
  3. jsPanel3

    JavaScript

    多機能なフローティングパネルを実装できるjQueryプラグイン「jsPanel3」

    jsPanel3は、高度で多機能なフローティングパネル(ウィンドウ)を…

  4. normalmap.js

    JavaScript

    インタラクティブなライティングエフェクトを実装できる「normalmap.js」

    normalmap.jsはシンプルでインタラクティブなライティングエフ…

  5. Brusher

    JavaScript

    インタラクティブな背景を実装できる「Brusher」

    Brusherはインタラクティブな背景を実装できる軽量なJavaScr…

  6. miSlider

    JavaScript

    複数の画像を表示したりスライドしたりできるスライダー「miSlider」

    miSliderは複数の画像やスライドの表示を可能にするスライダーを実…

最近の記事

  1. 梅
  2. CAR-HLD12BK
  3. OWL-LPB6701LA

アーカイブ

PAGE TOP