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. 10のjQueryスニペット

    JavaScript

    Webデザイナーが知っておくべき10のjQueryスニペット

    すべてのWebデザイナーが知っておくべき10のjQueryスニペットが…

  2. Dialogify

    JavaScript

    カスタマイズできるダイアログ・ライトボックスを作成できる「Dialogify」

    Dialogifyはカスタマイズできるダイアログやライトボックスなどを…

  3. DD Scroll Boxes
  4. simplePagination.js
  5. NO IMAGE
  6. no-image

    JavaScript

    インスタの写真や動画を表示できる軽量なjQueryプラグイン「Instagram Lite」

    Instagram Liteは指定したユーザーのインスタグラムの写真や…

最近の記事

  1. 芳醇な香りのラムレーズンサンド
  2. Aモーニングセット
  3. 白トリュフの塩パンやメロンパンなど
  4. 東京都現代美術館
  5. スーリア バターチキン

アーカイブ

PAGE TOP