Zoho Webforms embedding Google reCaptcha Instead of their own captcha

Hello friends,

Google is best in providing services up to the standards because of its access to the billions of users and their behviour analysis. Their reCaptcha service works on the server based technology. It keeps on checking IP address if it finds spam, then it will ask for captcha verification, otherwise will let you tick the check box and pass the form.

What is Captcha ; for simple people:

CAPTCHA is an acronym which stands for Completely Automated Public Turing Test to Tell Computers and Humans Apart.The most common form of CAPTCHA is an image of distorted letters or selection of visual images which robot can’t differentiate. So while using CAPTCHA the goal is to create a test which can only be passed by humans. Most of the CAPTCHA use visual images for the test.

Here is I have embedded into zohocrm webform contact page:

Step 1:

Make a recapcha account using v2 https://www.google.com/recaptcha/intro/v3.html

Step 2:

Add this code in body: <script src='https://www.google.com/recaptcha/api.js'></script>
Add this where you want to dispaly the captcha:

<div class="g-recaptcha" data-sitekey="here comes api key in alpha-numeric" data-callback="recaptcha_callback"></div>

(Coustom function name data-callback=”recaptcha_callback” added)

Step 3:

Add a id in submit button and make this button “disabled” by default:

<input id='register-btn' type='submit' value='Submit' disabled />

(id name: id=’register-btn’)

Step 4:

Script code to removed “disabled” attribute from button on captcha filling and CSS cursor

<script>
function recaptcha_callback() {
var registerBtn = document.querySelector('#register-btn');

registerBtn.removeAttribute('disabled');
registerBtn.style.cursor = 'default';
}
</script>

Step 5:

CSS code to change the cursor
#register-btn {
cursor: not-allowed;
}