How to Add Google reCAPTCHA to an HTML Form

Bots and spam submissions can be a real headache for any contact form. Luckily, Google offers a free and easy-to-use tool called reCAPTCHA that helps protect your forms from automated abuse.

In this tutorial, you’ll learn how to add Google reCAPTCHA v2 (“I’m not a robot”) to a basic HTML form, using simple steps perfect for beginner developers.

🧱 Step 1: Create a Google reCAPTCHA Key

Go to https://www.google.com/recaptcha/admin
Click + Create
Set the label (e.g., “My Contact Form”)
Choose reCAPTCHA v2
- Select “I’m not a robot” Checkbox
Add your domain (e.g., example.com)
Accept the terms and click Submit

After submitting, Google will give you:

A Site Key (for the frontend)
A Secret Key (for server-side validation)

🧱 Step 2: Add the reCAPTCHA to Your HTML Form

Here’s a basic contact form with reCAPTCHA added:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>reCAPTCHA Form</title>
  <script src="https://www.google.com/recaptcha/api.js" async defer></script>
</head>
<body>

  <h2>Contact Us</h2>
  <form action="process.php" method="POST">
    <label>Name:</label><br />
    <input type="text" name="name" required><br /><br />

    <label>Email:</label><br />
    <input type="email" name="email" required><br /><br />

    <label>Message:</label><br />
    <textarea name="message" required></textarea><br /><br />

    <!-- Google reCAPTCHA widget -->
    <div class="g-recaptcha" data-sitekey="YOUR_SITE_KEY_HERE"></div><br />

    <button type="submit">Send</button>
  </form>

</body>
</html>

🔁 Replace "YOUR_SITE_KEY_HERE" with your actual site key from Google.

📤 Step 3: Verify reCAPTCHA in Your Backend (PHP Example)

On your server, you’ll need to verify the reCAPTCHA response using the secret key.

Here’s a basic process.php example:

<?php
if ($_SERVER['REQUEST_METHOD'] === 'POST') {
  $recaptchaSecret = 'YOUR_SECRET_KEY_HERE';
  $recaptchaResponse = $_POST['g-recaptcha-response'];

  // Verify using Google API
  $response = file_get_contents(
    "https://www.google.com/recaptcha/api/siteverify?secret=$recaptchaSecret&response=$recaptchaResponse"
  );
  $responseKeys = json_decode($response, true);

  if ($responseKeys["success"]) {
    echo "Message sent successfully!";
    // Proceed with email sending or database saving
  } else {
    echo "reCAPTCHA validation failed. Please try again.";
  }
}
?>

🔁 Replace "YOUR_SECRET_KEY_HERE" with the secret key you got from Google.

✅ Final Result

You now have a secure HTML form that:

Includes a reCAPTCHA checkbox
Validates user interaction with Google’s servers
Prevents spam and bots from submitting your form

🧠 Why Use Google reCAPTCHA?

Free and reliable
Easy to implement
Works well with any HTML form
Boosts form security without hurting user experience

🧩 Extra Tips

Use reCAPTCHA v3 for invisible validation (advanced)
Combine with PHP mail() or PHPMailer for complete contact form solutions
Always validate the CAPTCHA on the server

How to Add Google reCAPTCHA to an HTML Form (Step-by-Step Guide)

🧱 Step 1: Create a Google reCAPTCHA Key

🧱 Step 2: Add the reCAPTCHA to Your HTML Form

📤 Step 3: Verify reCAPTCHA in Your Backend (PHP Example)

✅ Final Result

🧠 Why Use Google reCAPTCHA?

🧩 Extra Tips

1 thought on “How to Add Google reCAPTCHA to an HTML Form (Step-by-Step Guide)”

Leave a Comment Cancel reply