Ajax Contact Form with Captcha reCAPTCHA v2/2.0 using PHP with jQuery

Ajax Contact Form with Captcha reCAPTCHA v2/2.0 using PHP with jQuery

In this Post We Will Explain About is Ajax Contact Form with Captcha reCAPTCHA v2/2.0 using PHP with jQuery With Example and Demo.Welcome on pakainfo.com – Examples, The best For Learn web development Tutorials,Demo with Example! Hi Dear Friends here u can know to BOOTSTRAP RECAPTCHA FORM TUTORIAL Example

In this post we will show you Best way to implement Setting up reCAPTCHA 2.0 with AJAX Demo/Tutorial, hear for Ajax based reCAPTCHA v2 implementation using PHP with jQuery with Download .we will give you demo,Source Code and examples for implement Step By Step Good Luck!.

Why use reCAPTCHA?

->Google ReCAPTCHA is a Best or simple way to verify all the users are check real or not.

->Many other bots generally fake will look hard for your load side with dummy data contact Your forms that donโ€™t any use google reCAPTCHA or simple an equivalent as well as send more any fake users thousands or more of send messages a second things through these your inquiry or contact forms.

->It can have very some negative some more effects for your websiter including your personl domain being data marked as message spam, being blocked mail from your gmail or any email server, and some many more things.

->With google reCAPTCHA, We add HTML PHP an extra layer of main best security by only users or humans allowing verified all the humans to HTML php server side HTML submit your form?

Send mail susscessfully with Google reCAPTCHA 2.0 with AJAX call

Crate api key

https://www.google.com/recaptcha/intro/index.html

url : https://www.google.com/recaptcha/admin

Paste this source code before the closing HTML head tag on your HTML template: Like this js libs

Also Read This ๐Ÿ‘‰   how to add edit and delete rows of a html table with javascript?

<script src='https://www.google.com/recaptcha/api.js'></script>

Paste this source code at the end of the main file html form tags where you want the google reCAPTCHA widget to appear: Ajax Contact Form with Captcha reCAPTCHA v2/2.0 using PHP with jQuery

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

index.html

simple source code to g-recaptcha add.

<!DOCTYPE HTML>
<head>
  <script src="https://code.jquery.com/jquery-3.0.0.min.js"></script>
  <script src='https://www.google.com/recaptcha/api.js'></script>
</head>
<body>
<!--=================================
contact from -->

<section class="page-section-ptb">
        <div class="container">
            <div class="row">
                <div class="col-md-8 col-md-offset-2">
                    <div class="contact-form-title text-center mb-40">
                        <h4 class="mb-15">We Love To Hear From You</h4>
                        <p>Please contact us pakainfo.com</p>
                    </div>
                </div>
                <div class="gray-form">
                    <div class="col-lg-12 col-md-12">
                        <div class="form-group">
                            <input type="text" class="form-control" placeholder="Company Name" id="comapny_name" name="comapny_name">
                        </div>
                    </div>
                    <div class="col-lg-12 col-md-12">
                        <div class="form-group">
                         <div class="selected-box">
                            <select class="form-control" name="sname" id="sname">
                                <option>Looking For</option>
                                <option>DevOps Managed Services</option>
                                <option>Cloud Services</option>
                                <option>Staffing Services</option>
                                <option>Training Services</option>
                                <option>Digital Marketing</option>
                                <option>Digital Transformation</option>
                            </select>
                         </div>
                        </div>
                    </div>
                    <div class="col-lg-6 col-md-6">
                        <div class="form-group">
                            <input type="text" class="form-control" placeholder="First Name" name="fname" id="fname">
                        </div>
                    </div>
                    <div class="col-lg-6 col-md-6">
                        <div class="form-group">
                            <input type="text" class="form-control" placeholder="Last name" name="lname" id="lname">
                        </div>
                    </div>
                    <div class="col-lg-6 col-md-6">
                        <div class="form-group">
                            <input type="text" class="form-control" placeholder="Official Email Id" name="email" id="email">
                        </div>
                    </div>
                    <div class="col-lg-6 col-md-6">
                        <div class="form-group">
                            <input type="text" class="form-control" placeholder="Phone" name="phone" id="phone">
                        </div>
                    </div>
                    <div class="col-lg-6 col-md-6">
                        <div class="form-group">
                            <input type="text" class="form-control" placeholder="Address" name="address" id="address">
                        </div>
                    </div>
                    <div class="col-lg-6 col-md-6">
                        <div class="form-group">
                            <input type="text" class="form-control" placeholder="City" name="city" id="city">
                        </div>
                    </div>
                    <div class="col-lg-6 col-md-6">
                        <div class="form-group">
                            <input type="text" class="form-control" placeholder="Country" name="country" id="country">
                        </div>
                    </div>
                    <div class="col-lg-6 col-md-6">
                        <div class="form-group">
                            <input type="text" class="form-control" placeholder="Zip / Post code" name="zipcode" id="zipcode">
                        </div>
                    </div>
                    <div class="col-lg-12 col-md-12">
                        <div class="form-group">
                            <textarea class="form-control" rows="7" placeholder="Message" name="msg" id="msg"></textarea>
                        </div>
                    </div>
					 <div class="col-lg-12 col-md-12">
											<div class="form-group">
						<div class="g-recaptcha" data-sitekey="6LdnBE0UAAAAABp5QznSymoZWR2Hl4wd0rlJq9cP"></div>
					</div>
					</div>


                    <div class="col-lg-12 col-md-12">
                        <!--<a class="button" href="#">submit now</a>-->
                         <input type="submit" id="submit" class="button" value="submit now" name="frm_submit">
                    </div>
