Contact Form 7でチェックボックスやラジオをクリックするとエラーメッセージが出てしまう時の対処法

CSSに追記

以下を追記します｡

.wpcf7-form.hide_error_message .wpcf7-not-valid-tip {
	display: none;
}

CSSを編集できない場合は､お問い合わせページに「カスタムHTML」で記入しちゃいましょう｡

JSに追記

以下を追記します｡

//formタグにクラス追加
document.querySelector(".wpcf7-form").classList.add("hide_error_message");

//送信または確認ボタンをクリックしたとき
document.querySelectorAll(".wpcf7-confirm, .wpcf7-submit").forEach(function(elm){
	elm.addEventListener("click", function(){
		document.querySelector(".wpcf7-form").classList.remove("hide_error_message");
	});
});

jQueryバージョン

$(function(){
	//formタグにクラス追加
	$(".wpcf7-form").addClass("hide_error_message");

	//送信または確認ボタンをクリックしたとき
	$(".wpcf7-confirm, .wpcf7-submit").click(function(){
		//formからクラスを削除
		$(".wpcf7-form").removeClass("hide_error_message");
	});
});

JSを編集できない場合も､「カスタムHTML」で記入しちゃいましょう｡

すると､チェックボックスやラジオボタンをクリックしただけでは､エラー文が表示されないはずです｡

イレギュラーがあったらコメントで教えてください！

コメント