How to add Google reCAPTCHA to a Form (PHP/HTML)

When you need to add a relatively simple new feature like this, if you’re anything like me, you don’t want to be reading through pages and pages of documentation; you want an example you can implement quickly then edit as you see fit. I couldn’t find any such thing when I was integrating, so hopefully these 4 simple steps will help you.

Step 1

Sign up and get your keys here: https://www.google.com/recaptcha/admin (you will get a SITE key and a SECRET key, used later)

Step 2

Include this on your page:

<script src="https://www.google.com/recaptcha/api.js"></script>

Step 3

Add the following into your form:

<div class="g-recaptcha brochure__form__captcha" data-sitekey="YOUR SITE KEY"></div>

Step 4

On form submission do this:

$recaptcha = $_POST['g-recaptcha-response'];
$res = reCaptcha($recaptcha);
if(!$res['success']){
  // Error
}

Using the following function:

function reCaptcha($recaptcha){
  $secret = "YOUR SECRET KEY";
  $ip = $_SERVER['REMOTE_ADDR'];

  $postvars = array("secret"=>$secret, "response"=>$recaptcha, "remoteip"=>$ip);
  $url = "https://www.google.com/recaptcha/api/siteverify";
  $ch = curl_init();
  curl_setopt($ch, CURLOPT_URL, $url);
  curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);
  curl_setopt($ch, CURLOPT_TIMEOUT, 10);
  curl_setopt($ch, CURLOPT_POSTFIELDS, $postvars);
  $data = curl_exec($ch);
  curl_close($ch);

  return json_decode($data, true);
}

This code is free to use at your own discretion. It comes without warranty. Please feel free to feedback any edits.


We'd love to hear from you!

If you think Bronco has the skills to take your business forward then what are you waiting for?

Get in Touch Today!

Discussion

Write a comment...
  • David Fletcher

    I am very interested in this
    I have the steps 1, 2 and 3 inplace and the captcha form is displayed, and captcha can be checked.
    Now, what do I do with step 4. There are two pieces of code and I dont know where to place them.
    Thanks in advance

    • Chris Antcliff

      Sorry for the late reply but hopefully this will be useful.

      Step 4 is done after form submission; this is where you would normally send the email if you’re doing a contact form, or allow the user to set up an account or whatever feature you’re trying to stop bots from accessing.
      The function can go anywhere on the page or included from a functions file – anywhere as long as it’s accessible to the page you’re working on.

Add a Comment