[SOLVED] Custom reCAPTCHA callback

Hello,

I have a quick question… where should I enter the secret key of my recaptcha if I do it not via Webflow component but via custom code ?

The custom code for a recaptcha seems to look like this:

<form action="something.php" method="post">
  <input type="text" size="40" name="name">
  <div class="g-recaptcha" data-sitekey="xxxx" data-callback="enableBtn"></div>
  <input type="button" value="Submit" id="buttonLock">
</form>

<!-- recaptcha library -->
<script src='https://www.google.com/recaptcha/api.js'></script>

Here the simplified codepen

However, I only see where to put the sitekey and not the secret key ?
Any idea ?

The reason I’m asking is because I need to setup a callback on the recaptcha itself, so that when the recaptcha is checked, the submit button is enable again…


That would be in your app. Not client side. So if you were using your own form processor you would need to integrate recaptacha in it.

1 Like

Thanks @webdev,

quick question, I figured out I could actually set a data attribute to the native Webflow recaptcha element.

The recaptcha data attribute looks like this in Webflow:
data-callback="enableBtn"

The submitt button id attribute looks like this in Webflow:
id="btnLock"

The javascript code looks like this Webflow:

// initially disable the submit button
document.getElementById("btnLock").disabled = true;

// callback enabling submit button on recaptcha successful
function enableBtn() {
  document.getElementById("btnLock").disabled = false;
}

Both the recaptcha and button attribute can be seen when inspecting the source code of the page, unfortunately, the submitt button isn’t disabled on page load as it should be (as per the javascript snipet)

The expected behaviour can be seen in this codepen.
The read-only link
The actual link to the form

Any idea why the submit button isn’t frozen on page load ?



EDIT:
It seems, the code works as expected when the submit button isn’t in the form component… as soon as I put the submitt button inside the form element, its behaviour is enabled despite the javascript supposingly disabling it…

Isn’t it weird ?

I am almost successfull in my endeavour…

I successfully pushed a script to the Webflow wrapper so that the submit button gets disabled on DOM ready. I Successfully explicitly rendered a reCAPTCHA with custom code. This reCAPTCHA successfully triggers the callback which is supposed to enable again the submit button… but it doesn’t ! I know the callback is being called since I put an alert message in my callback and this alert message pops up… only the enabling part doesn’t work.

@webdev, @cyberdave any lead :slight_smile: ?

Here is the link to the website
Here is the link to the quick video recording
Here the read-only link

Here is the reCAPTCHA + callback function:

<script>
// 🍅 explicitly render reCAPTCHA
var onloadCallback = function() {
  grecaptcha.render("html_element", {
    sitekey: "XXX",
    theme: "dark",
    callback: enableBtn
  });
};

// 🍆 callback on reCAPTCHA successful
function enableBtn() {
  alert("reCAPTCHA callback was just called");
  submitBtn.disabled = false;
  submitBtn.value = "Submit";
}
</script>

here is the Webflow wrapper disabling the submit button:
(the only way I found to disable a button inside a Webflow form)

<script>
// 🥑 Webflow asynchronous wrapper
var Webflow = Webflow || [];
Webflow.push(function() {
  // disable submit button
  var submitBtn = document.querySelector("input[type=submit]");
  submitBtn.disabled = true;
  submitBtn.value = "disabled";
  alert("Webflow wrapper disabled submit button");
});
</script>

I have tried to push the code to enable the button again with the webflow wrapper method, but still no luck :confused: The code exectute succesfully until the very last code block and I get the alert “reCAPTCHA callback was just called” but the last few line to enable the submit button fails somehow to execute.

Read-only link here.

Any idea ?

<!-- async reCAPTCHA library-->
<script src="https://www.google.com/recaptcha/api.js?onload=onloadCallback&render=explicit&hl=en" async defer></script>

<script>
var Webflow = Webflow || [];
const submitBtn = document.querySelector("input[type=submit]");
const log = console.log;

// 🥑 disable submit button
Webflow.push(function() {
  submitBtn.disabled = true;
  submitBtn.value = "disabled";
  log("💡 Webflow wrapper disabled submit button");
});

// 🍅 explicitly render reCAPTCHA
var onloadCallback = function() {
  grecaptcha.render("html_element", {
    sitekey: "XXX",
    callback: enableBtn
  });
};

// 🍆 callback enable submit button
function enableBtn() {
  log("reCAPTCHA callback was just called");
  Webflow.push(function() {
    submitBtn.disabled = false;
    submitBtn.value = "enabled";
    log("💡 Webflow wrapper enabled submit button");
  });
}
</script>

EDIT

I feel ashamed, I forgot to declare the submit button as global variable… now it works :slight_smile:

3 Likes

So for this to work you ALSO need to have the enable btn as part of the webflow push - do you need to the reCaptcha in there too - or can it be rendered outside? I’m struggling as to when “Normal HTML and JS” will work and when it needs to be wrapped to something like this.

Where do I enter all of this code? In the footer custom code? Where do I put the html?