I am attempting to add reCaptcha to a form on our episerver site. I have done the following:
<script src="https://www.google.com/recaptcha/api.js" async defer>
currently the forms.samples package is version 3.5.0 and episerver.forms is 4.27.0
thank you for any assistance!
Have you tried without having the script added to your root file? We've implemented reCAPTCHA in much the same way, but we didn't have to manually add the api.js script, the form element from EPiServer.Forms.Samples did that for us.
Hi Alex Brown
Thank you for the reply! I tried removing the script include (so now it's just the package itself) and I see the same behavior. no "I'm not a robot" and when trying to submit, "Invalid Captcha value". However without the script include I don't see the console error from the api.js library.
hmm... how have to got reCAPTCHA configured in the Admin Console? Is your reCAPTCHA type 'v2 checkbox'?
It doesn't ask.. that's what is strange. Basically I add the recaptcha widget and edit it, and the only "settings" it asks for is site key and secret key.
All I added was Forms.Samples though through nuget package manager, maybe I'm just missing important steps? Clearly it "took" the package, becasue prior to adding the package reCaptcha wasn't an option under Form elements and now it is.
Sorry, I mean on google.com/recaptcha/admin
oh wait, did you mean admin console on Google? sorry for the confusion! Yes it's set to v2 Checkbox as the type.
Can you see RecaptchElementBlock.js and api.js?onload=initRecaptch.... being loaded onto your page?
perhaps an adblocker preventing recaptcha from loading?
Thank you again for your assistance!
I would expect to see two things on your page:
1) In the DOM you should see EPiServer.Forms scripts loading in some external files, which should include
2) Those external files being loaded into the page:
Are you able to see those things?
<div class="Form__Element Form__CustomElement FormRecaptcha" data-epiforms-element-name="__field_24243" data-epiforms-sitekey="MYSITEKEY" id="THEGUID"><div class="g-recaptcha"></div><span data-epiforms-linked-name="__field_24243" class="Form__Element__ValidationError" style="display:none;"></span></div>
Inside the getFormInitScript that loads on the episerver.forms/datasubmit I do see a reference to EpiServer.Forms.Samples.implementation.Validation.RecaptchaValidator with the message for recaptca value being invalid, but no scripts appear to be loading to actually render the recaptcha? Maybe I should remove the package, re-add it and rebuild?
Wait! I think I have "solved" it. Well at least, I noticed we are also having some kind of strange console js error on the form - "epi" is not defined. Now we also have this problem on production which doesn't appear to actually cause any issue (production forms work).
But I was looking into the solution for that console error as i only noticed it when investigating reCaptcha problems. When I resolved that error, now my recaptcha just works as expected!
thank you for the assistance Alex! I really appreciate you taking the time.