LoginSignup
6

More than 5 years have passed since last update.

Contact Form 7のエラーメッセージをフックを使ってカスタマイズする

Last updated at Posted at 2016-03-14

目標

エラーメッセージ自体はフォーム生成画面のオプションから変更は可能ですが、例えば電話番号入力欄とFAX番号入力欄があった場合。

電話番号のバリデーションをかけると電話番号もFAX番号もバリデーションエラーメッセージが「電話番号の形式が正しくないようです。」と出てしまい、FAXのエラーメッセージのみ「FAX番号の形式が正しくないようです。」などに変更したくてもできない状況でした。

部分的にエラーメッセージを変更する方法を探しましたが公式のドキュメントやネットの海をさまよっても日本語での解説が少なかったためドキュメント化します。

方法

下記のコードをfunction.phpに追記します。

function hoge($error,$name){
    if($name === "対象のフォームのname値") {
        $error = '<span role="alert" class="wpcf7-not-valid-tip">FAX番号の形式が正しくないようです。</span>';
    }
    return $error;
}
add_filter('wpcf7_validation_error','hoge',10,2);

上記の方法はフォームが必須項目になっていない場合はそのまま使えますが、必須項目として使われていて、「必須項目に記入もれがあります。」などの文言を変更しない場合は条件を追記する必要があると思います。エラーメッセージ全部上書きされちゃうと思うので…

function hoge($error,$name){
    if($name === "対象のフォームのname値"  && $error=== "上書きしたいエラーメッセージ"  ) {
        $error = '<span role="alert" class="wpcf7-not-valid-tip">FAX番号の形式が正しくないようです。</span>';
    }
    return $error;
}
add_filter('wpcf7_validation_error','hoge',10,2);

のようにすればうまくいく気がします。まだ試してないです。
試したら結果おしえてくらさい^q^

\$error , \$nameをダンプしてやればそのフォームでどのネーム値のものにどのエラーメッセージが出ているかが出るので条件分岐の参考にして下さい。

解説

大抵のフォームプラグインにはフックの一つや2つあるでしょうと言う希望的観測の元プラグインソースコードを追ってみたところ
plugins/contact-form-7/includes/contact-form.php 466行目付近に下記の関数があります。

    public function validation_error( $name ) {
        $error = '';

        if ( $this->is_posted() ) {
            $submission = WPCF7_Submission::get_instance();

            if ( $invalid_field = $submission->get_invalid_field( $name ) ) {
                $error = trim( $invalid_field['reason'] );
            }
        }

        if ( ! $error ) {
            return $error;
        }

        $error = sprintf(
            '<span role="alert" class="wpcf7-not-valid-tip">%s</span>',
            esc_html( $error ) );

        return apply_filters( 'wpcf7_validation_error', $error, $name, $this );
    }

フォームのエラー画面に挿入されるメッセージのマークアップから検索をかけるとこの部分のみヒットするのでおそらくこの部分でエラーメッセージを生成しているんじゃなかろかと当たりをつけたのでコード読んでいくと

return apply_filters( 'wpcf7_validation_error', $error, $name, $this );

この記述でフィルターフックが追加されていることが分かりました。

あとはこの部分にfunctionから引っ掛けて上書きしてやるという流れです。

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
6