Contact Form 7のカスタムバリデーションで片方だけ必須
Contact Form 7はWordPressで最も広く使用されているコンタクトフォームプラグインの一つで、その柔軟性と拡張性により多くのウェブマスターに愛用されています。
しかし、多くの場合、標準的なフォーム機能ではユーザーの特定のニーズを満たせないことがあります。
ここで重要なのが、「カスタムバリデーション」の役割です。
この記事では、Contact Form 7でカスタムバリデーションルールを追加し、より高度なフォーム管理を実現する方法について詳しく解説します。
カスタムバリデーションを使うことで、フォームの入力値をより厳密にチェックし、サイト訪問者からの適切な情報収集を助けることができます。
コンタクトフォーム7の記述
<label>タイトル01
[text text-746]
</label>
<label>タイトル02
[text text-747]
</label>必須設定の必要はないです。
functions.phpへの記載方法
function my_wpcf7_validate( $result, $tags ) {
$d1 = isset( $_POST['text-746'] ) ? $_POST['text-746'] : '';
$d2 = isset( $_POST['text-747'] ) ? $_POST['text-747'] : '';
if ( $d1 === '' && $d2 === '' ) {
$result->invalidate( 'text-747', 'どちらか記載してください。' );
}
return $result;
}
add_filter( 'wpcf7_validate', 'my_wpcf7_validate', 11, 2 );変更方法
text-746、ext-747はどちらか一方必須にしたい部分の内容を記載します。
$result->invalidate( ‘text-747’, ‘どちらか記載してください。’ );
どちらに入力もれのアラートを出すかを指定します。
確認画面などの設定がある場合はエラーになる可能性があります。
フィルターフック一覧
| 名称 | 概要 |
|---|---|
| wpcf7_acceptance | フォームの受け入れを許可するかどうかを返す |
| wpcf7_additional_mail | 送信先メールアドレスを追加する |
| wpcf7_admin_menu_change_notice | メニューにバッチで表示する通知の数を設定する |
| wpcf7_ajax_json_echo | REST API で利用する |
| wpcf7_ajax_onload | REST API で利用する |
| wpcf7_akismet_comment_check | akismet がコメントをスパムと判断した時の処理を追加する |
| wpcf7_autop_or_not | WPCF7_AUTOP 定数を上書きする |
| wpcf7_captcha_url | キャプチャの URL を上書きする |
| wpcf7_collect_mail_tags | 独自のメールタグを設定する |
| wpcf7_constant_contact_\ contact_post_request_builder | Constant Contact との連携で利用する |
| wpcf7_constant_contact_submit | Constant Contact との連携で利用する |
| wpcf7_contact_form_default_pack | フォームのテンプレートを加工する |
| wpcf7_contact_form_properties | フォームのプロパティを拡張する |
| wpcf7_contact_form_shortcode | 投稿に埋め込むショートコードを加工する |
| wpcf7_copy | フォームのコピーを加工する |
| wpcf7_default_template | 各設定項目のデフォルト値を加工する |
| wpcf7_display_message | メッセージの出力を加工する |
| wpcf7_editor_panels | 管理画面のパネル（タブ）を加工する |
| wpcf7_flamingo_get_value | Flamingo との連携で利用する |
| wpcf7_flamingo_submit_if | Flamingo との連携で利用する |
| wpcf7_form_action_url | <form>タグの action 属性を加工する |
| wpcf7_form_autocomplete | <form>タグの autocomplete 属性を加工する |
| wpcf7_form_class_attr | <form>タグの class 属性を加工する |
| wpcf7_form_elements | <form>要素に要素を加える |
| wpcf7_form_enctype | <form>タグの enctype 属性を加工する |
| wpcf7_form_hidden_fields | <form>要素に <input type="hidden"> の要素を加える |
| wpcf7_form_id_attr | <form>タグの class 属性を加工する |
| wpcf7_form_name_attr | <form>タグの name 属性を加工する |
| wpcf7_form_novalidate | <from>タグの novalidate 属性を加工する |
| wpcf7_form_response_output | 応答メッセージの出力を加工する |
| wpcf7_form_tag | タグの値を加工する |
| wpcf7_form_tag_data_option | 独自タグの選択肢を指定する |
| wpcf7_is_date | 入力文字列が日付かどうかを返す |
| wpcf7_is_email | 入力文字列がメールアドレスかどうかを返す |
| wpcf7_is_number | 入力文字列が数値かどうかを返す |
| wpcf7_is_tel | 入力文字列が電話番号かどうかを返す |
| wpcf7_is_url | 入力文字列が URL かどうかを返す |
| wpcf7_load_css | WPCF7_LOAD_CSS 定数を上書きする |
| wpcf7_load_js | WPCF7_LOAD_JS 定数を上書きする |
| wpcf7_log_remote_request | ログ出力内容を加工する |
| wpcf7_mail_components | 送信するメールの内容を加工する |
| wpcf7_mail_html_footer | HTML メールのフッタを加工する |
| wpcf7_mail_html_header | HTML メールのヘツダを加工する |
| wpcf7_mail_tag_replaced | メールに出力する要素を加工する |
| wpcf7_mail_tag_replaced_{$type} | メールに出力する要素を加工する（type 属性単位） |
| wpcf7_map_meta_cap | フォームの編集権限を上書きする |
| wpcf7_messages | メッセージ文字列を加工する |
| wpcf7_posted_data | 入力された要素を加工する |
| wpcf7_posted_data_{$type} | 入力された要素を加工する（type 属性単位） |
| wpcf7_recaptcha_actions | reCAPTCHA で利用する |
| wpcf7_recaptcha_secret | reCAPTCHA のシークレットキーを上書きする |
| wpcf7_recaptcha_sitekey | reCAPTCHA のサイトキーを上書きする |
| wpcf7_recaptcha_threshold | reCAPTCHA のスパム判定の重み付けを上書きする |
| wpcf7_recaptcha_verify_response | reCAPTCHA で人間による投稿かどうかの判定を上書きする |
| wpcf7_remote_ip_addr | リモートホストの IP アドレスを上書きする |
| wpcf7_skip_mail | メール送信を省略するかどうかのフラグを上書きする |
| wpcf7_spam | スパム判定の結果を上書きする |
| wpcf7_special_mail_tags | 特別なメールタグの値を生成する |
| wpcf7_submission_is_blacklisted | ブラックリストを上書きする |
| wpcf7_subscribers_only_notice | ログインユーザーのみに許可されたフォームが利用された時の警告文を上書きする |
| wpcf7_support_html5 | html5 をサポートするかどうかを指定する |
| wpcf7_support_html5_fallback | html5 用のフォールバック機能を有効にするかどうかを指定する |
| wpcf7_upload_dir | アップロードディレクトリ情報を上書きする |
| wpcf7_upload_file_name | アップロードされたファイルの名前を上書きする |
| wpcf7_use_really_simple_captcha | WPCF7_USE_REALLY_SIMPLE_CAPTCHA 定数を上書きする |
| wpcf7_validate | バリデーションチェックの結果を上書きする |
| wpcf7_validate_configuration | WPCF7_VALIDATE_CONFIGURATION 定数を上書きする |
| wpcf7_validate_{$type}” | バリデーションチェックの結果を上書きする（type 属性単位） |
| wpcf7_validation_error | バリデーションチェックエラーのメッセージを上書きする |
| wpcf7_verify_nonce | WPCF7_VERIFY_NONCE 定数を上書きする |
アクションフック一覧
| 名称 | 概要 |
|---|---|
| wpcf7_admin_footer | 管理画面のフッター出力時 |
| wpcf7_admin_init | 管理画面へのアクセス時 |
| wpcf7_admin_load | 管理サブメニューの設定後 |
| wpcf7_admin_menu | 管理メニューの設定前 |
| wpcf7_admin_misc_pub_section | 追加のペインの出力時 |
| wpcf7_admin_notices | 管理画面に通知を表示する時 |
| wpcf7_admin_warnings | 管理画面に警告を表示する時 |
| wpcf7_after_create | 管理画面でフォームの設定を作成した後 |
| wpcf7_after_flamingo | Flamingo との連携で利用する |
| wpcf7_after_save | 保存処理の後 |
| wpcf7_after_update | 管理画面でフォームの設定を更新した後 |
| wpcf7_before_send_mail | メールの送信前 |
| wpcf7_config_validator_validate | 管理画面の設定項目のバリデーションチェック中 |
| wpcf7_contact_form | WPCF7_ContactForm クラスオブジェクトの構築後 |
| wpcf7_enqueue_scripts | スクリプトのエンキュー時 |
| wpcf7_enqueue_styles | スタイルシートのエンキュー時 |
| wpcf7_init | 初期化時 |
| wpcf7_mail_failed | メール送信の失敗時 |
| wpcf7_mail_sent | メール送信の成功時 |
| wpcf7_post_edit_form_tag | フォームの設定用フォームの<form>タグ出力時 |
| wpcf7_save_contact_form | フォームの設定を保存する前 |
| wpcf7_submit | フォーム送信時 |
| wpcf7_upgrade | Contact Form 7 のアップデート時 |
まとめ
この記事を通じて、Contact Form 7のカスタムバリデーションの実装方法について学びました。カスタムバリデーションを活用することで、フォームからの入力をより効果的に制御し、ウェブサイトのユーザーエクスペリエンスを向上させることができます。カスタムバリデーションを使用する際は、具体的なユーザーのニーズに合わせて、ルールを慎重に設計することが重要です。
また、エラーメッセージは明確でユーザーフレンドリーであるべきです。このようにして、Contact Form 7を使って、より機能的で、ユーザーニーズに応えるフォームを作成しましょう。今後もこのようなカスタマイズを通じて、ウェブサイトの機能性を高め、訪問者とのコミュニケーションをよりスムーズにすることを目指してください。
