• Home
  • PHP
  • MySQL
  • Demos
  • HTML
  • CSS
  • jQuery
  • Framework
  • Social
  • Request Tutorial
PHP Lift
  • Home
  • Demos
  • Advertisement
PHP Lift
  • Home
  • PHP
  • MySQL
  • Demos
  • HTML
  • CSS
  • jQuery
  • Framework
  • Social
  • Request Tutorial
  • Follow
    • Facebook
    • Twitter
    • Google+
    • Pinterest
    • Youtube
    • Instagram
    • RSS
PHP Contact Form with Google reCAPTCHA V3 Example
Home
Designing

PHP Contact Form with Google reCAPTCHA V3 Example

August 24th, 2020 Huzoor Bux API, Designing, PHP 4 comments

Facebook Twitter Google+ LinkedIn Pinterest

Contact form with Google reCAPTCHA Code will be an efficient and effective way to validate the user against bots. The captcha, as we all know, is an idea that can be used to validate human users against bots.

To increase your sales, check out Iris’s best contact form. It is optimized for high conversion. This contact form is optimized for frictionless UI/UX, which will lead to increased inquiries. It features many features, including Google reCAPTCHA and multiple attachments.

Google reCAPTCHA integration is preferred to custom captcha code implementation. We have already seen how to add captcha code to a form with PHP.

This tutorial will show you how to embed the Google reCAPTCHA into a PHP contact form. This Google reCAPTCHA code allows us to validate human users and protect submissions from bots.

In this example, I have automatically loaded the dependencies for the Google reCAPTCHA Code library. Registering your site will give you the API keys that allow you to use this library. The steps we discussed in a previous article can be used to help you get the reCaptcha API key keys.

After obtaining the API keys, I set these keys up to integrate Google’s reCAPTCHA code. The contact form displays the captcha code and the form submit validates it.

Google reCaptcha is a security service that prevents bots from sending you automatic emails on your public forms, reCaptcha is used for human verification owned by Google. Google reCAPTCHA v3 is invisible you won’t see it in your forms create your form without adding a captcha checkbox it’s integrated with your submit button.

reCaptcha v3 Example & Download

DEMO
DOWNLOAD CODE

Step 1:

Create your captcha app from here: https://www.google.com/recaptcha/admin/create

Once you create your app it will give you Site Key and Secret Key.

Use the site key in the HTML code your site serves to users.

Use the secret key for communication between your site and reCAPTCHA.

Now create HTML Form available here

<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.0/css/all.css" integrity="sha384-lKuwvrZot6UHsBSfcMvOkWwlCMgc0TaWr+30HWe3a4ltaBwTZhyTEggF5tJv8tbt" crossorigin="anonymous">
<div class="container">
    <div class="row justify-content-center">
		<div class="col-12 col-md-8 col-lg-6 pb-5">


                    <!--Form with header-->

                    <form action="send.php" method="post" id="submitForm">
                        <div class="card border-primary rounded-0">
                            <div class="card-header p-0">
                                <div class="bg-info text-white text-center py-2">
                                    <h3><i class="fa fa-envelope"></i> Contact Form</h3>
                                    <p class="m-0">Google reCaptcha Example</p>
                                </div>
                            </div>
                            <div class="card-body p-3">

                                <!--Body-->
                                <div class="form-group">
                                    <div class="input-group mb-2">
                                        <div class="input-group-prepend">
                                            <div class="input-group-text"><i class="fa fa-user text-info"></i></div>
                                        </div>
                                        <input type="text" class="form-control" id="name" name="name" placeholder="Name" required>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <div class="input-group mb-2">
                                        <div class="input-group-prepend">
                                            <div class="input-group-text"><i class="fa fa-envelope text-info"></i></div>
                                        </div>
                                        <input type="email" class="form-control" id="email" name="email" placeholder="Email" required>
                                    </div>
                                </div>

                                <div class="text-center">
                                <button data-sitekey="reCAPTCHA_site_key" data-callback="onSubmit" data-action="submit"  class="g-recaptcha btn btn-info btn-block rounded-0 py-2">Send</button>	
                                    
                                </div>
                                <div id="message"></div>
                            </div>

                        </div>
                    </form>
                    <!--Form with header-->


                </div>
	</div>
</div>

This button code will submit the form through JavaScript

<button data-sitekey="reCAPTCHA_site_key" data-callback="onSubmit" data-action="submit" class="g-recaptcha btn btn-info btn-block rounded-0 py-2">Send</button>

You have to add your site key in the place of reCAPTCHA_site_key

Load JavaScript API

<!-- captcha -->
<script src="https://www.google.com/recaptcha/api.js"></script>

Load jQuery

<!-- jQuery -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

