【 WordPress Contact Form 7 】電話番号をハイフン有無&正しく入力チェックする方法【コピペOK】

  • URLをコピーしました!

こんにちはrey( @reydesign8376) です
都内の勤務生活を辞めてWebデザイナーに。今は趣味のサーフィンなどしながら海沿いでのんびり暮らしています。

Contact Form 7で電話番号の入力欄を設置したものの

『090-1234-5678 ハイフン有り』の番号や
『ハイフン無し 09012345678』

どちらも許可したい…
でも文字入力は防ぎたい… 🤔

そんなこと、ありませんか?

今回は『ハイフン有り/無し両対応』『数字で入力しているかチェック』する方法を解説していきます。

コピペOKです。ではいく〜

基本のフォームの設定の仕方はこちら👇

目次

Contact Form 7 側のフォーム設定

まずは通常通りテキストフィールドを作成します。

<div class="block">
    <div class="item detail">
        <span class="description">電話番号</span>
    </div>
    <div class="item value">
        [text* your-tel]
    </div>
</div>

タグは、your-tel を使います。

unctions.php に追加するコード

テーマの functions.php に以下を追加します。
これだけでハイフン有り/無し両対応と数字で入力しているかチェックができました。

// Contact Form 7 電話番号バリデーション
function wpcf7_validate_tel_number($result, $tag) {
    $tag = new WPCF7_FormTag($tag);
    $name = $tag->name;
    $value = isset($_POST[$name]) ? trim(wp_unslash($_POST[$name])) : '';

    if ($name === "your-tel") {

        // ハイフンを削除してチェック
        $tel = str_replace('-', '', $value);

        // 数字のみ&10〜11桁
        if (!preg_match('/^\d{10,11}$/', $tel)) {
            $result->invalidate($tag, "正しい電話番号を入力してください。");
        }
    }

    return $result;
}
add_filter('wpcf7_validate_text',  'wpcf7_validate_tel_number', 11, 2);
add_filter('wpcf7_validate_text*', 'wpcf7_validate_tel_number', 11, 2);

コードの詳細

① ハイフンを削除する

$tel = str_replace('-', '', $value);

ハイフンを取り除いてからチェックすることで有り・無しどちらにも対応します。

② 数字で入力しているかをチェック

preg_match('/^\d{10,11}$/', $tel
  • 数字のみ入力にします
  • 10〜11桁のみ記入

これで携帯・固定電話に対応します。

ハイフン必須にしたい場合は、以下👇

if (!preg_match('/^\d{2,4}-\d{2,4}-\d{3,4}$/', $value)) {
    $result->invalidate($tag, "ハイフンを含めて入力してください。");
}

さらに精度を上げるなら(スマホ番号限定)

携帯番号(070/080/090)のみにします。

if (!preg_match('/^0[789]0\d{8}$/', $tel)) {
    $result->invalidate($tag, "携帯電話番号を入力してください。");
}

まとめ

  • ハイフン有り/無し 両対応にする
  • 数字のみチェック
  • functions.phpに追加するだけ

これだけでお問い合わせフォームの精度がぐっと上がります!

地味ですが、実務ではかなり大事な部分。

ぜひ試してみてください。

こちらも便利な設定です👇
【テキスト入力フォームでひらがな、カタカナのみの記入欄を作る方法】

この記事が気に入ったら
フォローしてね!

share me!
  • URLをコピーしました!

この記事を書いた人

Webデザインとコーディングを中心に、html、CSSなどの現場で役立つWeb制作テクニックを発信してます。
デザインのトレンドを実務で即使えるテクニックや装飾アイデアでわかりやすいコード付きで解説しています。

目次