reCAPTCHA error message

[yonatangunops]

Describe the bug

I setup recaptcha with reCAPTCHA enterprise and the keys are set. I have tried all script loading method options. But I mostly get the error message on console that you see below. The recaptcha works when this error doesn't appear but if the error is shown it returns me back to the same page.

Steps to reproduce

1. Setup recaptcha for enterprise
2. Enable recaptcha for a multi-page form
3. Try navigating between pages on the form

Form settings

• Multi-page form: Yes
• Submission Method: Page Reload
• Client-side Validation: Yes
• Custom Form Templates: Yes

Craft CMS version

4.13.9

Plugin version

2.1.37

Multi-site?

Yes

Additional context

No response

[wijnenmik]

Hey, I am experience the same problem, tried version 3.0.15 and 3.0.13 but unfortunately it isn't working on both versions. Will try other versions too.

the g-recaptcha-response token resets on the second page, so the form will be marked as spam what I see.

[engram-design]

Just to be clear, do you have the "Show on All Pages" setting enabled for the form captcha settings? If this is the case, there's a known issue that I'm working on with multi-page forms for that. For now, I'd recommend sticking to a single captcha, placed on the last page of the form.

[yonatangunops]

Thanks for the response.

I have disabled the option but the JS error message still appears on all pages and not just the last one.

I have updated the plugin to the latest version (2.1.38) before and after the testing.

[engram-design]

@yonatangunops Can you comment on how you're rendering the form? I note you mention using custom templates, so I want to confirm that's all correct.

And any form of caching enabled (Craft template caching, static caching, Blitz, etc)?

[yonatangunops]

@engram-design

Here is how the form was rendered. I have used the first if to reset the form if someone is coming from a different page.

{% if craft.app.request.referrer != null and not (craft.app.request.url in craft.app.request.referrer) %}
            {% do craft.formie.setCurrentSubmission(form, null) %}
        {% endif %}

        <div  class="pb-14 pt-1 px-4 Formie-Container">
            <div id="form-wrapper">
                {{ craft.formie.renderForm(form.handle ?? '') }}
            </div>
        </div>

Yes, I'm using a custom template but I'm only using that to override the file upload field just for customization. He's the code I used to overwrite it.

{% set id = 'file-upload-' ~ random(2,9999999) %}

<div class="hidden">
    {{ fieldtag('fieldInput', {
        required: required ? true : false,
        id: id
    }) }}
</div>

<div class="py-2 px-3 pl-0 flex items-center" style="border: 1px solid var(--fui-border-color);" onclick="document.getElementById('{{ id }}').click();">
    <div style="background: var(--fui-primary-color); min-width: 122px;" class="text-white p-3 pl-5 pr-4 text-sm font-semibold flex justify-end cursor-pointer">Choose file title</div>
    <p class="grow pl-4 text-sm font-normal" id="{{ id }}-file">No file chosen</p>
</div>

<script>
    document.getElementById('{{ id }}').addEventListener("change", (event) => {
        const files = event.target.files;
        document.getElementById('{{ id }}-file').textContent = [...files].map((f) => f.name ).join(', ')
    });
</script>

We use craft template caching but it's not enabled on the form. Only used on the footer and the menu of the site.

[engram-design]

Great, just wanted to confirm those things before proceeding. Your rendering shouldn't pose an issue I don't believe.

Can you let me know what "reCAPTCHA type" you have set? I've tested v3 and v2, without seeing that error. But, from what I can tell, there's an issue loading the reCAPTCHA script from https://www.google.com/recaptcha/enterprise.js, meaning that the captcha can't render.

[yonatangunops]

@engram-design I'm using the reCAPTCHA enterprise.

[engram-design]

Understood, but what value have you picked in the settings:

And in Formie's settings.

[yonatangunops]

@engram-design

recaptcha settings

formie settings

[engram-design]

Right, I'm managing this via https://www.google.com/recaptcha/admin/enterprise but I can see you're on v3/score based.

Is there any network errors for loading the JS for reCAPTCHA - i.e. the https://www.google.com/recaptcha/enterprise.js file in your browsers network tools?

[yonatangunops]

I just rechecked and all JS is loaded with 200 and 304 status. For reference, refer to the screenshot below.

I also noticed that the error doesn't appear when I "empty cache and hard reload" on the website. Reappears when I do a normal refresh.

[engram-design]

So those scripts loading correctly is at least a good first check. According to the error, it's happening here where recaptcha as a variable is undefined.

We include a check to ensure that recaptcha is loaded so it seems very odd this is throwing an error.

I'll continue to try and replicate this.

[yonatangunops]

@engram-design @wijnenmik

The issue was resolved by disabling google search widget which also used its own recaptcha.

Thanks for taking the time to help with this.

[yonatangunops]

@engram-design @wijnenmik

Is it possible to make sure that reCAPTCHA could work together with google search widget without any issue?

[engram-design]

I'll have to investigate what the google search widget does, but thanks for narrowing that down!