Contact Form 7は、WordPressで最も一般的に使用されるフォームプラグインです。Contact Form 7では、デフォルトでサーバーサイドでのバリデーションが行われますが、クライアントサイド（ブラウザ側）でのバリデーションを追加することも可能です。
ユーザーにより使いやすいフォームエクスペリエンスを提供するために、バリデーションのカスタマイズが重要です。今回は、サーバーサイドでのバリデーションをカスタマイズする方法と、クライアントサイドにバリデーションを追加する方法を紹介します。
サーバーサイドバリデーションとは
サーバーサイドバリデーションは、フォームのデータをサーバーに送信する前にバリデーションを行う方法です。Contact Form 7では、デフォルトでサーバーサイドバリデーションを行うことが可能で、必須フィールドやメールアドレスの形式などを検証することができます。
サーバーサイドバリデーションは、データの正当性を確認するために重要です。不正なデータがサーバーに送信されるのを防ぐことができます。
クライアントサイドバリデーションとは
クライアントサイドバリデーションは、ブラウザ上でフォームの入力内容を即座にバリデーションする方法です。JavaScriptなどを使用してブラウザ上でバリデーションルールを設定し、ユーザーがフォームを操作するたびに入力値の妥当性をチェックします。
ユーザーが入力する度にエラーメッセージやバリデーションを表示させることができます。そのためユーザーは即座にエラーを修正することができ、よりスムーズな操作が可能です。
しかし、クライアントサイドでのバリデーションだけではセキュリティ的に不安な面もあるため、多くの場合でサーバーサイドのバリデーションと組み合わせて行うことが多いです。
Contact Form7のデフォルトのバリデーションをカスタマイズ（サーバーサイド）
Contact Form 7では、デフォルトのバリデーションルールをカスタマイズすることができます。サーバーサイドバリデーションをカスタマイズするには、Contact Form 7の設定ファイルやフックを使用します。具体的なカスタマイズ手法について以下で解説します。
/* ContactForm7 のカスタムバリデーション */
add_filter( "wpcf7_validate", "wpcf7_validate_customize", 10, 2 );
function wpcf7_validate_customize( $result, $tags ){
foreach( $tags as $tag ){
$input_name = $tag["name"];
/* name属性が「your-kana」のinput */
if ( "your-kana" === $input_name ) {
if ( !preg_match( "/^[ア-ヶー]+$/u", $value ) ) $result->invalidate( $tag, "全角カタカナで入力してください。" );
}
}
return $result;
}jQuery Validationを利用してバリデーションを実装する（クライアントサイド）
Contact Form 7にクライアントサイドバリデーションを追加するためには、jQuery Validationプラグインを利用する方法が一般的です。以下では、jQuery Validationの導入方法と基本的な使い方について説明します。
1. jQueryとjQuery ValidationのCDNを追加します
最初に、jQueryとjQuery ValidationのスクリプトをWordPressのテーマまたはプラグインのファイルに追加して読み込みます。一般的には、テーマのfunctions.phpファイルや、カスタムプラグインのメインファイルに追加します。以下のコードを使用して、jQueryとjQuery Validationのスクリプトを読み込みます。
function enqueue_scripts() {
// jQuery
wp_enqueue_script('jquery');
// jQuery Validation
wp_enqueue_script('jquery-validation', 'https://cdn.jsdelivr.net/jquery.validation/1.16.0/jquery.validate.min.js', array('jquery'), '1.16.0', true);
}
add_action('wp_enqueue_scripts', 'enqueue_scripts');
2. カスタムJavaScriptコードを追加します
jQuery(document).ready(function($) {
// バリデーションの設定
$("#your-form-id").validate({
rules: {
'your-name': {
required: true,
},
'your-email': {
required: true,
email: true,
},
},
messages: {
'your-name': {
required: "お名前を入力してください",
},
'your-email': {
required: "メールアドレスを入力してください",
email: "有効なメールアドレスを入力してください",
},
},
});
});上記の例では、your-form-idを対象のフォームのIDに置き換えてください。また、your-nameとyour-emailは各フィールドのname属性に合わせて変更してください。rulesオブジェクトには、各フィールドのバリデーションルールを定義し、messagesオブジェクトにはエラーメッセージを設定します。
3. カスタムJavaScriptコードの読み込み
カスタムJavaScriptコードをテーマのfunctions.phpファイルやカスタムプラグインのファイルに追加して読み込みます。
まとめ
以上が、Contact Form 7のバリデーションをカスタマイズするための方法と利点についての解説です。サーバーサイドとクライアントサイドのバリデーションのメリットとデメリットを理解し、適切な方法を選択してフォームのバリデーションを強化しましょう。