Adding Google reCAPTCHA to your forms prevents spam or bots from creating chaos in your mailbox. This will give you added security to your website without missing contact from your users.

We will take the following approach:
  1. Register your site with Google reCAPTCHA admin panel for v3 (getting site key and site secret)
  2. Create a basic contact form, with reCAPTCHA javascript library and site key (client side)
  3. Upon submission, send the response with the secret key to the server side for validation – if verified, send the email
It’s actually quite simple, all you need to know is what is a form, what is a post, and some backend php programming. The first portion is admin – and google tends to switch it up a bit with their interface so fyi. This is a good exercise to grow your fullstack skill set. Let’s go!

Register with Google reCAPTCHA admin panel

Click the “Get Started” link and register for version 3. *Note: we will not be using the enterprise edition.
  1. Register you site at Google reCAPTCHA Notice that you will need to register your localhost pr 127.0.0.1 (IPv4) :: 1 (IPv6) if you want to test the forms on a local environment. Make sure to register the domain of your site.
register reCAPTURE v3 for website in 2021
  • Make sure your secret and site key are generated.Once you have registered your site, you will have a site key and a secret key. You don’t need to remember these digits – they will be accessible on your Google recaptcha panel – make sure you know how to get there. And when you need to use them to your code, just click the “COPY SITE KEY” to get the values.
  • reCAPTURE v3 for websites in 2021

    The contact form

    Create a basic html file or php file to hold the form. The contact form will have a few functions:
    1. Notify user if the POST request has been successful or not
    2. Contain the input fields to collect from the user
    3. Include the Public site key in the form
    Don’t worry about style and formatting of the form, you can use Bootstrap or Tailwind.
    
    < !-- (A) GOOGLE RECAPTCHA API -- >
    <script src='https://www.google.com/recaptcha/api.js'>
    </script>
    < !-- (B) PROCESS AND NOTIFICATIONS ON CLIENT -- >
    <?php
      if (isset($_POST['name'])) { 
         require "process-form.php"; 
         echo $error=="" ? "<div id='notify'>OK </div>"
    		     : "<div id='notify'>$error </div>";
      }
    ?>
    <!-- (C) CONTACT FORM -->
    <form id="contactForm" method="post">
    <h1gt; Contact Us</h1>
    		
    <label>Your Name<label>
    <input type="text" name="name" required />
    		
    <label>Email Address
    <input type="email" name="email" required />
    		
    <label>Message
    <textarea name="message" required></textarea>
    		
    <!-- (D) CAPTCHA - CHANGE SITE KEY! -- >
    <div class="g-recaptcha" data-sitekey="SITE KEY"></div>
    		
    <input type="submit" value="Submit" />
    </form>
    
    

    Backend processing

    Here we will do a few things: provide a process status, call on to verify that google api has processed the reCAPTCHA, and then send the email. We will utilize json_decode() with file_get_contents(). json_decode() will return the encoded JSON value in a php array.
    
    <?php
    			
    // (A) PROCESS STATUS 
    $error = "";
    			
    // (B) VERIFY CAPTCHA
    $secret = 'SECRET KEY'; // CHANGE THIS TO YOUR OWN!
    $url = "https://www.google.com/recaptcha/api/siteverify?.
            secret=$secret&response=".$_POST['g-recaptcha-response'];
    $verify = json_decode(file_get_contents($url));
    	if (!$verify->success) { $error = "Invalid captcha"; }
    	  // (C) SEND MAIL
    	   if ($error=="") {
    		$mailTo = "john@doe.com"; // ! CHANGE THIS TO YOUR OWN !
    		$mailSubject = "Contact Form";
    		$mailBody = "";
    		foreach ($_POST as $k=>$v) { 
    		   if ($k!="g-recaptcha-response") 
                          { $mailBody .= "$k: $v\r\n"; }
    		}
    		if (!@mail($mailTo, $mailSubject, $mailBody)) 
                      { $error = "Failed to send mail"; }
    	}
    ?>
    
    

    Why is there no image for reCAPTCHA v3?

    Unlike previous reCAPTCHA versions, this one does not require for you to identify any images. This version calculates a score from 0.0 to 0.9, with 0.9 score being most likely human, and anything closer to 0 is most likely a bot.

    You can see your score distribution in the Goolge reCPATCHA admin page.

    reCAPTURE v3 for website in 2021 distribution scores

    References: Code Prettify

    Leave a comment

    Your email address will not be published.

    Check out the latest prices for our web services on our blog! Read it here!