ステップ形式の入力フォームをjQueryで擬似的に実装するプラグインをつくりました。 → multi-step-form.js

動作サンプル

こんな感じで動きます。
すべての項目が表示されず「次へ」が現れます。 ステップ数も自動表示

開発の経緯

会員登録とかフィードバックとかで入力フォームがどうしても長くなる時ってありますよね?
長くてユーザーが入力する気がなくなってしまいそう…。でも絶対必要な項目だし。
そんな時には入力フォームをステップで分けて段階的に入力させれば、面倒な気持ちがちょっと和らぐかもしれません。でも、現行のPHPやCGIとかを触るのは結構たいへんなので、ここは簡易的にJavaScriptでやっちゃおう。ということです。

主な仕様

  • 特定のIDの子要素から自動的に段階的に表示
  • 自動生成のプログレスバーによるステップ数、進捗の表示
  • 入力内容のチェック(必須入力、ひらがなカタカナ、メール、電話番号などなど)
  • マルチステップや入力チェック、プログレスバーの有効化、無効化

使い方とか

サンプルつきソースファイルはGitHubからダウンロードできます。
https://github.com/sato4yoshida/multi-step-form.js

jsdo.it のreadmeやプラグインのコメントアウトあたりを読んでください!

マルチステップを有効にするだけでしたら、プラグインを読み込んで有効にするだけで簡単に実装できます。エラーチェックなど細かい指定はかなり複雑になるので多少のJavaScriptの知識が必要です。

1. プラグインを読み込む

プラグインファイルを読み込みます。(jQueryも忘れずに)

2. HTMLの調整

指定した要素の子要素1つ1つが各ステップになります。フォームタグにIDやclassを割り当てて、子要素をつくって各入力項目を作ってください。

3. プラグインを有効にします。

HTMLソースに以下の記述をすることで有効になります。セレクターは適切に書き換えてください。

オプションとか

いろいろな機能を使うにはオプションを指定する必要があります。

入力内容のエラーチェック機能

入力内容のエラーチェック機能もついています。少々複雑ですが、以下のようにオプションに追記します。

※念のため

このスクリプトは現行のフォームに、実装するためのものです。メールを送信するものではありません。

更新履歴

2013.06.05
ver. 1.3.1 – スマフォでの拡大時など描写サイズの変更時に表示がズレてしまう不具合を修正
2013.06.04
ver. 1.3 – ソースコード見直し
2013.06.04
ver. 1.0 – 公開

何か一言あれば!!

質問とかツッコミとかお気軽にコメントしてください。がんばって返します。

コメントを残す

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

2 件のコメント

  1. メールフォームの仕様で hidden を使わなければなりませんがhiddenをいれたら画面が真っ白になってしまいました。これってJSファイルとか直せば解消するんでしょうか?

    1. よっしー 投稿作成者

      返事が遅くなってしまいました。
      申し訳ございません。

      hiddenはどの箇所に加えましたか?