Hello,
First off, thank you for linking your website. It’s much easier and faster to debug issues with a direct link ??
It looks like a theme or plugin is overwriting the inline CSS. The technical explanation is that this box is supposed to be hidden and holds the response back from Google whenever the user passes or fails clicking the reCaptcha checkbox. We can see this simply by clicking the checkbox. The box has an inline CSS style of display:none; which usually prevents other CSS properties from displaying it. Unfortunately, CSS has a “catch all” !important which takes precedence.
There’s an internal style, maybe in the Customizer Additional CSS panel, generated by a plugin, or added some other way which says:
#cf7cstmzr-form.cf7cstmzr-form-578 .wpcf7-form textarea {
display: block !important;
}
If you view the source of the page you can see this style on line 124. Usually you want to not use the !important CSS property if you can help it. If you’re familiar with how this CSS is being added a simple fix for this could be:
#cf7cstmzr-form.cf7cstmzr-form-578 .wpcf7-form textarea:not(#g-recaptcha-response)
If a plugin is adding this CSS then we suggest contacting that plugins support.
If you’re not sure how that CSS is being generated then we suggest you install the WordPress Health Check & Troubleshooting plugin. This will allow you to safely ( just for your logged in user ) disable all plugins except Contact Form 7 and this plugin. It will also allow you to switch to a default theme to see if the issue lies with the theme itself. At which point you can enable plugins until you find the one causing issues.
In short, something is overriding our plugins CSS using !important which we cannot prevent. We’ll leave this thread open for a little while longer. Should you have any questions please reply back to this thread and we can assist you further. Have a wonderful rest of your week!
