IQComputing

Hello,

It’s been awhile since we’ve heard back from you regarding this issue. We will mark this thread as resolved for now but if you need further assistance please reply back below.

It’s been awhile since we’ve last heard from you regarding this issue. We’re going to mark this thread as resolved for now but if you continue to have issues or have any additional questions please reply back to this thread and we can assist you further. Have a wonderful weekend!

Hello!

Thank you for reporting this. This is not an error we have encountered before in our testing. We do have the textarea you describe in the title but it’s encapsulated by a <noscript> tag and meant to address browsers that have JavaScript disabled. Unfortunately, Google ReCaptcha requires JavaScript to run properly.

If you know the CSPs that you’re setting on the site that may be helpful for us to replace the issue.

Additionally, it could be a conflicting plugin or theme related issue that is causing these notices to pop-up. Could you supply a list of installed plugins or install the WP Health Check Plugin which will allow you to safely disable all your plugins and revert to a default theme. You may read more about this plugin in the Health Check Documentation.

Any other information you feel will help us recreate or narrow down this issue would be appreciated!

We understand this is an extra step that may seem unnecessary. The reason for this extra step was to allow people with ReCaptcha version 3 already activated to downgrade if they choose without effecting the front-end of their website. By defaulting to ReCaptcha version 2 upon install would invalidate any front-end Contact Form 7 forms that run version 3 keys. It’s a step we feel is necessary to accommodate users installing this plugin in different situations than fresh installs.

If you’re referring to Multisite installs, we are currently testing a version of the plugin to allow the Network Admins to apply changes to all Network sites which we hope to push in the near future.

– – – – –

Finally, if you are looking for a developmental example of how you could do this, below is a code snippet which will update the option whenever the admin panel is loaded whether or not the plugin is installed. Since this is a code-based solution we feel the need to stress that you should apply the below code at your own risk as applied incorrectly could break your website. It’s not an advisable solution for non-developers.

/**
 * Set default options
 * 
 * @return void
 */
function prefix_set_default_options() {
	
	// Contact Form 7 is not installed or not activated.
	if( class_exists( 'WPCF7' ) ) {
		
		// If the option exists and is set, return early
		if( false !== WPCF7::get_option( 'iqfix_recaptcha', false ) ) {
			return;
		}
		
		WPCF7::update_option( 'iqfix_recaptcha', '2' );		// Set ReCaptcha to user v2
		
	// Attempt to set options for when Contact Form 7 is installed.
	} else {
		
		/**
		 * @see Code written by Takayuki Miyoshi
		 * @see Contact Form 7 v5.1.1 settings.php LN80
		 */
		$option = get_option( 'wpcf7' );										// Get Contact Form 7 Settings
		$option = ( false === $option ) ? array() : (array) $option;			// If they do not exist, create an array
		
		// If the option exists and is set, return early
		if( array_key_exists( 'iqfix_recaptcha', $option ) ) {
			return;
		}
		
		$option = array_merge( $option, array( 'iqfix_recaptcha' => '2' ) );	// Merge the two arrays
		update_option( 'wpcf7', $option );										// Update Option
		
	}
	
}
add_action( 'after_setup_theme', 'prefix_set_default_options', 20 );

You will need to follow the installation instructions for this plugin, ensuring that:

1) In the plugins settings, ReCaptcha dropdown has v2 selected ( screenshot )

2) When setting up your Google ReCaptcha API Key you need to ensure that it is a version 2 key and not a version 3 or invisible key. Each API key only works with the specified version and this plugin only works with version 2.

3) When setting up your Google ReCaptcha API Key you need to whitelist your domain.

Takayuki Miyoshi has a good article written up on his website regarding setting up ReCpatcha Version 2 on Google which we suggest following:

https://contactform7.com/recaptcha-v2/

Finally, it may be a plugin conflict. We see there are a few JavaScript errors on the website and a few of them are in regards to Google. You may want to install the WordPress Health Check Plugin which will allow you to safely ( and for your logged in user ) disable plugins until you come across the plugin causing the issue. The Health Check Plugin also allows you to switch themes to the default theme ( again, just for your logged in user ) to see if it’s possibly a theme conflict.

https://make.ww.wp.xz.cn/support/handbook/appendix/troubleshooting-using-the-health-check/

The above steps can help you narrow down where the issue lies. Feel free to give us a list of your installed plugins and we can attempt to replicate the issue on our end, though if a premium plugin is the cause we unfortunately will not be able to try it out.

Could you provide link to your website that’s having the issue?

Does the form send whenever this plugin ( Contact Form 7 – reCaptcha v2 ) is disabled?

When this plugin is enabled and configured do you see the reCaptcha on the front-end of your website, on the form?

– – – – – – – – – –

If this issue occurs whenever the Contact Form 7 – reCaptcha v2 plugin is disabled then the main Contact Form 7 developer would have more insight on why this is. We would advise ( if this is the case ) that you create a new support thread using the Contact Form 7 support forums as the main developer there will be able to assist you best.

Thank you for re-enabling the plugin and updating to 5.1.1 – we apologize for any inconvenience this may have caused since users were unable to send form submissions during this time. That being said we were able to track down the issue of why the submit button is not active, it comes down to the themes CSS conflicting with Google’s ReCaptcha CSS.

– – – – – – – – – –

The Issue:

Google’s ReCaptcha script adds a static height onto the ReCaptcha field. The theme is then adding margin to the iframe inside the ReCaptcha field container, style.css line 941:

.entry-content embed,
.entry-content iframe,
.entry-content object,
.entry-content video {
	margin-bottom: 1.714285714rem;
}

The margin combined with the height is adding an invisible overlay on top of the button preventing it from being hovered or clicked.

– – – – – – – – – –

Proposed Solution:

You could follow the instructions below to add custom CSS which will solve your issue:

– Log into your WordPress site
– Using the left-hand menu, navigate to Appearance
– Underneath Appearance, navigate to Customize
– Using the left-hand menu items in The Customizer, click Additional CSS
– Copy and paste the following CSS into the textbox on this tab:

.wpcf7-form .wpcf7-recaptcha iframe {
	margin-bottom: 0 !important;
}

– Click the Publish button at the top of this page.

This will add CSS to your page which will remove the margin button on the iframe that was added by the theme.

– – – – – – – – – –

We will add this issue on our plugin roadmap to see if there’s anything we can do to prevent this happening in the future. That being said the above CSS should solve the issue for the shortterm. If it does not or you continue to run into issues please don’t hesitate to reply back and we may assist you further!