Contact Form 7は簡単にお問い合わせフォームを作ることが出来るWordPressの人気プラグイン。
このプラグインにはメールアドレスや電話番号専用の入力フィールドは用意されていますが、郵便番号専用のフィールドは用意されていません。
そのため、郵便番号用の入力フィールドを用意しますが、正しい郵便番号かどうかをチェックするには、自分でプログラムを書く必要があります。
この記事では、Contact Form 7で入力された郵便番号の形式が正しいか動かをチェックする方法をご紹介したいと思います。

完成コード

Contact Form 7のフォームの設定は以下のようにします。

<label>郵便番号：[text* your-postal-code]</label>

[submit "送信"]

name属性は、your-postal-codeとします。

続いて、有効化されているテーマのfunctions.phpに以下のユーザー関数を記述します。

function custom_postal_code_validation_filter( $result, $tag ) {
    $tag = new WPCF7_FormTag( $tag );

    if ( 'your-postal-code' == $tag->name ) {
        $postal_code = isset( $_POST['your-postal-code'] ) ? trim( $_POST['your-postal-code'] ) : '';

        if ( ! preg_match( '/^\d{3}-\d{4}$/', $postal_code ) ) {
            $result->invalidate( $tag, "郵便番号の形式が正しくありません。123-4567の形式で入力してください。" );
        }
    }

    return $result;
}

add_filter( 'wpcf7_validate_text*', 'custom_postal_code_validation_filter', 10, 2 );
add_filter( 'wpcf7_validate_text', 'custom_postal_code_validation_filter', 10, 2 );

name属性を、your-postal-codeとしていれば、上のコードをコピペするだけで実装することが出来ます。

コードの解説

ここからはコードの解説です。

フィルターフックの追加

add_filter( 'wpcf7_validate_text*', 'custom_postal_code_validation_filter', 10, 2 );
add_filter( 'wpcf7_validate_text', 'custom_postal_code_validation_filter', 10, 2 );

ユーザー関数のcustom_postal_code_validation_filter()をContact Form 7のフィルターフックのwpcf7_validate_text、wpcf7_validate_text*、それぞれに設定します。
2つ設定するのは、郵便番号の入力欄が必須、必須でない、どちらの場合にも対応するためです。

wpcf7_validate_text*が必須用、wpcf7_validate_textが必須ではない場合用です。

ユーザー定義の関数を作成

次に、ユーザー定義の関数を作成します。この関数は、name属性がyour-postal-codeフィールドの値をチェックし、郵便番号の形式かどうかを確認します。

if ($tag->name == 'confirm-email') { ... }

name属性がyour-postal-codeフィールドの場合に、郵便番号の形式かどうかのチェックを行うためのif文です。
このif文の分岐により、name属性がyour-postal-codeの場合だけ、動作するようになります。

$postal_code = isset( $_POST['your-postal-code'] ) ? trim( $_POST['your-postal-code'] ) : '';

入力された値を取得し、$postal_codeの変数に格納します。

if ( ! preg_match( '/^\d{3}-\d{4}$/', $postal_code ) ) {
    $result->invalidate( $tag, "郵便番号の形式が正しくありません。123-4567の形式で入力してください。" );
}

preg_match()関数を使い、入力された値が指定した形式かどうかをチェックします。
今回の例では/^\d{3}-\d{4}$/となっています。これは「123-4567」の3桁-4桁の形式のみを正しい郵便番号の形式と判定します。
入力値が指定された形式ではない（!==）場合、[text* 'your-postal-code]のエラー文章に「郵便番号の形式が正しくありません。123-4567の形式で入力してください。」をセットします。
このエラー文章が送信ボタンを押された時、[text* 'your-postal-code]の入力欄のすぐ下に表示されるようになります。

これにより、Contact Form 7のフォーム送信時に、郵便番号フィールドの入力値をチェックし、指定した形式ではない場合、エラーメッセージが表示されるようになります。

その他の形式の場合

7桁（ハイフン無し）の場合

7桁（ハイフン無し）の場合は、以下のコードをfunctins.phpに記述します。

function custom_postal_code_validation_filter( $result, $tag ) {
    $tag = new WPCF7_FormTag( $tag );

    if ( 'your-postal-code' == $tag->name ) {
        $postal_code = isset( $_POST['your-postal-code'] ) ? trim( $_POST['your-postal-code'] ) : '';

        if ( ! preg_match( '/^\d{7}$/', $postal_code ) ) {
            $result->invalidate( $tag, "郵便番号の形式が正しくありません。ハイフン無しの7桁の数字で入力してください。" );
        }
    }

    return $result;
}

add_filter( 'wpcf7_validate_text*', 'custom_postal_code_validation_filter', 10, 2 );
add_filter( 'wpcf7_validate_text', 'custom_postal_code_validation_filter', 10, 2 );

3桁-4桁、7桁（ハイフン無し）どちらにも対応させる場合

3桁-4桁、7桁（ハイフン無し）のどちらにも対応させる場合は、以下のコードをfunctins.phpに記述します。

function custom_postal_code_validation_filter( $result, $tag ) {
    $tag = new WPCF7_FormTag( $tag );

    if ( 'your-postal-code' == $tag->name ) {
        $postal_code = isset( $_POST['your-postal-code'] ) ? trim( $_POST['your-postal-code'] ) : '';

        if ( ! preg_match( '/^\d{3}-?\d{4}$/', $postal_code ) ) {
            $result->invalidate( $tag, "郵便番号の形式が正しくありません。123-4567または1234567の形式で入力してください。" );
        }
    }

    return $result;
}

add_filter( 'wpcf7_validate_text*', 'custom_postal_code_validation_filter', 10, 2 );
add_filter( 'wpcf7_validate_text', 'custom_postal_code_validation_filter', 10, 2 );

まとめ

いかがでしたか？
郵便番号を入力してもらう場合は、このコードも忘れずに記述し、形式が正しいかチェックするようにしましょう。