ReCaptcha v3 - reset, re-initiate, re-execute to avoid timeout?

Advanced Development
1

ReCaptcha v3 looks great; but if we have a form in the footer or in a modal popup, we’ve experiencing timeout issues.

Has anyone figured out a way to reset the ReCaptcha as soon as someone clicks on a form field or when the modal popup button is clicked?

2

Hi @shannonlynd,

According to the docs: https://developers.google.com/recaptcha/docs/invisible#js_api

grecaptcha.reset(); is the function to do this. You would need to trigger it when appropriate for your site.

Cheers

3

@James, I think that API is only for v2? Have you been able to get that to work with v3?
I think v3 has much limited API options from what I can tell…?

@shannonlynd I’ve seen odd behaviour too with form submissions failing and an error response that the recaptcha failed (v3). Are you sure it’s a timeout issue though? as i’ve had it happen with very short submission times too.

4

Hmm I got there from a stack exchange solution, but i think your right… looks like that reset call is only for v2 - Sorry @shannonlynd

However… calling the grecaptch.execute() function that gets rendered on the page , will reset the value by the looks. (https://stackoverflow.com/questions/53906217/google-recaptcha-v3-widget-id-when-loading-captcha-through-url)

ie - this is the function appears in a script tag, in treepl, in my test page. Note you will need to adjust all your values accordingly:

grecaptcha.execute('[Your recaptcha ID]', {
	action: 'general_form_contact_us'
}).
then(function(token) {
	document.querySelector('.g-recaptcha-response-v3-contact_us').value = token;
});

I tested by copying this and pasting in the chrome console. After pressing enter it then changes the value of the hidden field.

So what I would do is place this in a function and call it whenever you need to reset it. ( I don’t have the time to test this at the moment - but it seems to work)

Aside from testing this, I don’t see another solution at the moment.

Unless @Adam.Wilson has another idea?

5

Yep, sounds good. That’s probably how I’d approach it too.

1 Like
6

I’ll let you all know how it works out :slight_smile:

7

It’s not working for me. I setup a test page. Let me know if I missed something.
https://aim.treepl.co/test-recaptcha-reset

For test purposes, I added a function that is called on the button click.

<script>
$("#buttonreset").click(function() {
    var lastval = $(".g-recaptcha-response-v3-recaptcha_test").val();

    grecaptcha.execute('6Ld5QIoUAAAAAKznGOlK7z6mgqJ8ajRUc3CK5M17', { action: 'general_form_homepage_contact'}).then(function(token)
{document.querySelector('.g-recaptcha-response-v3-homepage-contact').value = token;});

    var thisval = $(".g-recaptcha-response-v3-recaptcha_test").val();
    if(thisval == lastval) {
    alert("Recaptcha input field value did not change.");
    }
});
</script>
8

I think your script is finishing before the recaptcha has generated the new value.
One solution might be to put that last check in a setTimeout.

Also, you still had reference to a different form (homepage-contact) so you may need to change those too:

var lastval = $(".g-recaptcha-response-v3-recaptcha_test").val();

grecaptcha.execute('6Ld5QIoUAAAAAKznGOlK7z6mgqJ8ajRUc3CK5M17', { action: 'general_form_recaptcha_test'}).then(function(token)
{document.querySelector('.g-recaptcha-response-v3-recaptcha_test').value = token;});

setTimeout(function(){
    var thisval = $(".g-recaptcha-response-v3-recaptcha_test").val();
    if(thisval == lastval) {
    alert("Recaptcha input field value did not change.");
    };
}, 3000);
9

Thanks @Adam.Wilson & @James,

That did it! It works.

1 Like
10

It’s implemented on this home page - https://aim.treepl.co/, and the reset happens when the “Ready to Get Started” dropdown form is opened.

11

Nice one @shannonlynd!

12

@Adam.Wilson can this be documented in the docs as many sites have multiple forms on one page and we are having issues with this so knowing where to put this code and how to use it on-page is really important.

13

Hi @SiroccoDigital. I’ll look at putting a demo together for the Demo Site with some options for working with recaptcha v3. But as for official documentation, this isn’t strictly Treepl CMS functionality and it’s not confirmed what the actual issue here is and if this is indeed the best practice solution.

I’m not sure whether it is to do with a timeout issue, or multiple forms on a page, or even if the issues experienced are related.

Implementing this code would also vary depending on your setup and use-case.
It might be triggered on a particular user interaction, a set timer, just before form submit, etc…

I think the form issue/s need further investigation/discussion as they seem fairly allusive at the moment.