こんにちはrey( @reydesign8376) です
都内の勤務生活を辞めてWebデザイナーに。今は趣味のサーフィンなどしながら海沿いでのんびり暮らしています。
Contact Form 7で電話番号の入力欄を設置したものの
『090-1234-5678 ハイフン有り』の番号や
『ハイフン無し 09012345678』
どちらも許可したい…
でも文字入力は防ぎたい… 🤔
そんなこと、ありませんか?
今回は『ハイフン有り/無し両対応』と『数字で入力しているかチェック』する方法を解説していきます。
コピペOKです。ではいく〜
基本のフォームの設定の仕方はこちら👇
あわせて読みたい


WordPress お問い合わせフォーム 作り方|コンタクトフォーム7
お問い合わせフォームのカスタマイズ最終形態版です!コピペで繰り返し使えるので保存してね! そんな感じでWordPressのプラグインContact Form 7を作ってきます〜。 フ…
目次
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に追加するだけ
これだけでお問い合わせフォームの精度がぐっと上がります!
地味ですが、実務ではかなり大事な部分。
ぜひ試してみてください。
こちらも便利な設定です👇
【テキスト入力フォームでひらがな、カタカナのみの記入欄を作る方法】
あわせて読みたい


【 WordPress Contact Form 7 】テキスト入力フォームでひらがな、カタカナのみの記入欄を作る【コピペOK】
こんにちはrey( @reydesign8376) です お問合せフォームで、「名前のふりがなを入力するフォームなのに漢字でお問合せされてしまった!」なんてことを防ぐた…

