Submit not working

We viewed the linked page above and were able to submit the form with the ReCaptcha that is on the form. It appears to have submitted successfully and we ran into no issues or errors. Is it possible that a browser plugin may be causing the issue? Could you try a different PC and/or different browser and return with your results?

As I said, I’ve rolled back to CF7 5.0.5 and I’ve never had a problem with form submission with that version. The problem only exists with CF7 5.1.1 and the reCAPTCHA V2 plug-in. When it’s installed the submit button no longer works. If I delete the [recaptcha] tag from the form the button is active.
I’ve reactivated your plug in and updated CF7 to 5.1.1 so you can see the submit button is dead. Makes no difference on another PC or browser.
Any ideas appreciated or should I just stick with the previous CF7 version?

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!

You’re a star – it works perfectly. Many thanks for your prompt and effective support.