How to Add Google reCAPTCHA in PHP Contact Form?

Do you know google reCAPTCHA is the best way to protect our web form from spambots? So in this tutorial, we will see how to add google reCAPTCHA in the contact form using PHP.

Google has reCAPTCHA technology that we can use and integrate into any form. It is a powerful tool to protect from spam. Google reCAPTCHA protects your website from fraud and abuse without creating friction. It will check that you are real humans or robots. If it detects the moments happening by robots then it will flag the email as spam or not allow to enter into the website and submit the form.

Google has two versions of reCAPTCHA that we can use in our form. The latest version is v3, which you can easily integrate with your form. The version v2 is still available to protect from spam, you can also add this version in your form.

By using a couple of lines of code, you can integrate the google reCAPTCHA in your PHP contact form and can protect from spambots. So you must add the Google reCAPTCHA to your website and forms. Because it will also enhance the productivity of forms and give a better user experience. To authenticate, the user has to click on the checkbox then google will check and tick that checkbox, it can also ask to solve a small image puzzle.

You can also create a custom reCAPTCHA using the PHP script and then use it in your form to validate that, the user is real or robot. Thus, you can use it as spam protection. The custom reCAPTCHA could be based on numbers and letters identifying or solving any image puzzle.

Recommend tutorial: How to Install PHP on Windows, macOS, and Linux?

So let’s add google reCAPTCHA in the contact form using PHP.

Generate Google reCAPTCHA API keys

To generate the google reCAPTCHA Site and Secret Keys, we have to register our domain where we have contact forms. Registering a domain is required to protect against spam and API keys work correctly.

Follow the below steps to generate the google reCAPTCHA API keys:

Step 1: Go to the Google reCAPTCHA website and register a new website.

Step 2: Now, add a label of project, select reCAPTCHA type v2, and click on the radio button “I’m not a robot Checkbox“. You can also create for v3.

Step 3: Add a domain where the contact form is hosted. You can add multiple domains for one project.

See the following image to reference the above three steps.

Step 4: So, accept the terms of reCAPTCHA and click on the Submit button. It will generate the Site Key and Secret Key. So note that we will use them in our form.

Create HTML Form and Integrate with Google reCAPTCHA

In this step, we will create a basic structure of HTML form and that form will have Name, Email, Subject, and Message input fields. You can add more but we are going to use only these fields.

And we will integrate google reCAPTCHA in this form. To integrate the google reCAPTCHA, add the google reCAPTCHA javascript library just before the </body> tag.

Important things to integrate the Google reCAPTCHA with contact form

• Include the reCAPTCHA JavaScript library.
  <script src="https://www.google.com/recaptcha/api.js" async defer></script>
• Add g-recaptcha class in div tag
• Add data-sitekey attribute to div tag

Let’s create a simple HTML contact form that are accepting the input from the users. See the following HTML code of the form and has integrated the Google reCAPTCHA.

<form id="form-id" class="form-class" method="post" action="">
        
	<div class="form-group">
		<label for="name" class="label">Name</label>
		<div class="input-group">
			<input type="text" id="name" name="name" class="form-control">
		</div>
	</div>

	<div class="form-group">
		<label for="email" class="label">Email</label>
		<div class="input-group">
			<input type="email" id="email" name="email" class="form-control">
		</div>
	</div>
	
	<div class="form-group">
		<label for="subject" class="label">Subject</label>
		<div class="input-group">
			<input type="text" id="subject" name="subject" class="form-control">
		</div>
	</div>

	<div class="form-group">
		<label for="message" class="label">Message</label>
		<div class="input-group">
			<textarea id="message" name="message" class="form-control" rows="6" maxlength="3000"></textarea>
		</div>
	</div>

	<div class="form-group">
        <!-- Google reCAPTCHA block -->
        <div class="g-recaptcha" data-sitekey="6Le6heUcAAAAALivB*************************"></div>
    </div>

	<div class="form-group">
		<button type="submit" name="submit" id="button" class="btn btn-primary btn-lg btn-block">Send</button>
	</div>

