プラグイン 2023.05.12 2023.09.05
contact form7のバリデーション(入力検証)設定方法
この記事を書いた人
土井 純也
WordPressスペシャリスト・エンジニア/株式会社e2e 取締役 / CTO
1985年北海道生まれ。
200社以上の大手上場企業のWordPressサイトの制作、保守・セキュリティをサポートしている。
【 展開しているサービス一覧 】
■WordPress開発サービス「wp.make」
■WordPress保守/運用サービス「wp.support」
■WordPressハッキング/緊急復旧対応サービス「wp.rescue」
■WordPressバージョンアップ代行サービス「wp.versionup」
Contact form 7とは、WordPressで作成したWebサイトに問い合わせフォームを設置するためのプラグイン（拡張機能）です。プログラミングの知識が少ない方でも導入しやすく、世界中で利用されています。
Contact form 7を使う上で知っておきたいのが、バリデーションです。バリデーションはフォームに入力されたデータが正しい形式であることを確認するために使用されます。
バリデーションを行うことで、入力された情報が正しい場合は問い合わせ内容を受け付け、不正な情報が入力された場合はエラーメッセージを表示して再度入力を促すことができます。
プラグインの基本的な使用方法やカスタマイズ方法、デザイン変更方法など、Contact form 7の総合的な解説については、以下の記事をご確認ください。
Contact Form 7の使い方まとめ｜設定方法・カスタマイズ・おすすめプラグイン
目次
contact form7でバリデーションを追加する基本の方法
Contact Form 7でバリデーションを追加する方法についてご紹介します。
必須項目のバリデーション設定
Contact Form 7のデフォルト状態（初期状態）では、必須フィールドが空でないことを確認するバリデーションがあります。上記画像では「*」をつけることで必須フィールドが空の場合、送信できないようになっています。
また、メールアドレスフィールドには、メールアドレスの形式が正しいかどうかを確認するバリデーションがあります。
【コピペでOK】functions.phpを使ったバリデーションの設定方法5選
ここで紹介するバリデーションの設定方法は、ソースコードをfunctions.phpにコピーするだけで使うことができます。
functions.phpは、FTPソフトを使って編集する方法もありますが、WordPressの「外観」→「テーマファイルエディタ」から開くこともできます。
バリデーションでスパム対策をする方法
以下のコードをfunctions.phpにコピーすることで、スパム対策で英数字のみの項目入力を禁止できます。
英数字のみの項目入力を禁止することで、スパムに使用されるプログラムコードの入力を阻止することが可能です。
function wpcf7_validate_spam_message( $result, $tag ) {
$value = str_replace(array(PHP_EOL,’ ‘), ”, esc_attr($_POST[‘your-message’]));
if (!empty($value)) {
if (preg_match(‘/^[!-~]+$/’, $value)) {
$result[‘valid’] = false;
$result[‘reason’] = array(‘your-message’ => ‘日本語で入力してください’);
}
}
return $result;
}
そもそも、「スパムとは何か」がわからない、という方は、以下の記事で解説しています。
スパムとは？迷惑メール・SNSの被害事例と対策方法を解説
名前とフリガナで全角日本語を指定するバリデーション
名前とフリガナで全角日本語を指定するバリデーションを設定するには、以下のコードをfunctions.phpに追加します。
add_filter( ‘wpcf7_validate_text*’, ‘custom_text_validation_filter’, 20, 2 );
function custom_text_validation_filter( $result, $tag ) {
$name = $tag[‘name’];
if ( $name == ‘your-name’ || $name == ‘your-name-furigana’ ) {
$value = isset( $_POST[$name] ) ? trim( $_POST[$name] ) : ”;
if ( ! preg_match( “/^[ぁ-ゞァ-ヾ\x{2E80}-\x{2FDF}々〇〻\x{3400}-\x{4DBF}\x{4E00}-\x{9FFF}\x{F900}-\x{FAFF}\x{20000}-\x{3FFFF}]+$/u”, $value ) ) {
$result->invalidate( $tag, “全角日本語で入力してください。” );
}
}
return $result;
}
上記のコードでは、名前フィールドとフリガナフィールドに対して、全角日本語で入力されているかどうかを確認するバリデーションを設定しています。バリデーションに引っかかった場合は、「全角日本語で入力してください。」というエラーメッセージが表示されます。
※2023/9/5追記
漢字の文字コードの正規表現の範囲が狭かったため一部コード修正。
なお、ひらがなのみ、カタカナのみにしたい場合は、preg_match部分を次のように変更します。
・ひらがなのみ
・カタカナのみ
郵便番号を半角で入力させるバリデーション
郵便番号を半角で入力させるバリデーションを設定するには、以下のようなコードをfunctions.phpに追加します。
add_filter( ‘wpcf7_validate_postal*’, ‘custom_postal_validation_filter’, 20, 2 );
function custom_postal_validation_filter( $result, $tag ) {
$name = $tag[‘name’];
if ( $name == ‘your-postal’ ) {
$value = isset( $_POST[$name] ) ? trim( $_POST[$name] ) : ”;
if ( ! preg_match( ‘/^[0-9]{3}-?[0-9]{4}$/’, $value ) ) {
$result->invalidate( $tag, “半角数字で入力してください。” );
}
}
return $result;
}
上記のコードでは、郵便番号フィールドに対して、半角数字で入力されているかどうかを確認するバリデーションを設定しています。バリデーションに引っかかった場合は、「半角数字で入力してください。」というエラーメッセージが表示されます。
メールアドレス入力時のバリデーション
メールアドレス入力時のバリデーションを設定するには、以下のコードをfunctions.phpに追加します。
add_filter( ‘wpcf7_validate_email*’, ‘custom_email_validation_filter’, 20, 2 );
function custom_email_validation_filter( $result, $tag ) {
$name = $tag[‘name’];
if ( $name == ‘your-email’ ) {
$value = isset( $_POST[$name] ) ? trim( $_POST[$name] ) : ”;
if ( ! is_email( $value ) ) {
$result->invalidate( $tag, “正しいメールアドレスを入力してください。” );
}
}
return $result;
}
上記のコードでは、メールアドレスフィールドに対して、正しいメールアドレスが入力されているかどうかを確認するバリデーションを設定しています。バリデーションに引っかかった場合は、「正しいメールアドレスを入力してください。」というエラーメッセージが表示されます。
条件によって必須項目に変えるバリデーション
条件によって必須項目に変えるバリデーションを設定するには、以下のコードをfunctions.phpに追加します。
add_filter( ‘wpcf7_validate_text*’, ‘custom_text_validation_filter’, 20, 2 );
function custom_text_validation_filter( $result, $tag ) {
$name = $tag[‘name’];
if ( $name == ‘your-name’ ) {
$value = isset( $_POST[$name] ) ? trim( $_POST[$name] ) : ”;
if ( empty( $_POST[‘your-condition’] ) && empty( $value ) ) {
$result->invalidate( $tag, “名前は必須です。” );
}
}
return $result;
}
上記のコードでは、名前フィールドに対して、条件によって必須項目に変更するバリデーションを設定しています。バリデーションに引っかかった場合は、「名前は必須です。」というエラーメッセージが表示されます。
バリデーションを使う時の注意点
バリデーションを設定する際には、ユーザーの使いやすさを十分に考慮して、必要以上に厳しいバリデーションを設定しないようにしましょう。
フォームに到達したユーザーが入力を完了する割合のことを『フォーム完了率』と言います。フォーム完了率が高いほど、良いフォームと言えます。
例えば、それほど重要ではない項目も全て必須項目にしてしまうと途中でユーザーが面倒になる可能性があります。
他にも住所を全角のみで入力してもらうようにすると、半角数字で番地を入力した際もエラーが表示されます。慣れていないユーザーにはエラーの原因がわかりづらく、離脱の原因になってしまいます。
フォームの項目とバリデーションについて考える時は、以下の項目に注意して、ユーザーのフォーム完了率が高いフォームを目指しましょう！
- その項目は本当に必要か？
- 必須項目にするべきか否か？
- バリデーションの方法はユーザーフレンドリーか？
まとめ
今回の記事では、WordPressのプラグイン「Contact form 7」を使用してバリデーションを追加する方法について説明しました。
Contact form 7には、デフォルト状態で使用可能なバリデーションや、functions.phpを使用して実装できるバリデーションがあります。
注意すべき点としては、必要以上に厳しいバリデーションを設定しないこと、必要ない項目を必須項目にしないことなどがあります。
まずはcontact form7のプラグインをインストールしてバリデーションを使ってみるところから始めてみましょう。
また、WordPressのセキュリティ対策に関して、もっと詳しく知りたい方は以下の記事も参考にしてみてください。
WordPressセキュリティ対策はここから！コード不要の初心者向け対策4選
WordPressサイト制作・カスタマイズなら「wp.make」にお任せ！
WordPressでのサイト制作やリニューアルを検討する時、以下のようなお悩みはありませんか？
- WordPressに詳しい制作会社に依頼したいが、どこがいいかわからない…
- セキュリティ対策をしっかりしたいが、社内にノウハウがないのでプロに任せたい…
- WordPressに最適なサーバーの選定や構築から依頼したい…
- SEO対策や高速化も考慮したサイト構築を行なってほしい…
- 制作後の保守・運用についてもサポートしてほしい…
- 今のサイトを簡単に運用できるようにしてほしい…
「wp.make」は、WordPressのプロフェッショナル集団によるWordPressサイト制作・カスタマイズサービスです。
サイトの制作だけでなく、WordPressに最適なサーバーの選定や構築といったインフラ面の支援から、SEO対策や表示スピードの高速化、高度なセキュリティ対策や制作後の保守・運用サポートまで、WordPressに関わることならあらゆるお悩みを解消いたします。
既存のお客さまからも
「コミュニケーションが取りやすく、クオリティが高い」
「WordPressのプロとして信頼感がある」
と大変ご好評をいただいています。
WordPressサイトの制作・カスタマイズをご検討されているなら、ぜひ以下からお気軽にご相談ください。
WordPress開発・カスタマイズなら 『wp.make』
全案件WordPressのみ！
株式会社e2eの『wp.make』はWordPress専門のWeb制作サービスです。
WordPress案件だけを扱っているから、技術・ノウハウ・対応力が圧倒的！
【WordPressサイト制作でよくあるお悩み】
・運用シーンが想定されておらず、更新しづらかった…
・打ち合わせで専門用語が多くてわかりづらい…
・制作後の保守には対応してくれなかった…
こんな事態になる前に、ぜひ一度、ご相談ください！
WordPressサイトを作るなら、一番WordPressに詳しいところへ！