Callback function to handle form

<script>
    function onSubmit(token) {
        var formData = $("#submitForm").serialize();
        $(".has-error").removeClass("has-error");
        if ($("#name").val() == "")
        {
            $("#message").html("Enter Name.");
            return false;
        }
        if ($("#email").val() == "")
        {
            $("#message").html("Enter Email.");
            return false;
        }
        $.ajax({
            url: "send.php",
            type: "POST",
            data: formData,
            success: function (data) {
                $("#submitForm")[0].reset();
                // console.log(data)
                $("#message").html(data)
            },
            error: function() {
                alert("error handling here");
            }
        });
    }
</script>

This JavaScript function submits your data to send.php.

<?php
$captchaSecretKey = "Your_Secret_key";
//reCAPTCHA validation
if (isset($_POST['g-recaptcha-response'])) {

	$postData = array(
		'secret' => $captchaSecretKey,
		'response' => $_POST['g-recaptcha-response']
    );
    $url = "https://www.google.com/recaptcha/api/siteverify";

	$curl = curl_init();
	curl_setopt($curl, CURLOPT_URL, $url);
	curl_setopt($curl, CURLOPT_POST, true);
	curl_setopt($curl, CURLOPT_POSTFIELDS, http_build_query($postData));
	curl_setopt($curl, CURLOPT_SSL_VERIFYPEER, false);
	curl_setopt($curl, CURLOPT_RETURNTRANSFER, true);
	$serverResponse = curl_exec($curl);

	if(json_decode($serverResponse,true)['success'] == 1)
	{
		echo '<b>Captcha</b> Validated!';
		exit;
	}
	else
	{
		echo '<b>Captcha</b> Validation Required!';
		exit;
	}	
}
?>

Your_Secret_key replace with your Secret Key

This file verifies your submitted captcha and responds accordingly.

Share this:

  • Click to share on Twitter (Opens in new window)
  • Click to share on Facebook (Opens in new window)

Related

  • Tags
  • Download
  • PHP
  • PHP Basics
  • Programming Habits
  • recaptcha v3 example
Facebook Twitter Google+ LinkedIn Pinterest
Next article Create HTML5 Fullscreen Static Video Background Using CSS
Previous article How to Integrate PayPal Payment System in PHP & MySQL

Huzoor Bux

I am a PHP Developer

Related Posts

How to Extract Text from PDF using PHP PHP
May 17th, 2022

How to Extract Text from PDF using PHP

Is PHP dead in 2021? Is PHP still relevant or worth the effort? PHP
April 3rd, 2022

Is PHP dead in 2021? Is PHP still relevant or worth the effort?

Simple PHP REST API with Slim, PHP & MySQL API
March 3rd, 2022

Simple PHP REST API with Slim, PHP & MySQL

4 Comments

  1. Nikesh
    October 11, 2020 at 8:06 pm Reply ↓

    Can this be used on a CDN with the php mailing script on a different server than the form hosted .

  2. discussdesk
    November 12, 2020 at 9:28 am Reply ↓

    This tutorial is really good with an explanation. You can also check another article to add Google reCAPTCHA V3 in PHP contact form with a live demo and can download complete code.
    https://www.discussdesk.com/add-google-recaptcha-v3-in-php-contact-form-with-live-demo.htm

  3. Ryan
    June 17, 2021 at 8:20 pm Reply ↓

    Hello,

    You misspelled the word “const” on your website. Sometimes errors like can hurt your web traffic. Maybe check out a service that alerts you to issues like SpellReport.com or CheckMySite.com.

    -Ryan

  4. Ryder https://tmall.com/
    September 7, 2021 at 4:40 pm Reply ↓

    Ryder

Leave a Reply to Ryan Cancel reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.

    Advertisement
    Like us
    Recent Posts
    • How to Extract Text from PDF using PHP
    • 3 reasons why you SHOULD write tests
    • How to create a screen recorder in JavaScript
    • Best 10 Programming Languages that will rule in 2022
    • Top 7 Websites To Get Your First Paid Internship
    Categories
    • API
    • Bootstrap
    • Bot
    • CSS
    • CSS 3
    • Database
    • Designing
    • Framework
    • Guide
    • HTML
    • HTML 5
    • JavaScript
    • jQuery
    • MySQL
    • Node.js
    • oAuth
    • Payment
    • PHP
    • Python
    • Social
    • Tips
    • WordPress
    Weekly Tags
    • PHP
    • How to
    • javascript
    • api
    • MYSQL
    • jQuery
    • PHP Basics
    • Programming Habits
    • HTML5
    • PHP framework
    • About
    • Privacy Policy
    • Back to top
    © PHPLift 2021. All rights reserved.