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

動作サンプル

• マルチステップのみのデフォルト指定
• エラーチェックを有効化
• ajaxZip3も使ってみるサンプル

開発の経緯

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

主な仕様

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

使い方とか

サンプルつきソースファイルはGitHubからダウンロードできます。 https://github.com/sato4yoshida/multi-step-form.js jsdo.it のreadmeやプラグインのコメントアウトあたりを読んでください！ マルチステップを有効にするだけでしたら、プラグインを読み込んで有効にするだけで簡単に実装できます。エラーチェックなど細かい指定はかなり複雑になるので多少のJavaScriptの知識が必要です。

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

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

<script src="./multi-step-form.js" charset="UTF-8"></script>

2. HTMLの調整

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

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

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

<script type="text/css">
$(function(){
    $("#form").MultiStepForm();
});
</script>

オプションとか

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

var multistepform_option = {
// 進捗表示（プログレスバー）の有無（true = 表示する / false = 非表示しない）
progressbar: true,
/*
* プログレスバー関連
* {i} と記述するとその工程の数（ステップ数）に置換します。
* {headline} と記述すると後述で指定したclass名のテキストに置換します。
*/
// ラベルの表記表示する項目
progressbar_label_text: 'Step {i}. {headline}',
// ラベルのテキストのclass名
progressbar_label_headline_class: 'step_headline',
// 次へ進むの表記
nextLabel: '次へ進む',
// 一つ前への表記
prevLabel: '一つ前へ',
};
/*
* 設定ここまで
*/

$("#form").MultiStepForm(multistepform_option); // オプションを指定してプラグインを有効化

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

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

var multistepform_option = {
// エラーチェック（バリデーション）の有効化（true）
validator: true,

// 各入力項目の設定（バリデーションがtrueの場合に指定）
/*
args:{
"要素のID":{
    type:"要素のタイプ属性",
    format:"チェックするタイプ" // number（数字のみ）, hiragana（ひらがなのみ）, katakana（カタカナのみ）, email（メールアドレス）, zipcode（郵便番号）,
    required: true or false // 必須入力にするか
}
}
*/
args:{
        "namae":{
            name:"namae",
            label:"お名前",
            type:"input",
            required:true
        },
        "namae_furigana":{
            name:"namae_furigana",
            label:"ふりがな",
            type:"input",
            format:"hiragana",
            required:true
        },
        "namae_katakana":{
            name:"namae_katakana",
            label:"フリガナ",
            type:"input",
            format:"katakana",
            required:true
        },
        "namae_alphabet":{
            name:"namae_alphabet",
            label:"お名前（アルファベット）半角英数字＆記号（-_）",
            type:"input",
            format:"alphabet",
            required:true
        },
        "year":{
            name:"year",
            label:"年",
            type:"select",
            format:"year",
            required:true
        },
        "month":{
            name:"month",
            label:"月",
            type:"select",
            format:"month",
            required:true
        },
        "date":{
            name:"date",
            label:"日",
            type:"select",
            format:"date",
            required:true
        },
        "sex":{
            name:"sex",
            label:"性別",
            type:"radio",
            required:true
        },
        "age":{
            name:"age",
            label:"年齢",
            type:"select",
            required:true,
            default_value: "選択してください。"
        },
        "genre":{
            name:"genre",
            label:"ジャンル",
            type:"checkbox",
            required:true
        },
        "ninni":{
            name:"ninni",
            label:"任意の選択",
            type:"checkbox"
        },
        "email":{
            name:"email",
            label:"メールアドレス",
            type:"input",
            format:"email",
            required:true
        },
        "email_conf":{
            name:"email_conf",
            label:"メールアドレス（再入力）",
            type:"input",
            format:"email",
            confirm:"email", // ←確認するIDを指定
            required:true
        },
        "phone":{
            name:"phone",
            label:"お電話番号",
            type:"input",
            format:"phone"
        },
        "zip01":{
            name:"zip01",
            label:"郵便番号",
            type:"input",
            format:"zipcode",
            required:true
        },
        "pref01":{
            name:"pref01",
            label:"都道府県",
            type:"input",
            format:"text",
            required:true
        },
        "addr01":{
            name:"addr01",
            label:"住所",
            type:"input",
            format:"text",
            required:true
        },
        "other":{
            name:"other",
            label:"備考欄",
            type:"textarea"
        }
}
};

※念のため

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

更新履歴

2013.06.05

ver. 1.3.1 – スマフォでの拡大時など描写サイズの変更時に表示がズレてしまう不具合を修正

2013.06.04

ver. 1.3 – ソースコード見直し

2013.06.04

ver. 1.0 – 公開