WordPressのお問い合わせフォームプラグインは「MW WP Form」を使用することが多いです。
お問い合わせ系プラグインは「Contact Form 7」が断トツ有名ですが、
このプラグインでは入力した内容をページ遷移して確認することができないため、
確認画面を入れたいクライアントの場合は「MW WP Form」を使用しています。
Contact Fomm 7の確認画面について
ただページ遷移ができず、全て同じ画面で入力&確認を表示させる対応になってしまう。
page-contact.phpで入力画面
page-contact-confirm.phpで確認画面
とかはできない。
入力画面と確認画面が同じフォーマットとなり、ユーザにとっては微妙な操作感な気がします。
ただ、そもそも確認画面というのは日本独自の文化、という記事も目にするので、
個人的には入れなくていいんじゃないかなとは思いますが。
確認画面いらない場合→「Contact Form 7」
確認画面いれる場合→「MW WP Form」
という使い分けでいいと思います。
前置き長くなりました。
以下、「MW WP Form」を使う際の注意点&カスタマイズまとめです。
目次
- 1. URL設定
- 2. エラーメッセージ変更
- 3. セレクトボックス初期値を「選択してください」に変更
URL設定
下記の固定ページを作成している前提で進めます。
・お問い合わせページ
- page-contact.php
・お問い合わせ確認ページ
- page-contact-confirm.php
・お問い合わせ完了ページ
- page-contact-thanks.php
まず、パーマリンクの設定を確認します。
確認する部分は赤枠で囲んでいる部分。
最後にスラッシュがついているかどうかを確認しておきます。
※キャプチャは"カスタム構造"を選択していますが、他のパーマリンクを設定していたとしても確認する観点は同じ。最後にスラッシュがあるかないか。
次にプラグインのURL設定画面。
先ほどパーマリンク設定画面で、末尾にスラッシュがついている場合、
この画面のURL設定でも末尾にスラッシュをつける必要があります。
この部分を合わせずに設定してしまうと、永遠にリダイレクトループが発生してしまいます。
原因はわかりませんが、このプラグインの仕様のようです。
注意しましょう。
エラーメッセージ変更
エラーメッセージを変更したい時の処理。
MW WP Formには「バリデーションルール」から簡単にフォームチェックの設定ができます。
必須項目にチェックをつけたバリデーションルールの場合、
デフォルトのエラーメッセージは「未入力です。」と出力されます。
このエラーメッセージは画面からは変更できないので、
functions.phpにコードを追加し変更する必要があります。
上記バリデーションルールで、エラーメッセージを「入力してください。」に変更する場合。
下記をfunctions.phpに追加。
function my_validation_rule( $Validation ) {
$Validation->set_rule( 'name', 'noEmpty', array(
'message' => '入力してください。'
) );
return $Validation;
}
add_filter( 'mwform_validation_mw-wp-form-xxx', 'my_validation_rule' );
add_filterの引数にあるxxx部分は、フォーム識別子の番号に変更してください。
[mwform_formkey key="31"]だったら、xxxを31に変更。
set_ruleの第二引数について。
「必須項目」は「noEmpty」に対応していますが、その他の項目の場合は公式を参考にしてください。
バリデーションルール
(というか、ここに書いてあることは公式そのまんまです。。)
設定が複数ある場合は、こちらの書き方がスマートかと思います。
function my_exam_validation_rule( $Validation, $data, $Data ) {
$Validation->set_rule( 'name', 'noEmpty', array( 'message' => '入力してください。' ) );
$Validation->set_rule( 'check', 'required', array( 'message' => 'チェックを入れてください。' ) );
return $Validation;
}
add_filter( 'mwform_validation_mw-wp-form-xxx', 'my_exam_validation_rule', 10, 3 );
セレクトボックス初期値を「選択してください」に変更
セレクトボックスは何も設定しないと、一番初めの選択肢が初期値で表示される状態になります。
これを「選択してください」に変更します。
上記画面の通り、下記2点を変更
childrenに「:選択して下さい,」を追加。
「post_raw="true"」を追加。