ContactForm7で名前フリガナ・郵便番号・年齢・条件分岐などの詳細なバリデーションを追加する【コピペ用コード】

2019年7月10日ContactForm7でおしゃれ&多機能カスタマイズ

前回の記事で方法がわかったところで、自分でバリデーションの条件を作れるほどPHPの知識がない……という方のために基本的なバリデーションのコピペ用コードを作りました!

目的に合わせたコードを選び、自分が設置しているフォームの項目名を入力するだけ。

便利に使ってください。

コピペでバリデーション

関連記事

ContactForm7のデフォルトの機能でできるバリデーション

ContactForm7で元々できるバリデーションをわざわざ追加する必要はありません。

メールアドレスやURL、承諾確認などが代表的な例です。

メールアドレスに関しては、日本で昔使われていたメールアドレスの形式が使えないなどの問題があるとの声が出ているので、ContactForm7のデフォルトは使わないことにします。

電話番号・URL・数値・日付・承諾確認は変わった動作を行わない限りは一般的なContactForm7の使い方でOKです。

範囲を指定するバリデーション

数値では最小値と最大値を指定できます。

年齢を入力させて、20歳から60歳までしか登録できないようにするためには、このようにします。

[date* birthday min:’today-60years’ max:’today-20years’ id:birthday class:input-box]

Step:3……3の倍数など、指定した数値の倍数のみを受け付ける。

↑このような指定もありますが、わかりにくいのでドロップダウンで選択できるようにするか、数値の入力ラベルの横にセット(3個入り)などとして入力させる方が良いでしょう。


日付でも最小値と最大値を指定できます。

誕生日を入力させ、20歳から60歳までしか登録できないようにするためには、

[date* birthday min:’today-60years’ max:’today-20years’ id:birthday class:input-box]

このようにします。

todayに続けて+か-をつけ、〇days・〇weeks・〇months・〇yearsなどで〇日後(前)・〇週間後(前)・〇ヵ月後(前)・〇年後(前)を指定できます。

日付項目でもstepが使えます。日付項目ではstep:7と指定することで同じ曜日の日付を選択させることが出来るでしょう。

予約日時などで使う場合は、入力してから間違いを知らされるバリデーションの形式ではわかりづらいです。

「月曜日と火曜日以外」などと詳細に条件を指定して日付を選ばせる場合には使えません。

機能が充実した予約フォームを作るにはContactForm7ではなくMTS Simple Booking-Cプラグインを使うのがおススメです。

ContactForm7に入力確認(バリデーション)を追加する

まずはバリデーションを追加するためのWordPress関数をfunctions.phpに追加します。

/**
* contact-form-7でバリデーションを追加
*/
add_filter('wpcf7_validate_text', 'wpcf7_validate_post', 11, 2);
add_filter('wpcf7_validate_text*', 'wpcf7_validate_post', 11, 2);
function wpcf7_validate_post($result,$tag){
$tag = new WPCF7_Shortcode($tag);
$name = $tag->name;
$value = isset($_POST[$name]) ? trim(wp_unslash(strtr((string) $_POST[$name], "\n", " "))) : "";
//$nameはContactForm7のフォーム要素(input等)のname="この部分"
//$valueはユーザーが入力した(選択した)値
//
//ここから項目を指定してバリデーションの追加
//

//
//ここまでバリデーションの追加
return $result;
}

この関数の枠の中身に、PHPで作ったバリデーションのコードを追加していきます。

注意として、ここに追加する場合は[text your-name]などテキストのタイプで作られたフォームでしか使えません。

ContactForm7のバリデーションと重複しないように項目のタイプはtextで作成してからこのfunctions.phpのコードでバリデーションします。

textareaなどで使用したい場合は、次のコードの中に追加して使いましょう。

/**
* contact-form-7でバリデーションを追加
*/
add_filter('wpcf7_validate_textarea', 'wpcf7_validate_post_textarea', 11, 2);
add_filter('wpcf7_validate_textarea*', 'wpcf7_validate_post_textarea', 11, 2);
function wpcf7_validate_post_textarea($result,$tag){
$tag = new WPCF7_Shortcode($tag);
$name = $tag->name;
$value = isset($_POST[$name]) ? trim(wp_unslash(strtr((string) $_POST[$name], "\n", " "))) : "";
//$nameはContactForm7のフォーム要素(input等)のname="この部分"
//$valueはユーザーが入力した(選択した)値
//
//ここから項目を指定してバリデーションの追加
//

//
//ここまでバリデーションの追加
return $result;
}

