フリーランス|WEB 制作経験丸7年、制作会社様からのご依頼に丁寧・高クオリティでお手伝いいたします。 IRODORI DESIGN

B L O G

【Contact Form 7】必須項目のエラーメッセージをカスタマイズする方法

Contact Form 7
WordPress
エラーメッセージ
カスタマイズ
必須項目

こんにちは、岐阜・名古屋を拠点に全国各地からご依頼いただくWEBサイトを制作しているフリーランスエンジニアの寺井です。

「Contact Form 7」はWordPressのプラグインのひとつで、簡単にお問い合わせフォームを作成することが出来る人気のプラグインです。
入力内容に不備がある場合の各種エラーメッセージはプラグインの管理画面から編集することが出来ますが、管理画面で設定出来る必須項目が入力されていない場合のエラーメッセージは一括管理のため、「お名前は必須項目です」や「メールアドレスは必須項目です」のように項目ごとにエラーメッセージを切り替えることは出来ません。

今回の記事ではそんな必須項目のエラーメッセージを項目ごとに変える方法をご紹介したいと思います。

管理画面の設定上での注意点

まず始めに、「Contact Form 7」で必須項目のエラーメッセージを設定する設定項目は管理画面に用意されていますが、項目ごとにエラーメッセージを切り替える場合、この項目は使用しません。

また、「Contact Form 7」で各フィールドが必須項目かどうかの判別は、各フィールド名の横に「」が付いているかどうかで判別されます。 「」が付いている場合、そのフィールドは必須項目と判定されます。

以下の画像は全フィールド、フィールド名の横に「*」が付いているので必須項目の設定です。

以下の画像は上の画像と異なり全フィールド、フィールド名の横に「*」が付いていないので任意の項目の設定です。

しかし、必須項目のエラーメッセージを項目ごとに切り替える場合は、そのフィールドに対して「*」を付けてはいけません。 「*」を付けてしまうと、これからご紹介するコードを追加しても管理画面上で設定した共通のエラーメッセージが表示されてしまいます。

必須項目のエラーメッセージをカスタマイズする方法

さて、ここからが本題です。
「Contact Form 7」で必須項目ごとにエラーメッセージを切り替える場合はフィールドごとに以下のコードをfunctions.phpに記述します。

テキスト

テキストフィールドの場合は以下のコードをfunctions.phpに記述します。サンプルコードではname属性を「your-name」としています。

function my_wpcf7_validation_error_message_name($result, $tag) {
    if ('your-name' == $tag->name) {
        if (empty($_POST[$tag->name])) {
            $result->invalidate($tag, 'お名前は必須項目です。');
        }
    }
    return $result;
}
add_filter('wpcf7_validate_text', 'my_wpcf7_validation_error_message_name', 10, 2);

メールアドレス

メールアドレスフィールドの場合は以下のコードをfunctions.phpに記述します。サンプルコードではname属性を「your-email」としています。

function my_wpcf7_validation_error_message_kana($result, $tag) {
    if ('your-kana' == $tag->name) {
        if (empty($_POST[$tag->name])) {
            $result->invalidate($tag, 'フリガナは必須項目です。');
        }
    }
    return $result;
}
add_filter('wpcf7_validate_text', 'my_wpcf7_validation_error_message_kana', 10, 2);

電話番号

電話番号フィールドの場合は以下のコードをfunctions.phpに記述します。サンプルコードではname属性を「your-tel」としています。

function my_wpcf7_validation_error_message_tel($result, $tag) {
    if ('your-tel' == $tag->name) {
        if (empty($_POST[$tag->name])) {
            $result->invalidate($tag, '電話番号は必須項目です。');
        }
    }
    return $result;
}
add_filter('wpcf7_validate_tel', 'my_wpcf7_validation_error_message_tel', 10, 2);

チェックボックス

チェックボックスフィールドの場合は以下のコードをfunctions.phpに記述します。サンプルコードではname属性を「your-type」としています。

function my_wpcf7_validation_error_message_type($result, $tag) {
    if ('your-type' == $tag->name) {
        if (empty($_POST[$tag->name])) {
            $result->invalidate($tag, 'お問い合わせ項目は必須項目です。');
        }
    }
    return $result;
}
add_filter('wpcf7_validate_checkbox', 'my_wpcf7_validation_error_message_type', 10, 2);

テキストエリア

テキストエリアフィールドの場合は以下のコードをfunctions.phpに記述します。サンプルコードではname属性を「your-comment」としています。

    if ('your-message' == $tag->name) {
        if (empty($_POST[$tag->name])) {
            $result->invalidate($tag, 'お問い合わせ内容は必須項目です。');
        }
    }
    return $result;
}
add_filter('wpcf7_validate_textarea', 'my_wpcf7_validation_error_message_message', 10, 2);

まとめ

いかがでしたか?
「Contact Form 7」のフック機能を使うことで管理画面上では設定出来ないこのような高度なカスタマイズを行うことが可能です。
エラーメッセージをカスタマイズすることでユーザビリティは格段にアップします。このような点まで配慮したWEBサイト作りを行っていきたいですね。