Implementing g-recaptcha-response validation #44

New issue

Open

opened 2025-10-14 16:23:28 -06:00 by navan · 0 comments

navan commented

2025-10-14 16:23:28 -06:00

Owner

Originally created by @heliusAurelius on 11/18/2021

I managed to implement a simple Google reCAPTCHA validation in the form by adding in the reCAPTCHA, and using javascript to enable the submit button once it is solved. Doing so, captures the reCAPTCHA response in the sheet and email notification. But it seems that there are some bots which account for this and 're-enable' disabled submit buttons as well as ignoring my honeypot in the form.

Is there a way to add the required attribute to this reCAPTCHA response to prevent users/bots from simply re-enabling the submit button by editing the page code? When I add 'required' to the reCAPTCHA div, it doesn't validate the same way as the rest of the fields, and adding a script to return onsubmit="false" for the form seems to fire after the action="[google script]".

My form code is as follows:

<form class="gform" action="[google script URL]" method="POST">
	<div class="form-group" hidden>
		<label>
			Validation
		</label>
		<input name="honeypot" class="form-control"/>
	</div>
	<div class="form-group">
		<label>
			Name
		</label>
		<input name="Name" class="form-control" required />
	</div>
	<div class="form-group">
		<label>
			Email
		</label>
		<input name="Email" class="form-control" type="email" required />
	</div>
	<div class="form-group">
		<label>
			Message
		</label><textarea name="Message" class="form-control" rows="4" cols="50" required ></textarea>
	</div>
	<div align="center" class="g-recaptcha" data-sitekey="[captcha public key]" data-callback="callback"></div>
	<br />
	<button id="submit-button" class="btn-islamic-green btn-rd bloc-button btn btn-d btn-lg btn-block" type="submit" disabled="disabled">
			Submit
	</button>
	<div style="display:none" class="thankyou_message">
	<p class="text-center">Thanks for reaching out! I look forward to connecting with you soon!</p>
	</div>
</form>

I use page-level JS to re-enable the submit button once the reCAPTCHA is solved

<script type="text/javascript">
	function callback() {
	  const submitButton = document.getElementById("submit-button");
	  submitButton.disabled = false;
	}
</script>

*Originally created by @heliusAurelius on 11/18/2021* I managed to implement a simple Google reCAPTCHA validation in the form by adding in the reCAPTCHA, and using javascript to enable the submit button once it is solved. Doing so, captures the reCAPTCHA response in the sheet and email notification. But it seems that there are some bots which account for this and 're-enable' disabled submit buttons as well as ignoring my honeypot in the form. Is there a way to add the required attribute to this reCAPTCHA response to prevent users/bots from simply re-enabling the submit button by editing the page code? When I add 'required' to the reCAPTCHA div, it doesn't validate the same way as the rest of the fields, and adding a script to return onsubmit="false" for the form seems to fire after the action="[google script]". My form code is as follows: ``` <form class="gform" action="[google script URL]" method="POST"> <div class="form-group" hidden> <label> Validation </label> <input name="honeypot" class="form-control"/> </div> <div class="form-group"> <label> Name </label> <input name="Name" class="form-control" required /> </div> <div class="form-group"> <label> Email </label> <input name="Email" class="form-control" type="email" required /> </div> <div class="form-group"> <label> Message </label><textarea name="Message" class="form-control" rows="4" cols="50" required ></textarea> </div> <div align="center" class="g-recaptcha" data-sitekey="[captcha public key]" data-callback="callback"></div> <br /> <button id="submit-button" class="btn-islamic-green btn-rd bloc-button btn btn-d btn-lg btn-block" type="submit" disabled="disabled"> Submit </button> <div style="display:none" class="thankyou_message"> <p class="text-center">Thanks for reaching out! I look forward to connecting with you soon!</p> </div> </form> ``` I use page-level JS to re-enable the submit button once the reCAPTCHA is solved ``` <script type="text/javascript"> function callback() { const submitButton = document.getElementById("submit-button"); submitButton.disabled = false; } </script> ```