MW WP Form の使い方

MW WP Form 公式マニュアルを公開しました。
http://plugins.2inc.org/mw-wp-form/

WordPressのフォーム生成プラグインは多数公開されていますが、企業ユースの場合、デザインの柔軟性やバリデーション機能、確認画面機能などで不便を感じることが少なくありませんでした。そこで、それらの点を改善した、柔軟なカスタマイズ性が魅力のフォーム生成WordPressプラグイン「MW WP Form」を作成しました。

ダウンロード

WordPressプラグインディレクトリ、もしくはWordPressの管理画面からダウンロードしてください。

デモ

フォーム管理画面でのフォーム作成方法

ダッシュボード > MW WP Form から「新規作成」をクリックします。

MW WP Form フォーム管理画面

MW WP Form フォーム管理画面

本文

新規作成画面が開きますので、本文入力欄にHTMLを入力してフォームを生成します。各フォーム項目のボタンがありますので、適当なものをクリックしてフォーム項目を追加できます(各フォーム項目にはname属性の指定が必要です)。

MW WP Form が入力画面、確認画面、完了画面のどのフォームを表示するかはクリックしたボタンで決定されます。確認画面が必要なフォームの場合は「戻る」「確認・送信」の2つのボタンを設置してください。確認画面が不要なフォームの場合は「送信」ボタンのみを設置してください。

ユーザー情報表示タグ

下記のタグを使うことで、ログイン中のユーザー情報を表示することができます。ログイン中でない場合は何も表示されません。

タグy 表示内容
{user_id} ユーザーID
{user_login} ログイン名
{user_email} メールアドレス
{user_url} WebサイトURL
{user_registered} 登録日時
{display_name} サイト上の表示ユーザー名

完了画面メッセージ

完了画面に表示したい内容を入力します。

URL設定

入力画面、確認画面、完了画面のURLをそれぞれ異なるものにしたい場合に入力します。同一のURLで変遷させる場合は未入力で構いません。

URL設定例

入力画面、完了画面が同一URLの場合

入力画面URL  
確認画面URL  
完了画面URL  

入力画面、確認画面、完了画面を個別URLで利用する場合

入力画面URL http://example.jp/form_input/
確認画面URL http://example.jp/form_confirm/
完了画面URL http://example.jp/form_complete/

バリデーションルール

各フォーム項目のバリデーションルールを設定できます。バリデーションルールを追加する場合は「バリデーションルールを追加」をクリックします。バリデーションボックスが追加されるので、バリデーションをかけたいフォーム要素のname属性を「バリデーションを適用する項目」に入力します。

バリデーションルールを削除する場合は、各バリデーションボックスの左上の表示される「x」をクリックします。

フォーム識別子

表示されているフォーム識別子をフォームを設置したいページに貼り付けます。もし個別URLのフォームの場合は、URL設定で入力したページに貼り付けてください。

自動返信メール設定・管理者宛メール設定

送信されるメールの内容を設定します。本文欄で{表示したいフォーム項目のname属性}と入力するとそのフォーム項目に変換されてメールが送信されます。

URL引数を有効にする

問い合わせデータをデータベースに保存

Akismet設定

ショートコード一覧

Akismetエラー(mwform_akismet_error)

Akismet設定を設定していてAkismetのエラーがある場合にAkismetのエラーを出力します。

戻るボタン(mwform_backButton)

確認画面表示時に戻るボタンを出力します。

属性 概要 初期値
value value属性 戻る

ボタン(mwform_button)

ボタンを出力します。

属性 概要 初期値
name name属性  
value value属性  

チェックボックス(mwform_checkbox)

チェックボックスを表示します。

属性 概要 初期値
name name属性  
children カンマ区切りで値を指定します。例:日本,アメリカ,中国  
value 初期値として選択状態にしたい値があればカンマ区切りで指定  
show_error バリデーションエラーがある場合に表示します。 true
separator 区切り文字 ,

日付(mwform_datepicker)

Datepickerを表示します。

