Hi LauraK,

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.

Alex

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.

Thank you,

Laura

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?

Hi Alex

I do not think it is loading- i just noticed in the form on page editing view it says reCAPTCHA: Javascript is required to display reCAPTCHA

But then when I include the javascript library in root, it gives me the console error. 

When you say ad blocker, how can I investigate if that is happening? we do have plenty of other javascript libraries in use on our site, also we used CAPTCHA with success before and are using CAPTCHA in production.

It seems to me like I am supposed to include javascript somewhere but then others say they include the nuget package and that takes care of everything so I am confused.

Thank you again for your assistance!

Laura

We get the same message about javascript when looking at the form via OPE. So I wouldn't worry about that.

Re Adblocker, I just wondered if you were using one in the browser which is stopping the recaptcha javascript from loading. Perhaps a Chrome extension or FF built in adblocker?

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 

"/util/EPiServer.Forms.Samples/ClientResources/ViewMode/RecaptchaElementBlock.js","https://www.google.com/recaptcha/api.js?onload=initRecaptchaElements&render=explicit&hl=en"

2) Those external files being loaded into the page:

Are you able to see those things?

Hi Alex

no, I don't see those - it seems all I can see in the source is the div for recaptcha rendering, and then on submit of the form, the  div contains the invalid captcha message. But I don't see any javascript files loading that appear to relate to recaptcha. 

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

Thank you,

Laura

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.