How to fix the issue where error messages appear when clicking checkboxes or radio buttons in Contact Form 7

2023-01-18

With the WordPress contact form plugin "Contact Form 7"

For example, with a form like this:

Contact Form 7で作ったフォーム

When you check a checkbox, error messages for previous required fields will appear.

*The same applies to radio buttons.

Contact Form 7 エラー

Normally, you would fill in the fields from top to bottom, so it shouldn't be an issue,
but since you've reached this article, that's probably not the case.

Here is the HTML for the error message.

<span class="wpcf7-not-valid-tip" aria-hidden="true">必須項目に記入もれがあります。</span>

This might be a bit of a forceful method,
but I'll introduce a solution based on the approach of hiding errors with CSS and displaying them when "Send" is clicked.

Add to CSS

Add the following:

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

If you can't edit the CSS, just add it using "Custom HTML" on the contact page.

カスタムHTMLでCSSを記入

Add to JS

Add the following:

// Add class to form tag
document.querySelector(".wpcf7-form").classList.add("hide_error_message");

// When send or confirm button is clicked
document.querySelectorAll(".wpcf7-confirm, .wpcf7-submit").forEach(function(elm){
	elm.addEventListener("click", function(){
		document.querySelector(".wpcf7-form").classList.remove("hide_error_message");
	});
});

jQuery version

$(function(){
	// Add class to form tag
	$(".wpcf7-form").addClass("hide_error_message");

	// When send or confirm button is clicked
	$(".wpcf7-confirm, .wpcf7-submit").click(function(){
		// Remove class from form
		$(".wpcf7-form").removeClass("hide_error_message");
	});
});

If you can't edit the JS, just add it using "Custom HTML" as well.

カスタムHTMLでJavaScriptを記入