いつもお世話になっている WordPressのプラグイン『MW WP Form』。
ちょっとしたフォームを作成するのはもちろん、手の込んだフォームを作ることも可能です。
そんな『MW WP Form』の知っているとちょっと便利なTIPSを今回いくつか紹介したいと思います。
CONTENTS
セレクトボックスの「選択してください」を空欄として扱う
[mwform_select name="hoge" children=":選択してください,山,海,川" post_raw="true"]
ポイントは二つ。「:選択してください,」という内容を選択内容に含めること。もうひとつが「post_raw=”true”」を追加すること。
これで「選択してください」が空欄として扱われます。
セレクトボックスを必須項目に設定した際、「選択してください」のままだとバリデーションでエラーメッセージが表示されるようになります。
セレクトボックスやラジオボタンの選択内容によって送信先を分岐させる
functions.phpに以下の内容を追記します。
add_filter( 'mwform_admin_mail_mw-wp-form-●●●', 'mwform_change_mail_recipient', 10, 3 );
function mwform_change_mail_recipient( $Mail, $values, $Data ) {
$data_type = $Data->get( '▲▲▲' );
switch ( $data_type ) {
case '選択肢A':
$Mail->to = 'type-a@example.com';
break;
case '選択肢B':
$Mail->to = 'type-b@example.com';
break;
case '選択肢C':
$Mail->to = 'type-c@example.com';
break;
}
return $Mail;
}
●●●にはフォームのkey、▲▲▲にはセレクトボックスやラジオボタンのnameを。
caseのところに各選択肢とその選択肢が選ばれている時の送信先を記載します。
特定のページからフォームへ遷移した際、任意の値がセレクトボックスで選択された状態にしたい
いくつかの方法があると思いますが、今回紹介するのはjsでパラメータ(投稿のID)を取得。
その値によってセレクトボックスの中身を動的に変更します。
まずcommon.jsなどにパラメータ取得、その値によってセレクトボックスの中身を動的に変更する記述をします。
// パラメータの取得
var params = [];
var param = location.search.substring(1).split('&');
for(var i = 0; i < param.length; i++) {
params[i] = param[i].split('=');
}
// パラメータの使用
var target = 'post_id';
var value;
for(var i = 0; i < params.length; i++) {
if(params[i][0] == target) {
value = params[i][1];
break;
}
}
switch (value) {
case '111':
$("#select").val("Aについて");
break;
case '222':
$("#select").val("Bについて");
break;
case '333':
$("#select").val("Cについて");
break;
default:
//alert('それ以外');
break;
}
この場合は遷移元の投稿のIDが「111」の場合、遷移先のページ内(ここではフォームのあるページを想定)にある「#select」のIDがついたセレクトボックスの値を「Aについて」に変更するといった内容となります。
そしてこのjsを動かすために投稿のIDを取得する必要があり、今回は遷移元からフォームページへのリンクを一工夫。
<a href="/inquiry/?post_id=<?php echo $post->ID; ?>" class="btn">お問い合わせフォームへ</a>
これで「post_id」のパラメータに投稿のIDを渡せるようになります。
メールアドレスのバリデーションに全角禁止を追加する
MW WP Formの通常のバリデーションには全角だとエラーを出すという機能が見当たらず。。。
メールアドレスのバリデーションはあるんですが、@の有無だけで判断をするので「全角文字@hoge.com」というのが通ってしまうんですよね。
全角文字でもエラーメッセージを出すためには/plugins/mw-wp-form/classes/validation-rules内にあるclass.mail.phpを修正します。
/^[^@]+@([^@^\.]+\.)+[^@^\.]+$/
の部分を
/^([a-zA-Z0-9])+([a-zA-Z0-9\?\*\[|\]%'=~^\{\}\/\+!#&\$\._-])*@([a-zA-Z0-9_-])+\.([a-zA-Z0-9\._-]+)+$/
と変更。これで半角文字に制限する事が可能になります。
ただしこの方法だとプラグイン内のファイルをいじっているのでプラグインのアップデート時に元に戻ってしまうはず。
MW WP Formは色々なフィルターフックが用意されているので、functions.phpに追記するような方法が望ましいとは思うのですが、そこまではまだ検証出来てません。
公式サイトでもっと深く知る
いくつかのtipsを紹介させてもらいましたが、使っている機能などまだまだほんの一部。
公式サイトを見ていただければわかるのですが、できる事がたくさんあります。
マニュアルの作り方や機能の紹介の仕方などの視点で見ても面白く、とても参考になります。