How to Add CAPTCHA in a Website

CAPTCHA (Completely Automated Public Turing test to tell Computers and Humans Apart) is used to prevent spam and automated form submissions on websites. Whether you’re building a contact form or a login page, adding CAPTCHA ensures that only humans can submit your form.

In this article, we’ll learn how to:

Add Google’s reCAPTCHA v2 to a website
Use it with a simple HTML form
Verify it on the backend (PHP example included)

🛠️ Step 1: Register Your Site with Google reCAPTCHA

Go to Google reCAPTCHA Admin Console.
Sign in with your Google account.
Choose reCAPTCHA v2 → “I’m not a robot” Checkbox.

Enter your domain (e.g., yourwebsite.com).
Accept terms and submit.
You’ll get two keys:
- Site Key – For frontend (HTML)
- Secret Key – For backend (server verification)

🧾 Step 2: Basic HTML Form with CAPTCHA

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>CAPTCHA Example</title>
  <script src="https://www.google.com/recaptcha/api.js" async defer></script>
</head>
<body>
  <h2>Contact Form</h2>
  <form action="submit.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>

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

    <input type="submit" value="Submit">
  </form>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>CAPTCHA Example</title>
  <script src="https://www.google.com/recaptcha/api.js" async defer></script>
</head>
<body>
  <h2>Contact Form</h2>
  <form action="submit.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>

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

    <input type="submit" value="Submit">
  </form>
</body>
</html>

🔁 Replace YOUR_SITE_KEY_HERE with your actual Site Key from Google.

🔒 Step 3: Backend Verification (PHP Example)

Create a file named submit.php to handle the form:

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

  if (!$captcha) {
    echo "Please complete the CAPTCHA.";
    exit;
  }

  // Verify with Google
  $response = file_get_contents(
    "https://www.google.com/recaptcha/api/siteverify?secret=$secretKey&response=$captcha"
  );
  $responseKeys = json_decode($response, true);

  if ($responseKeys["success"]) {
    // Success! You can now process the form
    $name = $_POST['name'];
    $email = $_POST['email'];

    echo "Thank you, $name! We received your submission.";
    // You can now send email, save to DB, etc.
  } else {
    echo "CAPTCHA verification failed. Try again.";
  }
}
?>

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

  if (!$captcha) {
    echo "Please complete the CAPTCHA.";
    exit;
  }

  // Verify with Google
  $response = file_get_contents(
    "https://www.google.com/recaptcha/api/siteverify?secret=$secretKey&response=$captcha"
  );
  $responseKeys = json_decode($response, true);

  if ($responseKeys["success"]) {
    // Success! You can now process the form
    $name = $_POST['name'];
    $email = $_POST['email'];

    echo "Thank you, $name! We received your submission.";
    // You can now send email, save to DB, etc.
  } else {
    echo "CAPTCHA verification failed. Try again.";
  }
}
?>

✅ Replace YOUR_SECRET_KEY_HERE with your real Secret Key from Google.

✅ Output and Usage

When a user visits your form:

They will see the “I’m not a robot” checkbox.
After submission, the backend verifies the CAPTCHA.
If CAPTCHA passes, form proceeds; else, an error is shown.

⚙️ Optional Styling (CSS)

Add this to make your form look better:

<style>
  body {
    font-family: Arial;
    margin: 30px;
  }

  form {
    max-width: 400px;
    padding: 20px;
    border: 1px solid #ccc;
  }

  input[type="text"],
  input[type="email"] {
    width: 100%;
    padding: 8px;
    margin: 5px 0;
  }

  input[type="submit"] {
    padding: 10px 20px;
    background-color: #4285f4;
    color: white;
    border: none;
    cursor: pointer;
  }

  input[type="submit"]:hover {
    background-color: #357ae8;
  }
</style>

<style>
  body {
    font-family: Arial;
    margin: 30px;
  }

  form {
    max-width: 400px;
    padding: 20px;
    border: 1px solid #ccc;
  }

  input[type="text"],
  input[type="email"] {
    width: 100%;
    padding: 8px;
    margin: 5px 0;
  }

  input[type="submit"] {
    padding: 10px 20px;
    background-color: #4285f4;
    color: white;
    border: none;
    cursor: pointer;
  }

  input[type="submit"]:hover {
    background-color: #357ae8;
  }
</style>

🔍 Conclusion

Adding CAPTCHA to your website protects it from bots and spam. Google’s reCAPTCHA is easy to integrate with just a few lines of code. Always make sure to verify the CAPTCHA response on your backend for security.

✍️ Originally published on Makemychance.com

Arsalan

Arsalan Malik is a passionate Software Engineer and the Founder of Makemychance.com. A proud CDAC-qualified developer, Arsalan specializes in full-stack web development, with expertise in technologies like Node.js, PHP, WordPress, React, and modern CSS frameworks.

He actively shares his knowledge and insights with the developer community on platforms like Dev.to and engages with professionals worldwide through LinkedIn.

Arsalan believes in building real-world projects that not only solve problems but also educate and empower users. His mission is to make technology simple, accessible, and impactful for everyone.