Recaptcha form can be submitted without ticking the recaptcha radio button

Design help Animations & Interactions
1

I added the recaptcha to our “contact us” form and after still receiving loads of spam, I realized the form can still be submitted without needing to tick the recaptcha box. I went through all of the information I could find on WebFlow with no luck. Any help would be appreciated, thank you.

https://preview.webflow.com/preview/dominknow?preview=323d0edef1f471a621123bd79a5bbfaf
http://dominknow.webflow.io/contact-us

2

I’m having the same issue, I added recaptcha but the form work even if i don’t click on “i’m not a robot”. I’ve tried in incognito mode and clear cache in all browsers.

3

Hi @Darron & @iiitide,

Thank you so much for getting in touch about your reCAPTCHA not working, and we’re here to help! :webflow_heart:

​Currently, reCAPTCHA will not function when you’ve set a custom form action to collect your form submissions:
CloudApp

​A great workaround is implement a custom reCAPTCHA using an HTML Embed element within your form: Developer's Guide  |  reCAPTCHA  |  Google for Developers
​
​We would suggest using the most recent implementation, reCAPTCHA v3: reCAPTCHA v3  |  Google for Developers

Hopefully, this was helpful. :nerd_face:

4

Hey @mistercreate

If we activate reCapchta on our site, will reCaptcha then be required for custom HTML embed forms too? Or only the Webflow created forms?

We have a bunch of Foxycart form embeds on our site and don’t want to break those.

Thanks,

5

If you need to add reCaptcha with a custom HTML embed, you can follow these steps. We used javascript to disable the submit button on our form if the reCaptcha loads successfully on page load. Then we use a callback function to enable the submit button when the user passes the captcha test.

  1. Register your website with reCaptcha reCAPTCHA.

    Create reCAPTCHA
    Create reCAPTCHA753×1002 108 KB

  2. Copy your reCaptcha Site Key

  3. Add an ID to the submit button of your form so that we can target the button in javascript. We used submitRequest. If you view source on the page, you should see the id on the submit button like below.

<input type="button" value="Submit" id="submitRequest">

  1. Add a custom html element inside of your form with the following code. Replace your_site_key in the code below with the key you copied in step 2.

<div class="g-recaptcha" data-sitekey="your_site_key" data-callback="enableBtn"></div>

  1. Add the code below to your website footer. This includes the reCaptcha script, load function that disables the button, and the enable button callback function.
<script>
function onloadCallback() {
    document.getElementById("submitRequest").disabled = true;
  };
function enableBtn(){
   document.getElementById("submitRequest").disabled = false;
 }
</script>
<script src="https://www.google.com/recaptcha/api.js?onload=onloadCallback&render=explicit" async defer></script>
3 Likes
6

You are a lifesaver, thanks for this!

1 Like
7

I spoke too soon… I’m still getting spam submissions even though the forms and recaptchas are working, at least superficially. I’m lost, I may have to reset back to my less-than-ideal method of custom embed with ugly forms.

8

Was anyone ever able to get this working? I’m still hunting for a solution to custom POST submit types using reCaptcha

9

I commented on something similar back in 2018.

I had to use Basin form handler on an exported site but wanted to use my Webflow design. Still works well. The recaptcha id info had to be entered using Basin’s keys rather than the one generated through my own google account. This could be the case with the custom post tool you’re using.

10

This is the correct answer! Sadly webflow have too many gaps in experience during the implementation of some features.