Error "reCAPTCHA has already been rendered"

Get Help
,
1

Hello!
When I try to include twice the same form on the same page (once in the body, once in a popup) I get the error “reCAPTCHA has already been rendered”. Screenshot => Screenshot on 2020-11-17 at 11-53-48.png • Droplr.
Is there a way out other than duplicating the form?
Thank you,
Guido

PS: This issue is related to Two forms in the same page with reCAPTCHA [RESOLVED] but it’s not the same, because I need to include twice the same form.

2

You should not include the same form twice in a page. That will result in duplicated IDs, which will not be valid HTML and will create problems even without the CAPTCHA issue. I recommend creating another form and embedding two different forms in the page. Thank you.

3

What is the solution to add the same form more than once please? We have a slideshow with a sign form in it. When there are two or more slides there are loads of console errors to do with ReCaptcha. Its not feasible to create a new form for every slide we add.

Also, it doesn’t look good if we take the form out of the slider and lay it on top, it needs to be a sign up form inside each slide.

So the GF plugin should be able to determine an ID is used and give it a different one, increment each recaptcha field or something.

Thanks

4

Hi Kiran. There is currently no workaround to have the same form on a page more than one time. If you would like to suggest that for inclusion in the future, I recommend adding that to our product roadmap. Click the blue :heavy_plus_sign: in the lower left on this page to add a note for our product team:

https://www.gravityforms.com/gravity-forms-roadmap/

Thank you.

5

On a bespoke site some time ago, we just added different IDs for the ReCaptcha. So there must be a work around because it is possible from our bespoke code? So GF plugin needs a way to have unique IDs when outputting the code more times than one. So I imagine there must be a work around surely? Can your code not check if the form is used and if so increment the ID? Obviously we need guidance from you as we do not know the code. All I know is its possible to do from Google’s perspective if we can not have the same IDs.

I think we did it with Contact Form 7 actually because we can add our own HTML for the form output so can control the ID in the ReCaptcha field, I cant remember exactly how we passed the ID to the plugin PHP code, but the plugin PHP code can then take the ID from the HTML and use that in the ReCaptcha functionality. Maybe it was using shortcodes, so we passed in an ID in the shortcode, so then when adding the shortcode multiple times, for the same form, we can pass our own ID to be used in the ReCaptcha field.

Thanks

6

This seems to be working OK, although prefer it hard coded in PHP, tapping into shortcodes, I hate relying on JS to get things to work, although I guess ReCaptcha needs JS doesn’t it, so probably OK:

$('.ginput_recaptcha').each(function(i)
{
    var thisID = $(this).attr('id');
    $(this).attr('id', thisID+'_'+i);
});

I do not get errors when repeating forms, and ReCaptcha is working OK.

2 Likes
7

This worked perfectly for me, thank you Kiran Kerai

1 Like