This will show you how to add multiple Google Captcha per page and disable the submit button until the user clicks and verify’s that they are not a robot.
First, we create the forms. You can follow along in the comments how to setup the ID’s that we will target later to render the Captcha
Second, before the end of your web page, we will include the required javascript from Google Captcha.
<script src=”https://www.google.com/recaptcha/api.js?onload=myCallBack&render=explicit” async defer></script>
Third, between the <head></head> tags, insert the following functions that will render your Google Captcha. Important things to note:
- there are test keys you can uncomment to test locally on your computer, but you must switch those to your own keys in production
- your function, “myCallBack” is called from the script you included above before the end of your file. You are going to do this in render mode, so that also needs to be in the script call above.
Above the myCallBack function, in the same script tags, place the following functions that will enable your submit button to be clicked when a user successfully clicks the captcha.
Finally, we need to disable the submit button before the user clicks on the captcha. Do that by placing the following at the end of your webpage before the call to the Google Captcha script.
And this is what it looks like all together. If you need to see other ways to render with other parameters, you can do so at Google’s documentation.