名前とフリガナで全角日本語の文字種を指定するバリデーション

名字と名前で全角日本語のみを使用させるコード

/**
*名字 名前
**/
//ここから名字
if ($name === "your-lastname") {
//your-lastnameという名前のフォームに対して
if(!preg_match("/^[ぁ-んァ-ヶー一-龠]+$/", $value)) {
//if(!この部分はPHPで指定)は指定したい条件に当てはまらない(!)場合は
if (method_exists($result, 'invalidate')) {
$result->invalidate( $tag,"全角日本語のみで入力してください");
} else {
$result['valid'] = false;
$result['reason'][$name] = '全角日本語のみで入力してください';
}
//条件を変えた場合は文言も書き換えておく。
}
}
//ここから名前
if ($name === "your-firstname") {
//your-firstnameという名前のフォームに対して
if(!preg_match("/^[ぁ-んァ-ヶー一-龠]+$/u", $value)) {
//if(!この部分はPHPで指定)は指定したい条件に当てはまらない(!)場合は
if (method_exists($result, 'invalidate')) {
$result->invalidate( $tag,"全角日本語のみで入力してください");
} else {
$result['valid'] = false;
$result['reason'][$name] = '全角日本語のみで入力してください';
}
//条件を変えた場合は文言も書き換えておく。
}
}

最初に追加したコードの中に入れる

名前と名字で全角カタカナを使用させるコード。(コメントアウトしてある部分にひらがな版のコードあり)

/**
*名字のフリガナ 名前のフリガナ
**/
if ($name === "your-lastname-kana") {
//"your-lastname-kana"を適用したいフォーム項目の名前に書き換える
if(!preg_match("/^[ア-ヶー]+$/u", $value)) {
//if(!preg_match("カタカナ",$value))に当てはまらない(!)場合は
// if(!preg_match("/^[ぁ-ん]+$/u", $value)) { ひらがなのふりがなを使用する場合はこのコードに置き変える。
if (method_exists($result, 'invalidate')) {
$result->invalidate( $tag,"全角カタカナで入力してください");
} else {
$result['valid'] = false;
$result['reason'][$name] = '全角カタカナで入力してください';
}
}
//条件を変えた場合は文言も書き換えておく。
}
if ($name === "your-firstname-kana") {
//"your-firstname-kana"を適用したいフォームの名前に書き換える。
if(!preg_match("/^[ア-ヶー]+$/u", $value)) {
//if(!preg_match("全角カタカナ",$value))に当てはまらない(!)場合は
// if(!preg_match("/^[ぁ-ん]+$/u", $value)) { ひらがなのふりがなを使用する場合はこのコードに置き変える。
if (method_exists($result, 'invalidate')) {
$result->invalidate( $tag,"全角カタカナで入力してください");
} else {
$result['valid'] = false;
$result['reason'][$name] = '全角カタカナで入力してください';
}
}
//条件を変えた場合は文言も書き換えておく。
}

最初に追加したコードの中に入れる

郵便番号を半角で入力させるバリデーション

さやっと。で紹介している郵便番号を自動入力させるコードを使っている場合は、このコードのデフォルトの半角7桁の方を使ってくださいね。

/**
*郵便番号
**/
if ($name === "zipcode") {
//"zipcode"を適用したいフォーム項目の名前に書き換える([text zipcode]の形でフォームは作成する)
if(!preg_match("/^[0-9]{7}/", $value)) {
//if(!preg_match("7桁の半角数字",$value))に当てはまらない(!)場合は。という記述
// if(!preg_match("/^\d{3}-\d{4}$/", $value)) { ハイフンを使用する場合はこのコードに置き変える。
if (method_exists($result, 'invalidate')) {
$result->invalidate( $tag,"半角7桁の郵便番号を入力してください");
} else {
$result['valid'] = false;
$result['reason'][$name] = '半角7桁の郵便番号を入力してください';
}
}
//条件を変えた場合は文言も書き換えておく。
}

最初に追加したコードの中に入れる

メールアドレスの形式と確認用メールアドレスを一致させるバリデーション

メールアドレスの形式で入力させるコード

/**
*メールアドレス
**/
if ($name === "your-email") {
//"your-email"を適用したいフォーム項目の名前に書き換える([text your-email]の形でフォームは作成する)
if(!preg_match("/^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/", $value)) {
//if(!preg_match("メールアドレスの形式",$value))に当てはまらない(!)場合は
if (method_exists($result, 'invalidate')) {
$result->invalidate( $tag,"メールアドレスの形式が正しくありません");
} else {
$result['valid'] = false;
$result['reason'][$name] = 'メールアドレスの形式が正しくありません';
}
}
//条件を変えた場合は文言も書き換えておく。
}

