Wordpressのメールフォームプラグインは色々ありますが、私はよくMW WP Formを利用させていただいています。
理由としては
- メールの送信確認画面を表示できる
- 管理画面上で簡単にフォームの部品を作成できる
- 様々なアクションフック・フィルターフックがありメール送信内容やバリデーションルールをカスタマイズできる
- 解説（公式サイト）が日本語でわかりやすい
などがあります。
今回は、MW WP Form で選択された内容によって必須項目（バリデーションルール）を切り替える方法をご紹介します。
管理画面上でできること
MW WP Form を既にインストールしフォームを作成できていることを前提に話を進めます。
MW WP Form では、フォームを作成すると、フォームの管理画面上でフォーム部品のバリデーションルールを設定できます。
入力を必須にしたり、半角英数チェック・桁数チェックなど入力内容をチェックしたり、様々な内容を確認できます。
管理画面では、このように各種項目について様々なルールを設定できますが、たとえば
- 郵便番号が記入されていたときは住所を必須項目にする
など、選択内容に応じてバリデーションルールを変更することができません。
こういう場合は、以下に記載するようにfunction.phpを編集して対応しましょう。
function.phpでできること
選択項目に応じてバリデーションルールを変更する。
MW WP Form では、任意の入力フィールドへバリデーションを追加できるフィルターフックが用意されています。
このバリデーションルールは、メールフォームに内容が入力され「確認する」ボタンがクリックされた時に審査されます。
mwform_validation_mw-wp-form-xxx
/**
* my_validation_rule
* @param object $Validation
* @param array $data
* @param MW_WP_Form_Data $Data
* $Validation::set_ruleの引数は name属性値, バリデーション名, オプション
*/
function my_validation_rule( $Validation, $data, $Data ) {
$Validation->set_rule( 'お名前', 'noEmpty' );
$Validation->set_rule( '電話番号', 'tel', array( 'message' => 'それは電話番号じゃなかばい' ) );
$Validation->set_rule( '年齢', 'betweenn', array( 'min' => 18, 'max' => 60 ) );
return $Validation;
}
add_filter( 'mwform_validation_mw-wp-form-xxx', 'my_validation_rule', 10, 3 );
※[xxx]部分はフォームの識別子[mwform_formkey key="xxx"]の「xxx」の部分の数字に変更しておいてください。
使用例
郵便番号[zip]が入力されていたときは住所[address]を必須項目にしてみます。
/**
* my_validation_rule
* @param object $Validation
* @param array $data
* @param MW_WP_Form_Data $Data
* $Validation::set_ruleの引数は name属性値, バリデーション名, オプション
*/
function my_validation_rule( $Validation, $data, $Data ) {
if($data['zip']){
$Validation->set_rule( 'address', 'noEmpty' );
}
return $Validation;
}
add_filter( 'mwform_validation_mw-wp-form-xxx', 'my_validation_rule', 10, 3 );
このようにすると、入力された内容に応じてバリデーションルールを変更することができます。
※[xxx]部分はフォームの識別子[mwform_formkey key="xxx"]の「xxx」の部分の数字に変更しておいてください。
フォーム上の表示を変更する
バリデーションルールの設定ができたら、フォーム上の表示も変更してみましょう。
たとえば下記のようなフォームがあったとします。
<dl>
<dt>郵便番号</dt>
<dd id="zip">[mwform_zip name="zip" conv_half_alphanumeric="false"]</dd>
<dt>住所</dt>
<dd id="address">[mwform_text name="address" size="60"]</dd>
</dl>
必須時はdtにrequiredというクラスを付与することにします。
dt.required:after{
content: "必須";
padding: 10px 20px;
border-radius: 5px;
background: #ff0000;
color: #fff;
}
こんな感じです。
一例ですが、郵便番号用のテキストボックスが変更された時に住所を必須にするjQueryは、下記のようになります。
$(function() {
var $zip = $('#zip input');
var $address = $('#address input');
$zip.on('change', function(event) {
$address.parent('dd').prev('dt').addClass('required');
});
});
上記は例なので、実際のフォームにあわせて適宜変更してください。
最後に
MW WP Formは他にも入力された内容によって自動返信メール・管理者宛メールの内容を変更できるなど、本当にいろんなことができるメールフォームです。
公式サイトが既に詳しく説明してくれているので、そちらをくまなく見れば大抵のことは可能です。
このブログでも実際の使用例を含めて紹介していきたいと思います。
