How To Implement Google reCAPTCHA In HTML or PHP?

Using Google reCAPTCHA on a contact page or any other online form serves several purposes, primarily focused on improving security and preventing automated bots from abusing or spamming the form.

  1. Spam Prevention: Bots and automated scripts can be programmed to submit forms repeatedly, leading to spam submissions. reCAPTCHA helps differentiate between human users and automated scripts, reducing the likelihood of spam on your website.
  2. Security: Without some form of verification, attackers might exploit contact forms for various malicious purposes, such as injecting malicious code, scraping data, or launching automated attacks. Google reCAPTCHA adds an additional layer of security to your forms.
  3. Abuse Prevention: Some malicious actors use automated tools to submit forms with harmful content or links. reCAPTCHA helps filter out these attempts, protecting your website and users from potential threats.
  4. User Authentication: In addition to preventing spam, reCAPTCHA can be used to verify that the person interacting with your forms is a human. This is particularly important for protecting sensitive information or preventing unauthorized access.
  5. Improving Data Quality: By preventing automated submissions, reCAPTCHA helps ensure that the data collected through your forms is more likely to be accurate and reliable. This is especially crucial for businesses relying on accurate information from users.
  6. Compliance with Terms of Service: Many online services, including Google’s reCAPTCHA, require users to agree to certain terms of service. Integrating reCAPTCHA ensures compliance with these terms and helps maintain a positive relationship with service providers.

Captcha.js

let isRecaptchaValidated = false;

function toggleRecaptchaFormMessage(type = “error”, hide = false) {
const element = document.getElementById(recaptcha-form-${type});
element.style.display = hide ? “none” : “inherit”;
}

function onFormSubmit() {
document.getElementById(“recaptcha-form”).submit();
}

function onRecaptchaSuccess() {
isRecaptchaValidated = true;
}

function onRecaptchaError() {
toggleRecaptchaFormMessage(“error”);
toggleRecaptchaFormMessage(“success”, true);
}

function onRecaptchaResponseExpiry() {
onRecaptchaError();
}

window.onload = function () {
const recaptchaForm = document.getElementById(“recaptcha-form”);
recaptchaForm.addEventListener(“submit”, function (e) {
e.preventDefault();

// Failure
if (!isRecaptchaValidated) {
  toggleRecaptchaFormMessage("error");
  toggleRecaptchaFormMessage("success", true);
  return;
}

// Success
toggleRecaptchaFormMessage("error", true);
toggleRecaptchaFormMessage("success");

});
};

Include these on your HTML of PHP form page with <head></head>
<script src=”https://www.google.com/recaptcha/api.js” async defer> </script>
<script src=”captcha.js” defer></script>

Add this lines on your contact form at last

Before this stop, please get your Google reCaptcha sitekey from Google

<div class=”g-recaptcha” data-sitekey=”6LelHF8pAAAAACIQoTU-NjLc9drmb4fHs3AY8F9m” data-callback=”onRecaptchaSuccess” data-expired-callback=”onRecaptchaResponseExpiry” data-error-callback=”onRecaptchaError” ></div> <!– Recaptcha Error –> <div id=”recaptcha-form-error” style=”display: none” class=”bg-red-200 rounded py-1 px-2 text-sm sm:text-md” > Please fill the recaptcha checkbox. </div> <!– Recaptcha Success –>

Have it on form<form id=”recaptcha-form” method=”post” action=”sendmail.php” onsubmit=”onFormSubmit();”>

Now run it.