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. Quttons

    JavaScript

    ボタンの形状やカラーが変化するjQueryプラグイン「Quttons」

    Quttonsはボタンをクリックすると形状やカラーが変化して新しいコン…

  2. stickyTableColumns

    JavaScript

    水平(左右)にスライドできるテーブル実装「stickyTableColumns」

    stickyTableColumnsは、データ量の多い表をページで表現…

  3. JavaScript

    中心から外側に広がっていくエフェクトのjQueryプラグイン「jQuery.twinkle」

    jQuery.twinkleというjQueryプラグインを使えば、中心…

  4. suitabs

    JavaScript

    横や縦にスライドできるスライドショー&タブ実装のjQueryプラグイン「suitabs」

    suitabsはスライドショー&タブを実装することができるjQuery…

  5. NO IMAGE

    JavaScript

    レスポンシブ対応のスタイリッシュなスライドショー実装「offbeatSlider」

    offbeatSliderはレスポンシブに対応したアニメーション付きの…

最近の記事

  1. 田沢湖
  2. ゴムの耳栓
  3. ライオンコーヒー(バニラマカダミア)
PAGE TOP