最初に追加したコードの中に入れる

確認用メールアドレスと一致していないとエラーを出すコード

(同じ名前で-2と付いたフォーム項目が他にもある場合(your-telとyour-tel-2など)、その項目にも適用されてしまうので注意!)

/**
*確認用メールアドレスを一致させる
**/
if (preg_match('/(.*)-2$/', $name, $matches)){
$target_name = $matches[1];
//値を再入力させたいフォームがyour-emailなら、確認用はyour-email-2とし、この記述で【your-email-2】と付いたフォームに対して適用
if ($_POST[$name] != $_POST[$target_name]) {
//your-email($_POST[$name])とyour-email-2($_POST[$target_name])の値が一致しなかった(!)ら
if (method_exists($result, 'invalidate')) {
$result->invalidate( $tag,"確認用のメールアドレスが一致していません");
} else {
$result['valid'] = false;
$result['reason'][$name] = '確認用のメールアドレスが一致していません';
}
}
//条件を変えた場合は文言も書き換えておく。
}

最初に追加したコードの中に入れる

スパム対策にも使える!名前の入力項目やお問合せのメッセージが英数字だけだと送信できないようにするコード

前回の記事でも紹介していますが。

/**
* スパム対策で英数字のみを禁止するバリデーション
*/
if($name === "your-name") {
//"your-name"を適用したいフォーム項目の名前に書き換える([text your-name]の形でフォームは作成する)
if(preg_match("/^[a-zA-Z0-9_\-.]+$/",$value)){
if (method_exists($result, 'invalidate')) {
$result->invalidate( $tag,"半角英数字のみの場合は送信できません。");
} else {
$result['valid'] = false;
$result['reason'][$name] = '半角英数字のみの場合は送信できません。';
}
}
}

最初に追加したコードの中に入れる

番外編:チェックボックスの選択数を必須にするバリデーション

このコードは先ほどのfuncionの中ではなく、単体で一番下に追加してください。

※ちょっと適当につくったコードなので、取り扱い注意です。これを参考に動作をしっかり確認しながら調整して使用してください。

/**
* contact-form-7でチェックボックスのバリデーションを追加
*/
add_filter('wpcf7_validate', 'wpcf7_validate_post_checkbox', 11, 2);
function wpcf7_validate_post_checkbox($result,$tag){
$form = WPCF7_Submission::get_instance();
$posted_datas = $form->get_posted_data();
if ( count( $posted_datas['check-example'] ) < 3 ) { //'check-example'で選択されたチェックボックスが3つよりも少なかったら $result->invalidate( 'check-example', '3つ以上選択してください。' );
//'check-example'でバリデーションをする。
}

return $result;
}

最初に追加したコードの中ではなく、単体で追加する

ラジオボタンやチェックボックスの選択など、条件によって必須項目に変えるバリデーション

指定したフォーム項目の値にチェックが入っていたら、指定したフォーム項目を必須項目にするというバリデーションもできます。

こちらは最初に追加したfunctionの中に記述してください。

/**
* ラジオボタンやチェックボックスの値によって条件分岐して必須項目にする
*/
if(isset($_POST["contact-select"]) && ($_POST["contact-select"]=="LINE")){
//$_POST["この名前のラジオボタンやチェックボックス"]が存在する&$_POST["contact-select"]で選んだのが="LINE"だった場合に
if ($name === "line-name") {
//"line-name"というフォーム項目の
if(empty($value)) {
//値($value)が空(empty)だったら
if (method_exists($result, 'invalidate')) {
$result->invalidate( $tag, 'LINE名を入力してください');
} else {
$result['valid'] = false;
$result['reason'][$name] = 'LINE名を入力してください';
}
//バリデーションを実行
}
}
}

最初に追加したコードの中に入れる

条件となるラジオボタンやチェックボックスの名前と、条件を適用させる場合の値、条件を適用させて必須項目にするフォーム項目の名前、エラー文言を書き換えて使ってください。

さやっと。で紹介したフォーム項目が変わるフォームでそのまま使えるコピペコード

