マルチステップなフォームをjQueryで擬似的に実装するスクリプト – multi-step-form.js

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

動作サンプル

開発の経緯

会員登録とかフィードバックとかで入力フォームがどうしても長くなる時ってありますよね？
長くてユーザーが入力する気がなくなってしまいそう…。でも絶対必要な項目だし。
そんな時には入力フォームをステップで分けて段階的に入力させれば、面倒な気持ちがちょっと和らぐかもしれません。でも、現行の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>

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

2. HTMLの調整

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

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

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

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

$(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 = 表示する / 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"
        }
}
};

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

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 – 公開

何か一言あれば！！

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

コメントを残すコメントをキャンセル

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

2 件のコメント

TK 2015年6月18日 1:43 PM

メールフォームの仕様で hidden を使わなければなりませんがhiddenをいれたら画面が真っ白になってしまいました。これってJSファイルとか直せば解消するんでしょうか？
1. よっしー投稿作成者2015年6月22日 10:41 PM
  
  返事が遅くなってしまいました。
  申し訳ございません。
  
  hiddenはどの箇所に加えましたか？

マルチステップなフォームをjQueryで擬似的に実装するスクリプト – multi-step-form.js

動作サンプル

開発の経緯

主な仕様

使い方とか

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

2. HTMLの調整

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

オプションとか

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

※念のため

更新履歴

関連

この記事につけられたタグ

気になんのコレ

何か一言あれば！！

コメントを残すコメントをキャンセル

2 件のコメント

動作サンプル

開発の経緯

主な仕様

使い方とか

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

2. HTMLの調整

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

オプションとか

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

※念のため

更新履歴

関連

この記事につけられたタグ

気になんのコレ

何か一言あれば！！

コメントを残す コメントをキャンセル

2 件のコメント

コメントを残すコメントをキャンセル