Contact Form 7 バージョン 5.8.6でカスタム化した場所へエラーメッセージを表示したい

Question

実現したいこと

Contact Form 7 バージョン 5.8.6でエラーメッセージの位置をカスタム化した場所に表示したい

発生している問題・分からないこと

Contact Form 7 バージョン 5.5.6.1で以下のコードをfunctions.phpに書いて、エラーメッセージをカスタム化した場所に表示するようにしていましたが、最新版のバージョン 5.8.6では機能せずどう修正したらいいのか分からず困っています。

生年月日の入力フィールドの初期状態

生年月日の各SELECTを1セットにして、未入力があった場合生年月日1セットの下に1つだけエラーメッセージを出す。
Contact Form 7 バージョン 5.5.6.1での状態

最新版のバージョン 5.8.6での状態

該当のソースコード

<tr>
<th class="hissu">生年月日</th>
<td><p>[select* birth-year class:text-short4 first_as_label "---" "1950" "1951" "1952" "1953" "1954" "1955" "1956" "1957" "1958" "1959" "1960" "1961" "1962" "1963" "1964" "1965" "1966" "1967" "1968" "1969" "1970" "1971" "1972" "1973" "1974" "1975" "1976" "1977" "1978" "1979" "1980" "1981" "1982" "1983" "1984" "1985" "1986" "1987" "1988" "1989" "1990" "1991" "1992" "1993" "1994" "1995" "1996" "1997" "1998" "1999" "2000" "2001" "2002" "2003" "2004" "2005"]年[select* birth-month first_as_label  "---"  "1" "2" "3" "4" "5" "6" "7" "8" "9" "10" "11" "12"]月[select* birth-date first_as_label "---" "1" "2" "3" "4" "5" "6" "7" "8" "9" "10" "11" "12" "13" "14" "15" "16" "17" "18" "19" "20" "21" "22" "23" "24" "25" "26" "27" "28" "29" "30" "31"]日</p><span class="wpcf7-custom-item-error birth-year birth-month birth-date"><span class="wpcf7-form-control"></span></span></td>
</tr>

// エラーの出力位置をカスタマイズする
/* 参考リンク： https://do-jo.jp/plugins/1307/
 * 				https://qiita.com/kinshist/items/7a16a1fe4bae27fe11b2
 * 				https://nldot.info/i-want-to-change-the-validation-message-display-position-in-copipable-contact-form-7/
 */
function wpcf7_custom_item_error_position( $items, $result ) {
	$class = 'wpcf7-custom-item-error';
	$names = array( 'birth-year', 'birth-month', 'birth-date'); // name属性を指定
	$processed_day_messeage = false;

	if ( isset( $items['invalid_fields'] ) ) {
		foreach ( $items['invalid_fields'] as $k => $v ) {
			$orig = $v['into'];
			$name = substr($orig, 0, strcspn($orig,':')); //Conditional Fields for Contact Form 7 バージョン 2.1.6では、invalid_fieldsの後ろに:のあとにConditional Fields for Contact Form 7用の情報が入るので取り除く
			$name = substr( $name, strrpos($name, ".") + 1 );
			if ( in_array( $name, $names ) ) {
				if ($name == 'birth-year' || $name == 'birth-month' || $name == 'birth-date') { //生年月日の内1つでも未入力があった場合、フラグをONにして、エラーを1つだけにするため残りのエラーメッセージを除去する
					if ($processed_day_messeage == true) {
						unset($items['invalid_fields'][$k]);
						continue;
					} else {
						$processed_day_messeage = true;
					}
				}
				$items['invalid_fields'][$k]['into'] = ".{$class}.{$name}"; //エラーメッセージをカスタムポジションに表示するように設定
			}
		}
		$items['invalid_fields'] = array_values($items['invalid_fields']);
	}
	return $items;
}
add_filter( 'wpcf7_feedback_response', 'wpcf7_custom_item_error_position', 10, 2 );

試したこと・調べたこと

• teratailやGoogle等で検索した
• ソースコードを自分なりに変更した
• 知人に聞いた
• その他

