Why use reCAPTCHA?

ReCAPTCHA is a great way to verify users are real. Many bots nowadays will look hard for contact forms that don’t use reCAPTCHA or an equivalent and send thousands of messages a second through these contact forms. This can have very negative effects for your site including your domain being marked as spam, being blocked from your email server, and many more. With reCAPTCHA, you add an extra layer of security by only allowing verified humans to submit your form?

How do we implement reCAPTCHA with AJAX?

In this short tutorial, I am going to create a really basic website with a really basic form. It is going to contain 3 files: index.html, contact.js, and mail.php.

index.html

<!DOCTYPE HTML>
<head>
  <script src="https://code.jquery.com/jquery-3.0.0.min.js" integrity="sha256-JmvOoLtYsmqlsWxa7mDSLMwa6dZ9rrIdtrrVYRnDRH0=" crossorigin="anonymous"></script>
  <script src="contact.js"></script>
  <script src='https://www.google.com/recaptcha/api.js'></script>
</head>
<body>
  <form id="contactForm">
    <input type="text" id="name" placeholder="Your name..."/>
    <br>
    <input type="text" id="email" placeholder="Your email..."/>
    <br>
    <textarea id="message" placeholder="Your message..."></textarea>
    <br>
    <div class="g-recaptcha" data-sitekey="YOUR_KEY"></div>
    <br>
    <input type="submit" />
  </form>
</body>

NOTE: make sure to replace YOUR_KEY with your data-sitekey you get from reCAPTCHA.

contact.js

$(document).ready(function() {
  var contactForm = $("#contactForm");
  //We set our own custom submit function
  contactForm.on("submit", function(e) {
    //Prevent the default behavior of a form
    e.preventDefault();
    //Get the values from the form
    var name = $("#name").val();
    var email = $("#email").val();
    var message = $("#message").val();
    //Our AJAX POST
    $.ajax({
      type: "POST",
      url: "mail.php",
      data: {
        name: name,
        email: email,
        message: message,
        //THIS WILL TELL THE FORM IF THE USER IS CAPTCHA VERIFIED.
        captcha: grecaptcha.getResponse()
      },
      success: function() {
        console.log("OUR FORM SUBMITTED CORRECTLY");
      }
    })
  });
});

mail.php

<?php
$name=stripslashes($_POST["name"]);
$email=stripslashes($_POST["email"]);
$message=stripslashes($_POST["message"]);
$secret="YOUR_SECRET";
$response=$_POST["captcha"];

$verify=file_get_contents("https://www.google.com/recaptcha/api/siteverify?secret={$secret}&response={$response}");
$captcha_success=json_decode($verify);
if ($captcha_success->success==false) {
  //This user was not verified by recaptcha.

}
else if ($captcha_success->success==true) {
  //This user is verified by recaptcha

}

NOTE: Make sure you replace $secret with your reCAPTCHA secret.

And there we go! We have our form with reCAPTCHA submitting via AJAX. Remember, this was a very basic form with no data validation. When implementing your form, make sure you validate what you’re users are submitting.

Click here to see How to set up reCAPTCHA 2.0 with PHP if you do not want to use AJAX.