How to display multiple recaptchas on a single page in PHP ?

Last Updated : 09 Dec, 2022

RECAPTCHA is a free service from Google that helps to protect websites from spam and abuse. A “CAPTCHA” is a Turing test to tell humans and bots apart. reCAPTCHA uses an advanced risk analysis engine and adaptive challenges to keep malicious software from engaging in abusive activities on your website.

In this article, we are going to discuss how to display multiple Google reCAPTCHA v2 on a single page in PHP.

Approach:

Register your site at Google reCAPTCHA
Submit the HTML form
Get the response key on the server side
Re-verify the key and give response to the user end.

Step 1: Register your site at Google reCAPTCHA — Register your website at Google reCAPTCHA to get the keys. The site key and server key are required to code the HTML form.

Click here to go to the Google reCAPTCHA website.

Step 2: Creating Google reCAPTCHA form in HTML — Create a Google reCAPTCHA form in HTML. We are going to create two forms, each with one input field and a button. Also, we will have an action page named action.php. To obtain reCAPTCHA in the HTML content, we must add a div element to the form and a Google reCAPTCHA CDN link to our HTML document.

CDN link : <script src=”https://www.google.com/recaptcha/api.js” async defer></script>
Div tag : <div class=”g-recaptcha” data-sitekey=”your_site_key”></div>

Note: You must substitute your Site Key for “your_site_key”.

Example:

HTML

<!DOCTYPE html> 
<html lang="en"> 
  
<head> 
    <meta charset="UTF-8"> 
    <meta http-equiv="X-UA-Compatible" 
          content="IE=edge"> 
    <meta name="viewport" 
          content="width=device-width, initial-scale=1.0"> 
  
    <!-- Bootstrap for style -->
    <link href= 
"https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" 
          rel="stylesheet"> 
  
    <!-- Google reCAPTCHA CDN -->
    <script src= 
"https://www.google.com/recaptcha/api.js" 
            async defer></script> 
    <title>Multiple Google reCAPTCHA</title> 
</head> 
  
<body> 
    <div class="container"> 
        <h3 class="text-center py-5"> 
              Multiple Google reCAPTCHA</h3> 
  
        <div class="row"> 
  
            <div class="col-lg-6 col-sm-12"> 
                <!-- Form 1 Start-->
                <form class="align-items-center" 
                      action="action.php" 
                      method="post"> 
                    <div class="mb-3"> 
                        <input class="form-control" 
                               type="text" 
                               name="name1" 
                               id="name1" 
                               placeholder="Enter Name"
                               required> 
                    </div> 
                    <div class="mb-3"> 
                        <!-- div to show reCAPTCHA -->
                        <div class="g-recaptcha" 
                             data-sitekey="your_site_key"></div> 
                    </div> 
                    <button class="btn btn-primary" 
                            type="submit" 
                            name="submit_btn1"> 
                        Submit 
                     </button> 
                </form> 
                <!-- Form 1 End-->
            </div> 
  
            <div class="col-lg-6 col-sm-12"> 
                <!-- Form 2 Start-->
                <form action="action.php" 
                      method="post"> 
                    <div class="mb-3"> 
                        <input class="form-control" 
                               type="text" 
                               name="name2" 
                               id="name2" 
                               placeholder="Enter Name"
                               required> 
                    </div> 
                    <div class="mb-3"> 
                        <!-- div to show reCAPTCHA -->
                        <div class="g-recaptcha" 
                             data-sitekey="your_site_key"></div> 
                    </div> 
                    <button class="btn btn-primary" 
                            type="submit" 
                            name="submit_btn2"> 
                        Submit 
                     </button> 
                </form> 
                <!-- Form 2 End-->
            </div> 
        </div> 
    </div> 
</body> 
  
</html>

Step 3: PHP Back end — Now let’s code the action page.

The “isset()” method is used on the server side to verify whether a valid form was submitted after the form has been submitted. Following the validation, we retrieved the name using the $name variable and the Google ReCaptcha response using the $recaptcha variable.

PHP

// Checking whether first form is submitted or not 
if (isset($_POST['submit_btn1'])) { 
    // Storing name in $name1 variable 
    $name1 = $_POST['name1']; 
  
    // Storing google recaptcha response in  
    // $recaptcha1 variable 
    $recaptcha1 = $_POST['g-recaptcha-response']; 
} 
  
// Checking whether second form is submitted or not 
if (isset($_POST['submit_btn2'])) { 
    // Storing name in $name2 variable 
    $name2 = $_POST['name2']; 
  
    // Storing google recaptcha response in  
    // $recaptcha2 variable 
    $recaptcha2 = $_POST['g-recaptcha-response']; 
}

Step 4: Verify the captcha – We must send a post request to the following URL in order to validate the captcha.

URL: https://www.google.com/recaptcha/api/siteverify?secret=<secret_key>&response=<response_key>
secret_key: You will receive the secret key from the Google Console.
response_key: When a user submits the form, this key is generated from the client side.
The browser’s response key, known as g-recaptcha-response, is created when a form is submitted. If it’s empty or null, it signifies the user didn’t choose the captcha; thus, returns an error.

PHP

<? php 
  
// Checking whether first form is submitted or not     
if (isset($_POST['submit_btn1'])) { 
    // Storing name in $name1 variable 
    $name1 = $_POST['name1']; 
  
    // Storing google recaptcha response  
    //in $recaptcha1 variable 
    $recaptcha1 = $_POST['g-recaptcha-response']; 
  
    // Put secret key here, which we get  
      // from google console 
    $secret_key = 'your_secret_key'; 
  
    // Hitting request to the URL, Google will  
      // respond with success or error scenario 
    $url = 'https://www.google.com/recaptcha/api/siteverify?secret='
              .$secret_key. '&response='.$recaptcha1; 
  
    // Making request to verify captcha 
    $response = file_get_contents($url); 
  
    // Response return by google is in  
      // JSON format, so we have to parse  
      // that json 
    $response = json_decode($response); 
  
    // Checking, if response is true or not 
    if ($response -> success == true) { 
        echo 'Google reCAPTACHA verified'; 
    } 
    else { 
        echo 'Error in Google reCAPTACHA'; 
    } 
} 
  
// Checking whether second form is submitted or not     
if (isset($_POST['submit_btn2'])) { 
    // Storing name in $name2 variable 
    $name2 = $_POST['name2']; 
  
    // Storing google recaptcha response in  
      // $recaptcha2 variable 
    $recaptcha2 = $_POST['g-recaptcha-response']; 
  
    // Put secret key here, which we get  
      // from google console 
    $secret_key = 'your_secret_key'; 
  
    // Hitting request to the URL, Google will respond  
      // with success or error scenario 
    $url = 'https://www.google.com/recaptcha/api/siteverify?secret='
              .$secret_key. '&response='.$recaptcha2; 
  
    // Making request to verify captcha 
    $response = file_get_contents($url); 
  
    // Response return by google is in  
      // JSON format, so we have to parse  
      // that json 
    $response = json_decode($response); 
  
    // Checking, if response is true or not 
    if ($response -> success == true) { 
        echo 'Google reCAPTACHA verified'; 
    } 
    else { 
        echo 'Error in Google reCAPTACHA'; 
    } 
} 
  
?>