1

I'm trying to add the recaptcha invisible version 2 to the Sitecore form. I created the invisible recaptcha custom form element with the custom recaptcha validation

I follow this article to add a new field Form Submit Script in Sitecore and update the view file for submit button \Views\FormBuilder\FieldTemplates\Button.cshtml

In the Sitecore field "Form Submit Script", I call grecaptcha.execute();

In the view file for the recaptcha custom form element, I have a data-callback method to assign the recaptcha token to the hidden field

function onSubmit(token) {
   document.getElementById("@Html.IdFor(m => Model.Value)").value = token;
}

Since this is the invisible recaptcha, I must bind the challenge to the submit button.

The issue is when the user submits the form, while the recaptcha generates the token and has not assigned that token to the hidden field yet, the form has already been submitted, so when it comes to the recaptcha validation the token is null.

How to fix this issue? or is there any better way to add the recaptcha invisible version 2 to Sitecore form?

1
  • As what I understand V2 will show an Invisible reCAPTCHA badge. V3 is invisible without any user interaction.
    – Danny Paul
    May 15 at 4:10

1 Answer 1

1

When you are using version 2 of google recaptcha, you can add invisible captcha and hidden element to send g-recaptcha response to server as below.

<div class="g-recaptcha" data-sitekey="site_key" data-size="invisible" data-callback="onSubmit"></div>
<input type="hidden" class="g-recaptcha-hidden" />

Inside the javascript, call grecaptcha.execute to programatically trigger recaptcha as below.

var currentForm;
function onSubmit(token) {
    document.querySelector(".g-recaptcha-hidden").value = token;
    currentForm.submit();
}

var formSbtElement = document.querySelector("form input[type='submit']");
if(formSbtElement){
  formSbtElement.addEventListener("click",function (event) {
    event.preventDefault();
    grecaptcha.execute();
    currentForm = event.currentTarget.closest('form');
  });
}

document.querySelector("form").setAttribute("action", window.location.pathname);

if ( window.history.replaceState ) {
  window.history.replaceState( null, null, window.location.href );
}

In the above function, token retrieved from the callback(onSubmit) is set in the hidden field and sent along on the form submission. This token then can be retrieved at backend for further verification.

Token will be sent in the request payload as below:

enter image description here

In case the form submission gives error, you can add input type hidden element before form submission as below, on the callback function.

function onSubmit(token) {
   document.querySelector(".g-recaptcha-hidden").value = token;
   var input = document.createElement("input");
   input.setAttribute("type", "hidden");
   input.setAttribute("value", "Submit");
   input.setAttribute("name", 
   currentForm.querySelector("input[type='submit']").name);
   currentForm.insertBefore(input,currentForm.firstChild);
   currentForm.submit();
}

Note: We need to add input type hidden element on the above script since inside the BaseFormBuilderController there is a check for navigation data. If navigation data is null, it sends a Bad request error.

Navigation data is created from NavigationDataModelBinder class. Inside this class, it checks for navigation button length should be greater than one else it sets to null. Hence one more submit button is added though the script as the first child in order to prevent this issue.

enter image description here

Navigation buttons are read from the payload as below. The value of the NavigationButtons field is read which is then used to calculate other two navigation buttons.

enter image description here

Let me know in case you face any issues. Hope this helps!!!

23
  • Hi @ckhanna, I tried that, but i get token is null. on developers.google.com/recaptcha/docs/v3, I see similar example for recaptcha v2. I'm using recaptcha invisible version 2. Does you code work with recaptcha invisible version 2?
    – mv98
    May 15 at 18:26
  • @mv98 I modified the above answer to work with recaptcha version 2 as well. Hope this helps!!!
    – ckhanna
    May 15 at 21:31
  • @chhanna, thanks for your reply, I will try this. just to be clear, this is for Sitecore form, right?
    – mv98
    May 16 at 21:43
  • yes @mv98 this is for Sitecore form..Let me know in case you face any issues.
    – ckhanna
    May 17 at 6:20
  • hi @ckhanna, I tried that. I can see it generates the token and assign it to the hidden field. but after submitting the form, it goes to this url /formbuilder?sc_site=chrobinson-en-us&fxb.FormItemId=2c7c9f9e-f420-4639-b297-bb1dd30096ba&fxb.HtmlPrefix=fxb.d57c0020-5637-46f6-b8f7-d62f84629bb8 and get 400 error (Bad request)
    – mv98
    May 17 at 14:30

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.