EPiServer Forms Samples - ReCaptcha Not Rendering on form.

Tyler Story

Vote:

Hello,

I'm trying to add a ReCaptcha to a form created through the EPiServer.Forms plugin. From my understanding it should be as simple as adding the EPiServer.Forms.Samples package and while I can see the ReCaptcha element, add it to my form content and enter the site/secret keys in the element's settings it's not showing up on the actual form even though it seems to be somewhat functional as it's giving me a validation error when I try to submit my form:

Before submission:

After submission:

The element does seem to be there but it's just not showing. When I inspect the source I'm finding this block of HTML:

<div id="5c62f856-6ee9-412c-ab7b-29eec2521ae7" class="Form__Element Form__CustomElement FormRecaptcha" data-epiforms-element-name="__field_3301" data-epiforms-sitekey="[MY-SITE-KEY]-IBoCxsto">
	<span role="alert" aria-live="polite" data-epiforms-linked-name="__field_3301" class="Form__Element__ValidationError" style="display:none;">
	</span>
</div>

My guess is the scripts/styling aren't somehow being loaded. I noticed there's an inline script that contains a variable for additional scripts/styling that's trying to extend them into the EPiServer Form but I'm not seeing them in my sources/history settings or any 404 errors in my console:

Has anyone experienced a similar issue before? If it helps here are teh versions I'm using for the CMS/Forms/Forms Samples:

CMS Version - 11.15.1
EPiServer.Forms Version - 4.30.4
EPiServer.Forms.Samples Version - 3.7.0

Thank you in advance for any help.

#281769

Edited, Jun 13, 2022 14:22

Tyler Story

Vote:

Just a quick update but I am sure the problem is the scripts aren't being loaded. I moved jquery-ui.modified.js and EPiServerFormsSample.js out of the ViewMode folder and went to my form page. No 404 console errors.

Is there something that could be causing $$epiforms.extend to not load the resources or do it too late?

#281772

Jun 13, 2022 19:53

Praful Jangid

Vote:

Have you configured it to add keys? See below link for more information.

https://webhelp.optimizely.com/latest/en/content-cloud-for-editors/forms/form-element-types.htm#ReCAPTCHA

If yes, then in google's account have you configured to allow your domain (if it's not completely unrestricted)?

#283549

Jul 12, 2022 2:04

jly@immeo.dk

Vote:

Hi, we're currently experiencing the same issue. It's also not clear to us, how to choose the old style recaptcha (ie text/click based validation) or the more lowkey v3 version.

#283858

Jul 18, 2022 10:13

Praful Jangid

Vote:

Do you want to use the old version of recaptcha? The following post may help you.

https://world.optimizely.com/forum/developer-forum/Forms/thread-container/2020/2/recaptcha-not-working/

#283860

Edited, Jul 18, 2022 13:29

Try our conversational search powered by Generative AI!

EPiServer Forms Samples - ReCaptcha Not Rendering on form.