属性 概要 初期値
name name属性  
size size属性 30
js jQuery UI Datepickerの引数を指定します。  
value value属性  
show_error バリデーションエラーがある場合に表示します。 true

エラーメッセージ(mwform_error)

バリデーションエラーを表示します。

属性 概要 初期値
keys バリデーションエラーを表示したい項目のname属性を指定します。複数ある場合はカンマ区切りで値を指定できます。例:氏名,住所,電話番号  

ファイルフィールド(mwform_file)

ファイルアップロードフィールドを出力します。確認画面ではアップロードしたファイルへのリンクが表示されます。

属性 概要 初期値
name name属性  
size size属性 60
show_error バリデーションエラーがある場合に表示します。 true

hiddenフィールド(mwform_hidden)

hiddenフィールドを出力します。

属性 概要 初期値
name name属性  
value value属性  
echo value値を画面上に表示する true

画像フィールド(mwform_image)

画像アップロードフィールドを出力します。確認画面ではアップロードした画像が表示されます。

属性 概要 初期値
name name属性  
size size属性 60
show_error バリデーションエラーがある場合に表示します。 true

パスワードフィールド(mwform_password)

パスワードフィールドを出力します。確認画面では「*****」という表示になります。

属性 概要 初期値
name name属性  
size size属性 60
maxlength maxlength属性 255
value 初期値が必要な場合に入力します。  
show_error バリデーションエラーがある場合に表示します。 true

ラジオボタン(mwform_radio)

ラジオボタンを表示します。

属性 概要 初期値
name name属性  
children カンマ区切りで値を指定します。例:日本,アメリカ,中国  
value 初期値として選択状態にしたい値があれば指定  
show_error バリデーションエラーがある場合に表示します。 true

セレクトボックス(mwform_select)

セレクトボックスを表示します。

属性 概要 初期値
name name属性  
children カンマ区切りで値を指定します。例:日本,アメリカ,中国  
value 初期値として選択状態にしたい値があれば指定  
show_error バリデーションエラーがある場合に表示します。 true

確認ボタン(mwform_previewButton)

入力画面表示時に確認ボタンを出力します。

属性 概要 初期値
value value属性 確認画面へ

送信ボタン(mwform_submit)

送信ボタンを出力します。

属性 概要 初期値
name name属性  
value value属性 送信する

確認・送信ボタン(mwform_submitButton)

(同一URLの場合に使用)確認ボタンと送信ボタンを自動出しわけ。

属性 概要 初期値
name 送信ボタン出力時のname属性  
preview_value 確認ボタン出力時のvalue属性 確認画面へ
submit_value 送信ボタン出力時のvalue属性 送信する

電話番号(mwform_tel)

電話番号フィールドを表示します。確認画面からの送信時は-区切りに変換されますが、入力画面からの送信時は配列で送信されるので注意。

属性 概要 初期値
name name属性  
show_error バリデーションエラーがある場合に表示します。 true

テキストフィールド(mwform_text)

テキストフィールドを出力します。

属性 概要 初期値
name name属性  
size size属性 60
maxlength maxlength属性 255
value 初期値が必要な場合に入力します。  
show_error バリデーションエラーがある場合に表示します。 true

テキストエリア(mwform_textarea)

テキストエリアを表示します。

属性 概要 初期値
name name属性  
cols cols属性 50
rows rows属性 5
value 初期値が必要な場合に入力します。  
show_error バリデーションエラーがある場合に表示します。 true

郵便番号(mwform_zip)

郵便番号フィールドを表示します。確認画面からの送信時は-区切りに変換されますが、入力画面からの送信時は配列で送信されるので注意。

属性 概要 初期値
name name属性  
show_error バリデーションエラーがある場合に表示します。 true

フック一覧

下記フック名の xxx は管理画面生成の場合 mw-wp-form-数字 となります。

mwform_validation_xxx

mwform_akismet_responce

mwform_mail_xxx

mwform_admin_mail_xxx

mwform_auto_mail_xxx

mwform_value_xxx