上記の詳細・結果

デバッグログを吐かせて、invalid_fieldsの中身を確認した所、最新版ではintoの項目が別の場所に移動しており、しかも、内容がエラーが起こったフォーム名になっているようでした。
試しに、".{$class}.{$name}"を入れてみましたが、当然のごとく、うまくいきませんでした。
最新版では各項目の項目名がクラスからNAMEに変更になったということで、
wpcf7-custom-item-errorのクラス名に指定しているのを、NAMEに指定したりしてみたのですがダメでした。

補足

このフックはRestAPIへの応答のカスタマイズ用ということまでは調査できたのですが、当方RestAPIの知識がなく、どうすればいいのか分からず困っています。

諸先輩方で、最新版のバージョン 5.8.6でエラーメッセージをカスタムポジションに出力させることに成功された方、その方法をご教授いただければ幸いです。

Answer 1

自己解決しました。他の方のために、以下にどのようにして実現したか記載しておきます。

まず、functions.phpでのフックを用いた方法は全くダメだったので、質問に記載したPHPコードは削除

ContactForm7でのフォームの記載を以下の様に修正する

<th class="hissu">生年月日</th>
<td>
<p>
[select* birth-year class:text-short4 first_as_label "---" "1950" "1951" "1952" "1953" "1954" "1955" "1956" "1957" "1958" "1959" "1960" "1961" "1962" "1963" "1964" "1965" "1966" "1967" "1968" "1969" "1970" "1971" "1972" "1973" "1974" "1975" "1976" "1977" "1978" "1979" "1980" "1981" "1982" "1983" "1984" "1985" "1986" "1987" "1988" "1989" "1990" "1991" "1992" "1993" "1994" "1995" "1996" "1997" "1998" "1999" "2000" "2001" "2002" "2003" "2004" "2005"]年
[select* birth-month first_as_label  "---"  "1" "2" "3" "4" "5" "6" "7" "8" "9" "10" "11" "12"]月
[select* birth-date first_as_label "---" "1" "2" "3" "4" "5" "6" "7" "8" "9" "10" "11" "12" "13" "14" "15" "16" "17" "18" "19" "20" "21" "22" "23" "24" "25" "26" "27" "28" "29" "30" "31"]日
</p>
<p>
<span class="wpcf7-custom-item-error birth-year birth-month birth-date">
<span class="wpcf7-form-control wpcf7-not-valid-tip">必須項目に入力してください。</span>
</span>
</p>
</td>
</tr>

CSSで、各要素で出た時のエラーを非表示にする
カスタムエラーを記述するPタグを直下に記述
表示すべきエラーメッセージは、あらかじめ記載しておき、エラーメッセージの要素にはwpcf7-not-valid-tipを追記する。
CSS3の:hasセレクタで各要素でエラーメッセージが出た時につくwpcf7-not-valid-tipを子要素に持つ親要素のPタグに隣接するカスタムエラーポジション用のPタグをdisplay: none;してたものを、display: block;にして表示する。

.wpcf7 span[data-name="birth-year"] span.wpcf7-not-valid-tip {display: none;}
.wpcf7 span[data-name="birth-month"] span.wpcf7-not-valid-tip {display: none;}
.wpcf7 span[data-name="birth-date"] span.wpcf7-not-valid-tip {display: none;}
.wpcf7 p:has(span[data-name="birth-year"]) + p,
 p:has(span[data-name="birth-month"]) + p,
 p:has(span[data-name="birth-date"]) + p
 {
	display: none;
 }
.wpcf7 p:has(span[data-name="birth-year"] span.wpcf7-not-valid-tip) + p,
p:has(span[data-name="birth-month"] span.wpcf7-not-valid-tip) + p, 
p:has(span[data-name="birth-date"] span.wpcf7-not-valid-tip) + p
 {
	display: block;
 }

上記のようにした所実現できました。:hasセレクタは最近までFireFoxでは未対応だったのが最新版で対応済みとなったので、この修正で全てのブラウザで問題なく動作するのを確認しました。

以上です。他の方の参考になれば幸いです。