<br/><br/>
<div class="col-lg-12 col-md-12">
<div class='alert alert-success' id="msg_success" style="display:none;margin-top:15px;">
<button class='close' data-dismiss='alert'>×</button>
	Your contact request have submitted successfully.
</div>
</div>

<div class="col-lg-12 col-md-12">
<div class='alert alert-danger' id="capcha_error" style="display:none;margin-top:15px;">
<button class='close' data-dismiss='alert'>×</button>
	Robot verification failed, please try again.
</div>
</div>
                </div>
            </div>
            
        </div>
     
    </section>
	</body>
	</html>

NOTE: make almost sure to check replace Google Live YOUR_KEY as well as your set data-sitekey you simple website get from google reCAPTCHA.

Also Read This ๐Ÿ‘‰   add days to date - How to Add Days to Date in PHP?

Jquery source code

simple below jquery and javascript source code

<script>
$(document).ready(function(){
$("#submit").click(function(){


var comapny_name = $("#comapny_name").val();
var sname = $('#sname :selected').text();
var fname = $("#fname").val();
var lname = $("#lname").val();
var email = $("#email").val();
var phone = $("#phone").val();
var address = $("#address").val();
var city = $("#city").val();
var country = $("#country").val();
var zipcode = $("#zipcode").val();
var msg = $("#msg").val();


var captcha = grecaptcha.getResponse();
var dataString = 'comapny_name='+ comapny_name + '&sname='+ sname + '&fname='+ fname + '&lname='+ lname + '&email='+ email + '&phone='+ phone + '&address='+ address + '&city='+ city + '&country='+ country + '&zipcode='+ zipcode + '&msg='+ msg + '&captcha='+ captcha;

if(captcha=='')
{
	$("#capcha_error").show();
}
else
{
	// AJAX Code To Submit Form.
	$.ajax({
	type: "POST",
	url: "ajaxsubmit.php",
	data: dataString,
	cache: false,
	success: function(result){
		$("#msg_success").show();
		$("#submit").attr('disabled',true);
		$("#capcha_error").hide();
	//alert(result);
	}
	});
	
}
return false;

});
});
</script>

ajaxsubmit.php

here server side source code available.

<?php
//server side PHP source code
//print_r($_POST);
//die();
         $comapny_name = $_POST['comapny_name'];
         $sname= $_POST['sname'];

         $fname= $_POST['fname'];
         $lname= $_POST['lname'];
         $email= $_POST['email'];
         $phone= $_POST['phone'];
         $address= $_POST['address'];
         $city= $_POST['city'];
         $country= $_POST['country'];
         $zipcode= $_POST['zipcode'];
         $msg= $_POST['msg'];

$message = "
<html>
<head>
<title>CONTACT US</title>
</head>
<body>
<p>CONTACT US</p>
<table>
<tr>
<th>Company Name</th>
<td>".$comapny_name ."</td>
</tr>
<tr>
<th>service Name</th>
<td>".$sname."</td>
</tr>
<tr>
<th>First Name</th>
<td>".$fname."</td>
</tr>
<tr>
<th>Last Name</th>
<td>".$lname."</td>
</tr>
<tr>
<th>Email Address</th>
<td>".$email."</td>
</tr>
<tr>
<th>Phone</th>
<td>".$phone."</td>
</tr>
<tr>
<th>Address</th>
<td>".$address."</td>
</tr>
<tr>
<th>City</th>
<td>".$city."</td>
</tr>
<tr>
<th>Country</th>
<td>".$country."</td>
</tr>
<tr>
<th>zip code</th>
<td>".$zipcode."</td>
</tr>
<tr>
<th>Message</th>
<td>".$msg."</td>
</tr>
</table>
</body>
</html>
";



$email = "[email protected]"; //set your email address here
//$email = "[email protected]"; //set your email address here
$subject = "First mail for testing";// Put here Email Address subject

$headers = "MIME-Version: 1.0" . "\r\n";
$headers .= "Content-type:text/html;charset=UTF-8" . "\r\n";

// More headers
$headers .= 'From: <[email protected]>' . "\r\n";
$headers .= 'Cc: [email protected]' . "\r\n";

$secret="YOUR_SECRET";
$response=$_POST["captcha"];

$verify=file_get_contents("https://www.google.com/recaptcha/api/siteverify?secret={$secret}&response={$response}");
$captcha_success=json_decode($verify);
if ($captcha_success->success==false) {
 echo "This user was not verified by recaptcha.";
}
else if ($captcha_success->success==true) {
  		//mail($email,$subject,$message,$headers);
		if(mail($email,$subject,$message,$headers)) {
		  echo "Form Submitted Succesfully";
		}

}		
		

?>

You are Most welcome in my youtube Channel Please subscribe my channel. and give me FeedBack.
More Details……
Angularjs Example

Example

I hope you have Got What is BotDetect PHP jQuery AJAX Contact Form CAPTCHA Code Example And how it works.I would Like to have FeedBack From My Blog(pakainfo.com) readers.Your Valuable FeedBack,Any Question,or any Comments about This Article(pakainfo.com) Are Most Always Welcome.