各フォーム項目のショートコードのvalue値を設定できるフック。$_GETなどの値をもとにvalue値を動的に設定したりすることが可能になります。ショートコードにてvalue値が設定されている場合はフックは反映されません。

mwform_choices_xxx

ラジオボタン、チェックボックス、セレクトボックスの選択項目を変更できるフック。このフックを使い、カスタム投稿やカスタムタクソノミー、ユーザーを選択肢に出すというようなこと可能になります。

管理画面を使わずにフォームを作成する

フォーム作成

管理画面を使わないでフォームを作成する場合は、任意のページ(入力・確認・送信の3ページ)に各フォーム項目のショートコードを直接記述します。また、各フォーム項目のショートコード群は「mwform」ショートコード内でのみ動作します。

[ mwform key="hoge"]
<dl>
	<dt>お名前</dt>
	<dd>[ mwform_text name="お名前" size="60"]</dd>
	<dt>趣味</dt>
	<dd>[ mwform_select name="趣味" children="野球,サッカー,映画,カメラ,その他"]</dd>
	<dt>備考</dt>
	<dd>[ mwform_textarea cols="50" rows="5"]</dd>
</dl>
<p>
	[ mwform_submit value="送信する"]
</p>
[ /mwform]
[ mwform_complete_message]
<p>
送信が完了しました。
</p>
[ /mwform_complete_message]

mwform

formタグを生成します。囲み型ショートコードとして利用します。

属性 概要 初期値
input (個別URL・確認画面ありの場合)確認画面用のページで戻り先URLを設定。  
preview (個別URL・確認画面ありの場合)入力画面用のページで確認画面URLを設定。  
complete (個別URL・確認画面ありの場合)確認画面用のページで完了画面URLを設定。  
key フォームの識別子。バリデーションやメール送信時のフォーム識別に利用します。 mwform

mwform_complete_message

(同一URLの場合に使用)送信完了時に完了メッセージを表示します。囲み型ショートコードとして利用します。

バリデーション

バリデーションは、functions.phpでアクションフック「mwform_validation_フォームの識別子」にフックさせることで行います。

// フォームの識別子が contactform の場合
add_filter( 'mwform_validation_contactform', 'mwform_validation_contact' );
function mwform_validation_contact( $v ) {
	// $v->setRule( 'バリデーションを行いたい項目のname属性値', 'バリデーションルール' ( , オプション[連想配列で指定] ) ) で指定
	// setRuleは$vを返すので、メソッドチェーン形式での指定も可能。
	$v->setRule( 'メールアドレス', 'noEmpty' );
	$v->setRule( 'メールアドレス', 'mail' );
	$v->setRule( 'テキスト', 'noEmpty' );
	$v->setRule( 'テキストエリア', 'noEmpty' );
	$v->setRule( '郵便番号', 'noEmpty' );
	$v->setRule( '郵便番号', 'zip' );
	$v->setRule( '電話番号', 'tel' );
	// 必ずvalidationオブジェクトをreturnします。
	return $v;
}

バリデーションルール一覧

required

必須チェックを行います。値の有無は関係なくPOSTされたかどうかで判定します。

オプション 概要 初期値
message エラーメッセージ 必須項目です。

noEmpty

値が空ではない場合にエラーを返します。値が「0」の場合でも許可されます。

オプション 概要 初期値
message エラーメッセージ 未入力です。

noFalse

値が空ではない場合にエラーを返します。値が「0」の場合は不可となります。

オプション 概要 初期値
message エラーメッセージ 未入力です。

alpha

値がアルファベットではない場合にエラーを返します。

オプション 概要 初期値
message エラーメッセージ 半角英字で入力してください。

numeric

値が数値ではない場合にエラーを返します。

オプション 概要 初期値
message エラーメッセージ 半角数字で入力してください。

alphaNumeric

値がアルファベットもしくは数値ではない場合にエラーを返します。

オプション 概要 初期値
message エラーメッセージ 半角英数字で入力してください。

katakana

値がカタカナではない場合にエラーを返します。

オプション 概要 初期値
message エラーメッセージ カタカナで入力してください。

