reCAPTCHA integration

Hi,

reCAPTCHA integration has already been discussed here, but I would like to open another topic to understand if there are news.

Me and my team are trying to integrate reCAPTCHA to our landing page, using custom JavaScript, so for example we define following code.

<script src = "https://www.google.com/recaptcha/api.js" async defer> </script>

<script>
  document.addEventListener ("DOMContentLoaded", function () {
    var formElement = document.querySelector ("form");

    formElement.setAttribute ("onSubmit", "return onFormSubmit ();");
    formElement.innerHTML + = '<div id = "recaptcha" class = "g-recaptcha" data-sitekey = "{KEY}" data-callback = "onCaptchaCompleted" data-size = "invisible"> </div>';
  });

  function onCaptchaCompleted (token) {
    console.info ("onCaptchaCompleted:" + token);
    // DO SOMETHING AND THEN SUBMIT FORM
  }

  function onFormSubmit () {
    event.preventDefault ();
    grecaptcha.execute ();
    return false;
  }
</script>

The onFormSubmit function is called, but the submit event is not stopped, we tried different approaches, but none worked.

We would like to intercept the reCAPTHCA token and send it to Unbounce inserting it in a form field, this because we have a WebHook that can validate the request, but we didn’t find a way to stop the event for generate the reCAPTCHA token.

Do you have any suggestions?

Thanks,
Giuseppe

I was able to get Invisible ReCaptcha working with this code. It’s important that the .js file is included last:

<script>
var  validating = false;

var formElement = document.querySelector ("form");
formElement.innerHTML += "<div id='recaptcha' class='g-recaptcha' data-sitekey='SITE_KEY' data-callback='onValidCaptcha' data-size='invisible'></div>";

var submitButton = formElement.querySelector(".lp-pom-button");
if (submitButton) {
    submitButton.onclick = checkCaptcha;
}

function onValidCaptcha(token) {
    submitButton.click();
}

function checkCaptcha(event) {
    if (! validating) {
        validating = true;
        event.preventDefault();
        grecaptcha.execute();
    }
}

</script>
 <script src="//www.google.com/recaptcha/api.js" async defer></script>
4 Likes

Shall I add this code in the script manager? If no, do I need to add this code in Unbounce page > Javascripts > Add New Javascript > Paste the above code > Placement > Head ?

Yes, add this to the script manager and then select which pages you want to include that script.

1 Like

@Kraig_Hiersche thanks for your quick response. Is this right? Please see the screenshot below. Also I have added site key for reCAPTCHA v3 https://developers.google.com/recaptcha/docs/v3

I did it for reCAPTCHA v2. I also selected “Before Body End Tag” for the Placement

1 Like

So, reCAPTCHA v2 as shown in screenshot below? Thanks

Screen Shot 2020-05-04 at 3.07.43 pm

Yep - that’s it

1 Like

I’m unable to submit forms following the above steps.

Steps to reproduce:

  1. When user clicks on submit button
  2. page reloads with below parameters instead of showing thank you message

https://mydomain.com/why-us/?name=test&email=test%40test.com&phone=0488242433&state=SA&g-
recaptcha-response=03AGdBq271hMGgOR8NOSwvNi9Gs2uBYghRTjRZOS_NPYXqbG504_oZ0P–2S9bLkKjP3yOyz3f1wJQRpwCMJ0ejcflFRuKPRhz6jyrzSJD_NP-kYcMsJ2NqWdlQG55ps7qxtwUrE5HNb5PohcUY3nougtV-KtWMwLcmFNP1xPdpcd0mSbZ1xMeEqYZQnTvN8cn3N4oAG3zeaHM-FxkUxBd9sBEx1If6LPRb8u17rn8Cn7anaiINGpZnoy8vAHED0vGhGvjgqRp57gLwP3tvSmMEftP1odNspTXNG42oa2VVF3gFWf6mUYFBd6P6CRclZu_XlXpnaVtG8iZHfR5Tanx3csBU2i-492zXKnBGxb2wc7kq4-sAYUTr2inNz9UatOBRGJtoIfiGVV_BPJl6_-jNKXF2XuRGh4PRQ

I am having problem whenever, user tries to submit form it doesn’t submits form and adds form content to url parameters https://mydomain.com?name=test+test&email=test%40test.com&phone=0488242430&state=SA&g-recaptcha-response=

It’s a little tricky, but you can debug this in chrome developer tools. I can take a look if you send a url

2 Likes

@Kraig_Hiersche thanks for helping out. Please see the link to URL https://discover.eshealth.com.au/why-us/ where the issue occurs :slight_smile:

I have selected a security preference in reCAPTCHA settings to low for users. Also, please see the reCAPTCHA warning below:

Hi all,

There seems to be a lot of confusion in this thread so hopefully the below overview would save you some time trying to fix something that it’s not going to work anyway.

reCAPTCHA requires 2 (two) pieces in order to function properly - front-end and backend (server).

In Unbounce you can only add the first part - the front-end.

However, you also need to setup your own server to actually interact with Google’s reCAPTCHA server. This is where that secret key Google gives you comes into play.

If you only add the front-end piece, you don’t actually have reCAPTCHA enabled for your form. At best nothing happens and at worst you might break your form.

The actual, properly working reCAPTCHA integration would depend on your site and server. There is no one-size fits all.

If you are experiencing higher than normal SPAM submissions, I would reach out to the awesome folks at Unbounce support first. They are the ones that can take a look at what’s happening and actually help point you in the right direction.

Unbounce does a lot behind the scenes to make sure SPAM submissions are stopped before a bot is able to submit the form.

Best,
Hristian

4 Likes