はじめに
WordPressのお問い合わせフォームでよく使用されるプラグインのContact Form 7。
入力必須の項目に何も記入しなかった場合、エラーメッセージが表示される仕様になっています。
今回、そのエラーメッセージをデフォルトではなく、個別に指定したエラーメッセージを表示するようにカスタマイズしたので、その実装の過程で試したことや最終的にどういう風に実装したのか、記録として残そうと思います。
実装したいこと
デフォルトのエラーメッセージ
まず、Contact Form 7を適用した状態で、入力必須項目に何も記入しなかった場合の通常のエラーメッセージは下記の画像のように「入力してください。」が表示されます。
こちらのエラーメッセージを「お名前」、「メールアドレス」、「ご相談内容」の項目毎に文章を変更しようと思います。
試したこと
1.WordPressの管理画面上で設定
最初に目的の実装をするために試したこととして、WordPressの管理画面において、Contact Form 7の設定を変更できる箇所からエラーメッセージを変更しました。(赤枠のメッセージを変更しました。)
結果：全ての項目が「お名前を入力してください。」に変更された。
こちらの方法でも、「入力してください」というエラーメッセージの変更自体は、可能でしたが、全ての項目が変わってしまうため、それぞれの項目のエラーメッセージを個別に変更することはできませんでした。
参考サイト
2.functions.phpで設定
WordPressのfunctions.phpファイルに下記のコードを追加することで、エラーメッセージをカスタマイズする方法を試してみました。
function custom_wpcf7_validation_error_message($result, $tag)
{
//
if ('your_name' == $tag->name) {
if (empty($_POST[$tag->name])) {
$result->invalidate($tag, 'お名前を入力してください。');
}
}
return $result;
}
add_filter('wpcf7_validate_text', 'custom_wpcf7_validation_error_message', 10, 2);
下記の画像のWordPressの管理画面側のコンタクトフォームで記載した「your_name」と一致した場合、「お名前を入力してください」というエラーメッセージを表示するコードになります。
結果：デフォルトの「入力してください。」が表示された。
参考サイト
3.必須項目の設定を無効化
色々な方法を試しましたが、デフォルトのエラーメッセージしか表示されませんでした。
そこで、WordPressの管理画面側のコンタクトフォーム上の必須項目の設定を無効化した状態で、上記で試したfunctions.phpのコードを追加して検証しました。
下記の「*」を削除することで必須項目を無効化できる
下記のコードをfunctions.phpに追加する。
function custom_wpcf7_validation_error_message($result, $tag)
{
//
if ('your_name' == $tag->name) {
if (empty($_POST[$tag->name])) {
$result->invalidate($tag, 'お名前を入力してください。');
}
}
return $result;
}
add_filter('wpcf7_validate_text', 'custom_wpcf7_validation_error_message', 10, 2);
結果：エラーメッセージが「お名前を入力してください。」に変更された。
「メールアドレス」、「ご相談内容」の項目も同様にfunctions.phpに追加しました。
function custom_wpcf7_validation_error_email($result, $tag)
{
if ('your_email' == $tag->name) {
if (empty($_POST[$tag->name])) {
$result->invalidate($tag, 'メールアドレスを入力してください。');
}
}
return $result;
}
add_filter('wpcf7_validate_email', 'custom_wpcf7_validation_error_email', 10, 2);
function custom_wpcf7_validation_error_textarea($result, $tag)
{
if ('content' == $tag->name) {
if (empty($_POST[$tag->name])) {
$result->invalidate($tag, 'ご相談内容を入力してください。');
}
}
return $result;
}
add_filter('wpcf7_validate_textarea', 'custom_wpcf7_validation_error_textarea', 10, 2);
WordPressの管理画面側のコンタクトフォーム
(赤枠の変数が一致した場合、それぞれのエラーメッセージを表示する。)
実際の表示画面
まとめ
・WordPressの管理画面側のコンタクトフォームで必須項目に設定した場合、無条件でデフォルトのエラーメッセージ「入力してください。」が表示される。
・必須項目の設定を無効化した状態でfunctions.phpにコードを追加することでエラーメッセージをカスタマイズができる。
追加するコード
function custom_wpcf7_validation_error_message($result, $tag)
{
if ('your_name' == $tag->name) {
if (empty($_POST[$tag->name])) {
$result->invalidate($tag, 'お名前を入力してください。');
}
}
return $result;
}
add_filter('wpcf7_validate_text', 'custom_wpcf7_validation_error_message', 10, 2);
function custom_wpcf7_validation_error_email($result, $tag)
{
if ('your_email' == $tag->name) {
if (empty($_POST[$tag->name])) {
$result->invalidate($tag, 'メールアドレスを入力してください。');
}
}
return $result;
}
add_filter('wpcf7_validate_email', 'custom_wpcf7_validation_error_email', 10, 2);
function custom_wpcf7_validation_error_textarea($result, $tag)
{
if ('content' == $tag->name) {
if (empty($_POST[$tag->name])) {
$result->invalidate($tag, 'ご相談内容を入力してください。');
}
}
return $result;
}
add_filter('wpcf7_validate_textarea', 'custom_wpcf7_validation_error_textarea', 10, 2);