</form>

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

Recommend tutorial: How to Upload Images or Files in PHP?

When you integrated google reCAPTCHA successfully, it will look like the below image.

Google reCAPTCHA Verification Before For Submission

Now, we will validate google reCAPTCHA to check the user has ticked that or not. When the user enters all the required fields and checks on the google reCAPTCHA box then API calls to check the token keys and validate the form then it returns the response in JSON format.

That JSON response we will decode using the json_decode() function and check the success parameter from the response object. If the response is successful then the form will be submitted and return the success message to users.

Important steps to validate google reCAPTCHA form

• Get all the value of input fields using the $_POST
• Check all the fields are not empty and validate email address using FILTER_VALIDATE_EMAIL PHP filter function.
• Validate google reCAPTCHA with g-recaptcha-response POST parameter.
• Verify the reCAPTCHA response with API calls and secert key.
• Decode the google reCAPTCHA JSON response using json_decode() function.
• Check if response return success then form ready to submit.
• Save the data in MySQL database.
• Send an email using PHP mail() function.
• Show the success message to user.

Recommend tutorial: How can I Prevent SQL Injection in PHP?

Create a new file and add the following code inside and save it. For the example, I’m taking this file name as ‘form_submit.php‘ but you can take it as you want.

<?php
	
	require_once("db_connection.php");
	
	$errors = [];
	$response = [];

	if(isset($_POST['submit'])) {
		// Get the form data
		$name = $con->real_escape_string($_POST['name']);
		$email = $con->real_escape_string($_POST['email']);
		$subject = $con->real_escape_string($_POST['subject']);
		$message = $con->real_escape_string($_POST['message']);
		
		// Validate form fields
		if(empty($name)) {
			$errors[] = "Please enter your name.";
		}
		
		if(empty($email) || filter_var($email, FILTER_VALIDATE_EMAIL) === false) {
			$errors[] = "Please enter a valid email.";
		}
		
		if(empty($subject)) {
			$errors[] = "Please enter subject.";
		}
		
		if(empty($message)) {
			$errors[] = "Please enter your message.";
		}
		
		// Check errorss
		if(empty($errors)) {
			
			// Validate reCAPTCHA box 
			if(isset($_POST['g-recaptcha-response']) && !empty($_POST['g-recaptcha-response'])){
				
				// Google secret API
                $secret_key = '6Le6heUcAAAAAPZRPIor*************************';
				
				// reCAPTCHA response verification
                $verify_response = file_get_contents('https://www.google.com/recaptcha/api/siteverify?secret='.$secret_key.'&response='.$_POST['g-recaptcha-response']);

                // Decode JSON data
                $gc_response = json_decode($verify_response);
				
				if($gc_response->success) {
			
					$sql="INSERT INTO simple_contact_form (name, email, subject, message) VALUES ('".$name."','".$email."', '".$subject."', '".$message."')";
					
					if(!$result = $con->query($sql)){
						$errors[] = 'There was an error running the query <br>' . $con->error;
					} else {
						require_once("send_mail.php");
						$response[] = "Thank you! We will contact you soon";
					}
				
				} else {
					$errors[] = "Google reCAPTCHA verification failed, please try again.";
				}
			
			} else {
				$errors[] = "Plese check on the reCAPTCHA box.";
			}
			
		}
		
	}
?>

For the ‘db_connection.php‘ and ‘send_mail.php‘ file check this tutorial on how to create php contact form and send an email?

Conclusion

So we learned about how to add google reCAPTCHA in the PHP contact form. We learned how to integrate the google reCAPTCHA in our web forms using PHP script. And then validate the reCAPTCHA with server-side validation to check reCAPTCHA is solved or not. Then decode the reCAPTCHA response to check if it returns a successful response and then proceeds further to save data into MySQL database and send an email.