Recapcha V3 doesnt work on page with multiple forms


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!


<script src=""></script>
	grecaptcha.ready(function () {
		grecaptcha.execute('key2', { action: 'contact' }).then(function (token) {
			var recaptchaResponse = document.getElementById('recaptchaResponse');
			recaptchaResponse.value = token;


<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 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">

Please help! Thanks in advance!


You cannot have multiple elements with the same ID.


Yeah as i already told:


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


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


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


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


Thanks! Its fixed: