ContactForm7で条件分岐する必須項目や詳細な入力確認(バリデーション)を追加する方法-プラグインなし-

2019年7月8日ContactForm7カスタマイズ

ContactForm7では必須項目の入力、文字数の指定やメールアドレス形式の指定など、簡単な入力確認(バリデーション)の機能がついています。

でも〇文字以内の半角英数でユーザー名を作る条件によって必須/自由回答を分けるなどの細かい指定はできません。

リアルタイムバリデーションをつけるプラグインやjQueryプラグインがありますが、サイトの速度低下を避けるためにも、ContactForm7とWordPressで出来たほうが良いです。

特に、このサイトでも紹介するフォームに情報を渡す機能や、ログインユーザーの情報を自動入力する機能など、他の様々な機能を付けたフォームではプラグインが上手く働かないことがあります。

ContactForm7のバリデーションに機能を追加する形で作っていきましょう。

スパム対策&入力確認バリデーション

自作ではなくコピペで使う場合はこちら

メールアドレスの形式や、確認用の再入力を一致させるバリデーションの基本の方法

functions.phpにコードを追加して、ContactForm7のデフォルトのバリデーションにカスタムのバリデーションを追加していきます。

サンプルコードは、メールアドレスの形式と確認用の再入力が一致しているかの確認です。

こっちでカスタマイズしたバリデーションを行う場合は、ContactForm7でデフォルトでバリデーションしている部分と被らないよう、バリデーションが出ない記述に変えておきます。

例)[mail your-email]ではなく、[text your-email]に。

/**
* 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はユーザーが入力した(選択した)値

//ここから一つ一つのフォーム項目にバリデーションを追加します。
if ($name === "your-email") {
//your-emailという名前のフォームに対して
if(!preg_match("/^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/", $value)) {
//if(!この部分はPHPで指定)は指定したい条件に当てはまらない(!)場合は
if (method_exists($result, 'invalidate')) {
$result->invalidate( $tag,"メールアドレスを入力してください");
//"メールアドレスを入力してください"はエラーが出たときに表示される文言
} else {
$result['valid'] = false;
$result['reason'][$name] = 'メールアドレスを入力してください';
//'メールアドレスを入力してください'エラー時の文言をここにも書いておく。
}
//ここまでがContactForm7で入力エラーを出すための部分
}
}
//ここまでが一つのフォーム項目に対して適用させるかたまり。
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] = '確認用のメールアドレスが一致していません';
}
//ContactForm7でエラーを出す。文言は場合によって変える。
}
}
//ここまでがかたまり。
return $result;
}
//最後にこの部分が来るようにする。

適用させたいフォーム項目の名前を指定して、いくつでも追加することが出来ます。

if ($name === "ここが適用させたいフォーム項目の名前") {

その他のバリデーションを行うときは、どんな条件に当てはまらなかった(当てはまった)場合にバリデーションさせるかを変えるだけです。

文字の種類や文字数などを指定する場合は、正規表現で条件を作ります。

if(!preg_match("/ここが正規表現/", $value)) {

条件に当てはまった場合にバリデーションさせるには、を消します。

よく使うような正規表現はググれば出てくるので、検索して探してきましょう。

正規表現 郵便番号(カタカナ 〇文字以下……etc)

よく使う正規表現はもうググりたくない!-Qiita

バリデーションで英数字のみのお問合せを阻止してスパム対策をする方法

サイトにお問合せフォームを設置していると、英語のスパムメールが大量に届くことがあります。

日本語のものはあまり見られないので、日本語でないとと送信できないようにしてしまえば、スパム対策になると言えますよね。

おなまえのところに英数字が使用されている場合は送信できないようにします。

先ほどのコードの中にスパム対策のためのバリデーションを追加します。

if($name === "your-name") {
if(!preg_match("/^[ぁ-んァ-ヶー一-龠]+$/u",$value)){
if (method_exists($result, 'invalidate')) {
$result->invalidate( $tag,"日本語で設定してください。半角英数字が含まれていると送信できません。");
} else {
$result['valid'] = false;
$result['reason'][$name] = '日本語で設定してください。半角英数字が含まれていると送信できません。';
}
}
}

このスパム用バリデーションのみを追加する場合は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", " "))) : "";
if($name === "your-name") {
if(!preg_match("/^[ぁ-んァ-ヶー一-龠]+$/u",$value)){
if (method_exists($result, 'invalidate')) {
$result->invalidate( $tag,"日本語で設定してください。半角英数字が含まれていると送信できません。");
} else {
$result['valid'] = false;
$result['reason'][$name] = '日本語で設定してください。半角英数字が含まれていると送信できません。';
}
}
}
return $result;
}

英数字を禁止する項目のname属性をここに書いたら完了です。

if($name === "これがフォーム項目の名前") {

新しいプラグインを入れたりしなくても、これだけでスパム対策ができました!

選択や条件に応じて必須項目/自由回答を切り替えるフォームでバリデーションする方法

さやっと。ではラジオボタンの切り替えでフォーム項目を切り替えるコードを紹介していますが、それだと切り替えた部分のフォームは必須項目に出来ません。

自分で書くバリデーションなら、PHPの条件分岐で出来ることはなんでも条件にできるので、ラジオボタンで選んだ連絡先のみを必須項目にすることもできます。

先ほどのコードに、更にif文を被せてradioボタンで選んだ値が当てはまった場合のみに必須項目にするコードを入れます。

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名を入力してください';
}
//バリデーションを実行
}
}
}

$_POSTとなっている部分は、フォームのメソッドがGETの場合は$_GETに変更します。

method="post"method="get"かを確認↓

<form class="wpcf7-form" action="/contact/#wpcf7-f00000-000" method="post">

他の項目のバリデーションを追加する場合は

if ($name === "line-name"){
//
//
//
}

で囲まれた部分を追加していきます。

これで条件付きの必須項目が出来ました。

自作ではなくコピペで使う場合はこちら

バリデーションは追加できる!

これで大体どのような条件のフォームでも、PHPのif文を使って条件分岐できればなんでもチェックするように指定できます。

さまざまな条件のif文もググればコピペでできるコードが出てくるので、工夫してみましょう。

参考元:contact-form-7プラグインにて半角数字かどうかを確認

さやアイコン
さや

さやに相談してみる

自分では解決しない…けど専門業者に頼むのはちょっと…
自分で進めたいけどサポートが欲しい!というとき
お気軽にご相談ください!

さやっとウェブ制作サポート

記事内容のカスタマイズ代行、さらにご希望に合わせたカスタマイズ、ご希望の機能やデザインの制作、コンテンツ作成のお手伝いまでウェブ制作全般にご対応!

ご利用ガイド