How to Implement Google reCaptcha in PHP Form ?

PHP

Nicesnippets

788

01-12-2020


Hi Guys,

In this tutorial, we are going to integrate the Google reCAPTCHA in PHP contact form. Using this Google reCAPTCHA code, we can validate the human users and protect the form submission from bots.

In this example, I have autoloaded the dependencies of the Google reCAPTCHA code library. For using this library, we need to get the API keys by registering our site. If you want to know how to to get the reCaptcha API keys, then the steps that we have discussed in a previous article will be helpful.

After getting the API keys, I configured these keys to integrate Google reCAPTCHA code. In the contact form, the captcha code is shown and on the form submit this code is validated.

Google reCAPTCHA integration process:

-> Generate reCAPTCHA Site & Security API Keys.

-> Create an HTML form with Bootstrap.

-> Integrate reCAPTCHA in a PHP form.

-> Validate the response with Google reCAPTCHA.

-> Send email to post form data in PHP.

Example :


<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>PHP Contact Form with Captcha - Nicesnippests.com</title>

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">

<style type="text/css">

.container {

max-width: 800px;

margin: 50px auto;

text-align: left;

font-family: sans-serif;

}

form {

border: 1px solid #398B8B;

border-radius: 10%;

background: #4385F4;

padding: 40px 50px 45px;

color: #FFFFFF;

}

.form-control:focus {

border-color: #000;

box-shadow: none;

}

label {

font-weight: 600;

}

.error {

color: red;

font-weight: 400;

display: block;

padding: 6px 0;

font-size: 14px;

}

.form-control.error {

border-color: red;

padding: .375rem .75rem;

}

</style>

</head>

<body>

<?php

if(isset($_POST["send"])) {

$name = $_POST["name"];

$email = $_POST["email"];

// Form validation

if(!empty($name) && !empty($email)){

// reCAPTCHA validation

if(isset($_POST['g-recaptcha-response']) && !empty($_POST['g-recaptcha-response'])) {

// Google secret API

$secretAPIkey = '6Ld7WfMZAAAAANp7f2ZuQlEzlGpN1wY_ZrKQMPHF';

// reCAPTCHA response verification

$verifyResponse = file_get_contents('https://www.google.com/recaptcha/api/siteverify?secret='.$secretAPIkey.'&response='.$_POST['g-recaptcha-response']);

// Decode JSON data

$response = json_decode($verifyResponse);

if($response->success){

$toMail = "savanrathod1111@gmail.com";

$header = "From: " . $name . "<". $email .">\r\n";

mail($toMail, $header);

$response = array(

"status" => "alert-success",

"message" => "Your mail have been sent."

);

} else {

$response = array(

"status" => "alert-danger",

"message" => "Robot verification failed, please try again."

);

}

} else{

$response = array(

"status" => "alert-danger",

"message" => "Plese check on the reCAPTCHA box."

);

}

} else{

$response = array(

"status" => "alert-danger",

"message" => "All the fields are required."

);

}

}

?>

<div class="container mt-5">

<h2>Implement Google reCAPTCHA in PHP Contact Form</h2>

<!-- Error messages -->

<?php if(!empty($response)) {?>

<div class="form-group col-12 text-center">

<div class="alert text-center <?php echo $response['status']; ?>">

<?php echo $response['message']; ?>

</div>

</div>

<?php }?>

<!-- Contact form -->

<form action="" name="contactForm" id="contactForm" method="post" enctype="multipart/form-data" novalidate>

<div class="form-group">

<label>Name</label>

<input type="text" class="form-control" name="name" id="name">

</div>

<div class="form-group">

<label>Email</label>

<input type="email" class="form-control" name="email" id="email">

</div>

<div class="form-group">

<!-- Google reCAPTCHA block -->

<div class="g-recaptcha" data-sitekey="6Ld7WfMZAAAAAPGeka-HNBL4agqknFXh8qECS8SK"></div>

</div>

<div class="form-group">

<input type="submit" name="send" value="Send" class="btn btn-dark btn-block">

</div>

</form>

</div>

<!-- Google reCaptcha -->

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

</body>

</html>

It will help you...