MW WP Formで作成したお問い合わせフォームには、バリデーションルールやreCAPTCHAを設定できます。
バリデーションルールに違反したりreCAPTCHA認証に失敗すると、サイト閲覧者にエラーメッセージが表示されますよね。
そのエラーメッセージをわかりやすく表示する方法について解説していきます。
この記事を書いた人
当ブログの信頼性・成長記録（開く）
【2023年2月5日】
過去28日間でGoogle検索における当ブログへのクリック数が6K（6000）クリックに到達しました。
- MW WP Formのエラーメッセージを変更（カスタマイズ）するコードの書き方と設置方法
MW WP Formの環境
入力ボックスの名前づけルールについて
MW WP Formで作成したお問い合わせフォームのエラーメッセージを変更（カスタマイズ）します。
コードのコピペ（コピー＆ペースト）で簡単に変更する方法を解説します。
コードには入力ボックスの名前が記されていますが、名前づけの対応表等は下記の記事をご覧ください。
▼本記事の前提となるお問い合わせフォームの作り方
reCAPTCHA v3が導入されていること
reCAPTCHAにはv3とv2があります。今回はreCAPTCHA v3のエラーメッセージを変更（カスタマイズ）します。
▼reCAPTCHA v3とv2の違い
▼reCAPTCHA v3をMW WP Formに設定する方法
reCAPTCHA v3のエラーメッセージは３種類ある
MW WP Formに設定したreCAPTCHA v3のエラーメッセージには「Enter reCAPTCHA Secret key.」「Failed reCAPTCHA access.」「Invalid reCAPTCHA Secret key.」の３種類があります。
| reCAPTCHA v3 エラーメッセージ | 意味 |
|---|---|
| Enter reCAPTCHA Secret key. | シークレットキーが未入力 |
| Failed reCAPTCHA access. | reCAPTCHA認証に失敗 |
| Invalid reCAPTCHA Secret key. | 時間切れ（タイムアウト） |
reCPATCHA v3は２分で時間切れ（タイムアウト）になります。
その２分の開始が「お問い合わせフォームが画面に表示された」時点か「送信ボタンを押した」時点かについて、reCAPTCHA for MW WP FormでreCAPTCHA v3を設定した場合は「お問い合わせフォームが画面に表示された」時点になります。
reCAPTCHA トークンは 2 分後に期限切れになります。
Google Developers reCAPTCHA v3 日本語訳
この３種類のエラーメッセージをそれぞれ次のように日本語化します。
| reCAPTCHA v3 エラーメッセージ | 日本語化 |
|---|---|
| Enter reCAPTCHA Secret key. | シークレットキーを入力してください。 |
| Failed reCAPTCHA access. | reCAPTCHA認証に失敗しました。 |
| Invalid reCAPTCHA Secret key. | タイムアウトしました。 お問い合わせフォームに再度アクセスしてください。 |
バリデーションルールのエラーメッセージを変更する
バリデーションルールで「必須項目」にチェックを入れた入力ボックスは、空欄のまま送信するとエラーメッセージが出ます。
MW WP Form の初期設定ではエラーメッセージが少々素っ気ないため、ユーザーにわかりやすく配置したいと思います。
下記が変更後のエラーメッセージです。お問い合わせフォームの冒頭と各入力ボックスの下にわかりやすい言葉で表示しています。
このエラーメッセージにする方法は、次のPHPコードをWordPressテーマの functions.php に入力します。
▼ functions.php の使い方
//お問い合わせフォームのエラーメッセージ変更
function my_validation_rule( $Validation ) {
$Validation->set_rule( 'imp1', 'noEmpty', array(
'message' => '※ 氏名が未入力です。'
) );
$Validation->set_rule( 'imp2', 'noEmpty', array(
'message' => '※ メールアドレスが未入力です。'
) );
$Validation->set_rule( 'imp4', 'noEmpty', array(
'message' => '※ 件名が未入力です。'
) );
$Validation->set_rule( 'imp5', 'noEmpty', array(
'message' => '※ 内容が未入力です。'
) );
$Validation->set_rule( 'imp3', 'eq', array(
'target' => 'imp2',
'message' => '※ メールアドレスが一致しません。'
) );
$Validation->set_rule( 'imp3', 'noEmpty', array(
'message' => '※ メールアドレス（再入力）が未入力です。'
) );
return $Validation;
}
add_filter( 'mwform_validation_mw-wp-form-xxx', 'my_validation_rule' );- 上記のコードではフック名が「mwform_validation_mw-wp-form-xxx」となっていますが、xxxの部分は、MW WP Formの（お問い合わせフォーム編集画面の）識別子を入れてください。
- 入力ボックスの名前（imp1〜5）は自分のサイトに合った名前を入力してください。
reCAPTCHA認証のエラーメッセージを変更する
reCAPTCHA v3のエラーメッセージを変更する方法は、次のPHPコードをWordPressテーマの functions.php に入力します。
//reCAPTCHAのエラーメッセージ変更
function my_error_message( $error, $key ) {
if ( $key === 'recaptcha-v3' ) {
$error = str_replace("Enter reCAPTCHA Secret key.", "※ シークレットキーを入力してください。", $error);
$error = str_replace("Failed reCAPTCHA access.", "※ reCAPTCHA認証に失敗しました。", $error);
$error = str_replace("Invalid reCAPTCHA Secret key.", "※ タイムアウトしました。お問い合わせフォームに再度アクセスしてください。", $error);
}
return $error;
}
add_filter( 'mwform_error_message_mw-wp-form-103', 'my_error_message', 10, 2 );
変更後のエラーメッセージはお問い合わせフォームの一番下に表示されます。
「Failed reCAPTCHA access.」のときは「reCAPTCHA認証に失敗しました」となっています。
「Invalid reCAPTCHA Secret key.」のときは「タイムアウトしました。お問い合わせフォームに再度アクセスしてください。」となっています。
▼reCAPTCHA v3のしきい値を変更する方法
エラーメッセージの表示場所を変更する方法
reCAPTCHA v3をMW WP Formに設定するとき、次のコードをお問い合わせフォームの編集画面に入力しました。
[mwform_hidden name="recaptcha-v3"]
[mwform_error keys="recaptcha-v3"]▼reCAPTCHA v3をMW WP Formに設定する方法
エラーメッセージは [mwform_error keys=”recaptcha-v3″] の位置に表示されます。
このコードの位置を変えれば、エラーメッセージの表示場所を変更できますよ。
ジュンペイお問い合わせフォームの一番上に表示してみました（下の画像）
