Streaming live at 10am (PST)

Recaptcha form can be submitted without ticking the recaptcha radio button

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

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.

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: https://developers.google.com/recaptcha/intro

​We would suggest using the most recent implementation, reCAPTCHA v3: https://developers.google.com/recaptcha/docs/v3

Hopefully, this was helpful. :nerd_face:

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,

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 https://www.google.com/recaptcha/.

  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>```