Recapcha V3 doesnt work on page with multiple forms

#1

Hello, i have an issue with Google Recaptcha V3. Id does work on single form but works only for first form if in page are more than 1 form :frowning:
How to make it work for all forms?
I know that issue is with id="recaptchaResponse" but i have no ideas how to fix this!

Javascript:

<script src="https://www.google.com/recaptcha/api.js?render=key1"></script>
<script>
	grecaptcha.ready(function () {
		grecaptcha.execute('key2', { action: 'contact' }).then(function (token) {
			var recaptchaResponse = document.getElementById('recaptchaResponse');
			recaptchaResponse.value = token;
		});
	});
</script>

Forms:

<form class="user" action="" method="post" name="form1" id="form1">
	<input type="hidden" name="source" value="form1">
	
	<button type="submit" class="btn btn-success">Submit 1</button>
	
	<input type="hidden" name="recaptcha_response" id="recaptchaResponse">
</form>

<form class="user" action="" method="post" name="form2" id="form2">
	<input type="hidden" name="source" value="form2">
	
	<button type="submit" class="btn btn-success">Submit 2</button>
	
	<input type="hidden" name="recaptcha_response" id="recaptchaResponse">
</form>

Please help! Thanks in advance!

#2

You cannot have multiple elements with the same ID.

#3

Yeah as i already told:

#4

“My problem is with the ID”… change the ID.

#5

I dont want to make multiple same codes of javascript! Is there a chance to do it with class?

#6

And how would the code know which form has been submitted then?

#7

That is why i ask this question! To know how to do it in best way!?

#8

Thanks! Its fixed: https://stackoverflow.com/questions/56515261/recapcha-v3-doesnt-work-on-page-with-multiple-forms