if(isset($_POST["contact-select"]) && ($_POST["contact-select"]=="メール")){
if($name === "your-email"){
if(empty($value)) {
if (method_exists($result, 'invalidate')) {
$result->invalidate( $tag, 'メールアドレスを入力してください');
} else {
$result['valid'] = false;
$result['reason'][$name] = 'メールアドレスを入力してください';
}
} else {
if(!preg_match("/^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/", $value)) {
if (method_exists($result, 'invalidate')) {
$result->invalidate( $tag,"メールアドレスの形式が正しくありません");
} else {
$result['valid'] = false;
$result['reason'][$name] = 'メールアドレスの形式が正しくありません';
}
}
}
}
if($name === "your-email-2"){
if(empty($value)) {
if (method_exists($result, 'invalidate')) {
$result->invalidate( $tag, 'メールアドレスを入力してください');
} else {
$result['valid'] = false;
$result['reason'][$name] = 'メールアドレスを入力してください';
}
}
}
if (preg_match('/(.*)-2$/', $name, $matches)){
$target_name = $matches[1];
if ($_POST[$name] != $_POST[$target_name]) {
if (method_exists($result, 'invalidate')) {
$result->invalidate( $tag,"確認用のメールアドレスが一致していません");
} else {
$result['valid'] = false;
$result['reason'][$name] = '確認用のメールアドレスが一致していません';
}
}
}
}
if(isset($_POST["contact-select"]) && ($_POST["contact-select"]=="LINE")){
if ($name === "line-name") {
if(empty($value)) {
if (method_exists($result, 'invalidate')) {
$result->invalidate( $tag, 'LINE名を入力してください');
} else {
$result['valid'] = false;
$result['reason'][$name] = 'LINE名を入力してください';
}
}
}
}
if(isset($_POST["contact-select"]) && ($_POST["contact-select"]=="Twitter")){
if ($name === "twitter-id") {
if(!preg_match("/^@[a-zA-Z0-9_\-.]{3,15}$/", $value)) {
if (method_exists($result, 'invalidate')) {
$result->invalidate( $tag,"半角@+TwitterIDの形式で入力してください");
} else {
$result['valid'] = false;
$result['reason'][$name] = '半角@+TwitterIDの形式で入力してください';
}
}
}
if ($name === "twitter-name") {
if(empty($value)) {
if (method_exists($result, 'invalidate')) {
$result->invalidate( $tag, 'Twitter名を入力してください');
} else {
$result['valid'] = false;
$result['reason'][$name] = 'Twitter名を入力してください';
}
}
}
}

if(isset($_POST["contact-select"]) && ($_POST["contact-select"]=="Skype")){
if ($name === "skype-id") {
if(!preg_match("/^[a-zA-Z0-9_\-.]{3,50}$/", $value)) {
if (method_exists($result, 'invalidate')) {
$result->invalidate( $tag,"Skype名の形式で入力してください");
} else {
$result['valid'] = false;
$result['reason'][$name] = 'Skype名の形式で入力してください';
}
}
}
if ($name === "skype-name") {
if(empty($value)) {
if (method_exists($result, 'invalidate')) {
$result->invalidate( $tag, 'Skypeの名前(表示名)を入力してください');
} else {
$result['valid'] = false;
$result['reason'][$name] = 'Skypeの名前(表示名)を入力してください';
}
}
}
}
if(isset($_POST["contact-select"]) && ($_POST["contact-select"]=="その他")){
if ($name === "contact-app") {
if(empty($value)) {
if (method_exists($result, 'invalidate')) {
$result->invalidate( $tag,"ご利用媒体を入力してください");
} else {
$result['valid'] = false;
$result['reason'][$name] = 'ご利用媒体を入力してください';
}
}
}
if ($name === "contact-id") {
if(empty($value)) {
if (method_exists($result, 'invalidate')) {
$result->invalidate( $tag, '追加方法(ID、ユーザー名など)を入力してください');
} else {
$result['valid'] = false;
$result['reason'][$name] = '追加方法(ID、ユーザー名など)を入力してください';
}
}
}
}

最初に追加したコードの中に入れる

必要なバリデーションはこれで設置できる!

紹介したコードで一般的なバリデーションは設置出来たのではないでしょうか。

もしなかったとしても、前回の記事で紹介したカスタマイズ方法で独自のバリデーションを実行できるはずです。

※この記事でコードを拾った人は、番外編以外は最初に提示したコードの中身に追加していくのを忘れずに!!!!

※それぞれの項目を単体でfunctions.phpに追加しても動きません!

ちょっとコード量が多く面倒ですが、基本の構造は簡単なのでぜひ挑戦してみてくださいね。