zip

値が郵便番号の形式ではない場合にエラーを返します。

オプション 概要 初期値
message エラーメッセージ 郵便番号の形式ではありません。

tel

値が電話番号の形式ではない場合にエラーを返します。

オプション 概要 初期値
message エラーメッセージ 電話番号の形式ではありません。

mail

値がメールアドレスの形式ではない場合にエラーを返します。@の有無だけの簡易判別なので注意。

オプション 概要 初期値
message エラーメッセージ メールアドレスの形式ではありません。

url

値がURLの形式ではない場合にエラーを返します。

オプション 概要 初期値
message エラーメッセージ URLの形式ではありません。

eq

値が一致していない場合にエラーを返します。

オプション 概要 初期値
target 比較対象のname属性 null
message エラーメッセージ 一致しません。

between

値の文字数が範囲内でない場合にエラーを返します。

オプション 概要 初期値
min 最小文字数 0
max 最大文字数 0
message エラーメッセージ 文字数が正しくありません。

minLength

値の文字数が範囲内でない場合にエラーを返します。

オプション 概要 初期値
min 最小文字数 0
message エラーメッセージ 文字数が足りません。

in

値が、配列で指定された中に含まれていない場合にエラーを返します。

オプション 概要 初期値
options 配列で値を指定 array()
message エラーメッセージ 値が不正です。

date

値が日付の形式で無い場合にエラーを返します。

オプション 概要 初期値
message エラーメッセージ 日付の形式ではありません。

fileType

ファイルアップロードフィールド、画像アップロードフィールドからアップロードされたファイルの拡張子を参照し、アップロードを制限します。

オプション 概要 初期値
types 拡張子 カンマ区切りで拡張子を指定します。例:日本,アメリカ,中国
message エラーメッセージ 日付の形式ではありません。

fileSize

ファイルアップロードフィールド、画像アップロードフィールドからアップロードされたファイルのファイルサイズでアップロードを制限します。

オプション 概要 初期値
bytes ファイルサイズ ファイルサイズを指定します(単位:バイト)。
message エラーメッセージ 日付の形式ではありません。

メール送信

メール送信は、functions.phpでフィルターフック「mwform_mail_フォームの識別子」にフックさせることで行います。

// フォームの識別子がcontactformの場合
add_filter( 'mwform_mail_contactform', 'mwform_mail_contact', 10, 2 );
/**
 * @param  Mailオブジェクト  $m
 *         Array           $data  POSTされたデータ
 */
function mwform_mail_contact( $m, $data ) {
	// 管理者へ
	// 送信先を指定
	$m->to = 'inc@2nc.org';
	// 送信元を指定
	$m->from = 'inc@2nc.org';
	// 送信者を指定
	$m->sender = 'モンキーレンチ';
	// タイトルを指定
	$m->subject = 'contactformからメール送信がありました。';
	// 本文を指定
	// createBodyメソッドに連想配列を渡せば、「▼キー名(改行)値(改行)(改行)…」に変換します。
	// 第2引数でexcludeで、第1引数で指定した配列から除外する項目を指定できます。
	// もちろん、createBodyメソッドを使用せずに普通に文章を書いたり$dataを使っても構いません。
	$m->body = $m->createBody( $data, array( 'exclude' => array( 'token', 'submit' ) ) );
	// 送信
	$m->send();
	
	// 登録者へ
	if ( !empty( $data['メールアドレス'] ) ) {
		$m->to = $data['メールアドレス'];
		$m->from = 'inc@2nc.org';
		$m->sender = 'モンキーレンチ';
		$m->subject = 'contactformからのメール送信ありがとうございます。';
		$m->body = $m->createBody( $data, array( 'exclude' => array( 'token', 'submit' ) ) );
		$m->send();
	}
	return $m;
}

ダウンロード

WordPressプラグインディレクトリ、もしくはWordPressの管理画面からダウンロードしてください。

バグ・不具合があった場合や、セキュリティ的な面でお気づきなことなど、何かございましたらコメントやメールにてお知らせいただければと思います。