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

PHP Contact Form with Google reCAPTCHA V3

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

Facebook Twitter Google+ LinkedIn Pinterest

Google reCaptcha is a security service that prevents bots from sending you automatic emails on your public forms, reCaptcha 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 integrate with your submit button.

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
Facebook Twitter Google+ LinkedIn Pinterest
Next article Simple PHP REST API with Slim, PHP & MySQL
Previous article Convert your website into a Desktop App for Windows, Mac, Linux

Huzoor Bux

I am a PHP Developer

Related Posts

Stripe Payment Gateway Charge Credit Card with PHP API
February 15th, 2021

Stripe Payment Gateway Charge Credit Card with PHP

How to building responsive WordPress theme using Bootstrap Bootstrap
February 4th, 2021

How to building responsive WordPress theme using Bootstrap

6 Reasons Laravel is the Top PHP Framework in the Web Development Industry Framework
February 1st, 2021

6 Reasons Laravel is the Top PHP Framework in the Web Development Industry

2 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

Leave a Reply Cancel reply

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

Advertisement
Recent Posts
  • Stripe Payment Gateway Charge Credit Card with PHP
  • How to building responsive WordPress theme using Bootstrap
  • 6 Reasons Laravel is the Top PHP Framework in the Web Development Industry
  • 9 Best Programming languages you should learn in 2021
  • 12 Reasons to Choose PHP for Developing Website
Categories
  • API
  • Bootstrap
  • CSS
  • CSS 3
  • Designing
  • Framework
  • Guide
  • HTML
  • HTML 5
  • JavaScript
  • jQuery
  • MySQL
  • Node.js
  • oAuth
  • Payment
  • PHP
  • Python
  • Social
  • Tips
  • WordPress
Weekly Tags
  • PHP
  • api
  • How to
  • PHP Basics
  • Programming Habits
  • HTML5
  • PHP framework
  • Download
  • laravel
  • css
  • About
  • Privacy Policy
  • Back to top
© PHPLift 2020. All rights reserved.