Site Admin
Site Admin Founder of MeaningArticles
263 Views

PHP Google Invisible reCAPTCHA Integrate

Hello Dev.

Today i will explained how to set google invisible rechaptcha in php. This example is so easy to use in php.

THis example to first create a google rechapata Google reCAPTCHA Admin. Thorough create a your site key and secret key. Then later to working this example.

So let's start to the example.

index.php

<?php
    // Google reCaptcha secret key
    $secretKey  = "6Lc9g2YbAAAAAE26Rbbbbbbxxxxxxx3zuLhZGTqO";
    
    $statusMsg = '';
    if(isset($_POST['submit'])){
        if(isset($_POST['captcha-response']) && !empty($_POST['captcha-response'])){
            // Get verify response data
            $verifyResponse = file_get_contents('https://www.google.com/recaptcha/api/siteverify?secret='.$secretKey.'&response='.$_POST['captcha-response']);
            $responseData = json_decode($verifyResponse);
            if($responseData->success){
                
                $name = !empty($_POST['name']?$_POST['name']:'');
                $email = !empty($_POST['email']?$_POST['email']:'');
                $message = !empty($_POST['message']?$_POST['message']:'');
                
                $contactFormStatus = array(
                    'type' => 'success',
                    'msg' => 'your contact request have submitted successfully.' 
                );
            }else{
                $contactFormStatus = array(
                    'type' => 'error',
                    'msg' => 'Robot verification failed, please try again.' 
                );
            }
        }else{
            $contactFormStatus = array(
                'type' => 'error',
                'msg' => 'Robot verification failed, please try again.' 
            );
        }
    }
?>

<!DOCTYPE html>
<html>
    <head>
        <style>
            body {font-family: Arial, Helvetica, sans-serif;}
            * {box-sizing: border-box;}

            input[type=text],input[type=email], select, textarea {
              width: 100%;
              padding: 12px;
              border: 1px solid #ccc;
              border-radius: 4px;
              box-sizing: border-box;
              margin-top: 6px;
              margin-bottom: 16px;
              resize: vertical;
            }

            input[type=submit] {
              background-color: #04AA6D;
              color: white;
              padding: 12px 20px;
              border: none;
              border-radius: 4px;
              cursor: pointer;
            }

            input[type=submit]:hover {
              background-color: #45a049;
            }

            .container {
              border-radius: 5px;
              background-color: #f2f2f2;
              padding: 20px;
            }
        </style>
    </head>
<body>
    <h3>Contact Form</h3>
    <?php  
        if(!empty($contactFormStatus['msg'])){
            echo '<p class="'.$contactFormStatus['type'].'">'.$contactFormStatus['msg'].'</p>';
        }
    ?> 
    <div class="container" style="width: 500px;">
        <form action="" method="post">
            <label for="fname">First Name</label>
            <input type="text" id="fname" name="firstname" placeholder="Your name..">
            <label for="email">Email</label>
            <input type="email" id="email" name="email" placeholder="Your email..">
            <label for="message">Subject</label>
            <textarea id="message" name="message" placeholder="Type your message here...." style="height:200px"></textarea>
            // data-sitekey = Google reCaptcha site key
            <div class="g-recaptcha" data-sitekey="6Lc9g2YbAAAAAP1jTGzUwMek7GKy6chBnhzpu4ob" data-badge="inline" data-size="invisible" data-callback="setResponse"></div>
            <input type="hidden" id="captcha-response" name="captcha-response" />
            <input type="submit" name="submit" value="SUBMIT" style="margin-top: 8px;">
        </form>
    </div>
<script src="https://www.google.com/recaptcha/api.js?onload=onloadCallback" async defer></script>
<script>
    var onloadCallback = function() {
        grecaptcha.execute();
    };

    function setResponse(response) { 
        document.getElementById('captcha-response').value = response; 
    }
</script>
</body>
</html>

i'm hoping it assist you to, thanks for visit my article if you like my article then proportion together with your friend and social platform.