Contact Form 7 add confirm

Contact Form 7 の最新版5.4 の諸々の変更へ対応するべく、確認画面プラグインContact Form 7 add confirm をカスタマイズしたときのメモ

●入力項目validationエラー時のスクロールスクリプト変更

$('.wpcf7').on('wpcf7invalid', function(e) {
	var t = $( e.detail.apiResponse.invalid_fields[0].into );
	$('html, body').animate({scrollTop:t.eq(0).offset().top}, 700);
});

※Contact Form 7 v5.6から
「フォームコントロールのマークアップの変更」のため以下へ変更

$('.wpcf7').on('wpcf7invalid', function(e) {
	const invalid_field = $( e.detail.apiResponse.invalid_fields[0] )[0].field;
	const t = $("[data-name=" + invalid_field + "]");
	$('html, body').animate({scrollTop:t.eq(0).offset().top}, 700);
});

●フォーム送信後のイベントwpcf7submit発生によるイベントオブジェクトのプロパティ変更（というより廃止対応かな）
（変更前）event.detail.id　→　（変更後）event.detail.unitTag

document.addEventListener( 'wpcf7submit', function( event ) {
	switch ( event.detail.status ) {
		case 'wpcf7c_confirmed':
//		wpcf7c_step1(event.detail.id); //@@@ CF7 5.4
		wpcf7c_step1(event.detail.unitTag);
		break;
		case 'mail_sent':
//		wpcf7c_step2(event.detail.id); //@@@ CF7 5.4
		wpcf7c_step2(event.detail.unitTag);
		break;

	}
}, false );

●フォーム送信完了時のメッセージ表示
前バージョンまでJavaScriptで実装されていた クラスwpcf7-response-outputへのslideDownがなくなったため、クラスwpcf7c-force-hideをremoveしてもメッセージが表示されない点の応急処置
　responseOutput.slideDown( 'fast' );
を最後に追加。

var wpcf7c_step2 = function(unit_tag){
	// 確認完了

	// 対象フォーム検索
	//var elm_unit_tag = jQuery.find("input[name=_wpcf7_unit_tag]");
	jQuery(jQuery.find("input[name=_wpcf7_unit_tag]")).each(function(){
		if(jQuery(this).val() == unit_tag) {
...
//@@@最後に追加@@@
 			//@@@ CF7 5.4
 			responseOutput.slideDown( 'fast' );
		}
	});
}

var wpcf7c_step2_error = function(unit_tag) {
	jQuery(jQuery.find("input[name=_wpcf7_unit_tag]")).each(function(){
		if(jQuery(this).val() == unit_tag) {
...
//@@@最後に追加@@@
 			//@@@ CF7 5.4
 			responseOutput.slideDown( 'fast' );
		}
	});

}

---

旧バージョン対応の条件分岐など、もうなくてもいいかなと思うものが結構あるので、結局のところ、必要なものだけオリジナルテーマに取り込むことにしました。

対応ご希望の方は、ご連絡くださいませ。