To setup Google reCaptcha oepn url https://www.google.com/recaptcha/admin and fill form as shown in the screenshot below:
After registration open newly created reCaptcha site and read the guide provided by google as shown below:
Now paste <script src=’https://www.google.com/recaptcha/api.js’></script> in <head> or anywhere before use of captcha.
And then paste <div class=”g-recaptcha” data-sitekey=”6LcPQggTAAAAAAw-SQm8KTEW-N1CBuzBz_gW71UT”></div> to the place where you want to show captcha in form and obviously you will have to use tag with your own site key from google reCaptcha site.
HTML Form:
<form id="request_a_quote" class="col-sm-5" onsubmit="return submit_form()"> <div id="success_msg" class="alert alert-success" style="display:none">Thanks! Your message is sent, we will contact you soon.</div> <h2>Request a Quote</h2> <input type="text" id="name" class="form-control" placeholder="Name" /><br> <input type="text" id="email" class="form-control" placeholder="Email" /><br> <input type="text" id="phone" class="form-control" placeholder="Phone" /><br> <input type="text" id="company_name" class="form-control" placeholder="Company Name" /><br> <textarea id="description" class="form-control" placeholder="Project Description"></textarea><br> <!-- Captcha element --> <div class="g-recaptcha" data-sitekey="6LcPQggTAAAAAAw-SQm8KTEW-N1CBuzBz_gW71UT"></div><br> <input type="submit" value="Submit" class="btn btn-primary" /> <input type="reset" id="reset" style="display:none" /> </form>
Javascript Code:
<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<script>
function submit_form()
{
// hide success msg whenever submit is pressed
$("#success_msg").fadeOut();
// collectiong data
var name = $("#name").val();
var email = $("#email").val();
var phone = $("#phone").val();
var company_name = $("#company_name").val();
var description = $("#description").val();
// Action will be function name which we will create in functions.php
var action = "submit_request_a_quote";
// this is required url for ajax calls in the wordpress
var ajax_url = '<?php echo admin_url('admin-ajax.php'); ?>';
// getting google captcha response value from the input with id g-recaptcha-response hidden and auto generated by google re captcha script.
// we will use this value to validate captcha
var g_recaptcha_response = $("#g-recaptcha-response").val();
var data = {name:name, email:email, phone:phone, company_name:company_name, description:description, action:action, g_recaptcha_response:g_recaptcha_response};
$.ajax({
url:ajax_url,
type:"POST",
data:data
}).done(function(responseTxt){
if(responseTxt=='1')
{
$("#success_msg").fadeIn();
$("#reset").trigger("click"); // clicking reset button to reset form after completion
}
else{
alert(responseTxt); // alert error text received from the server (functions.php)
}
});
return false;
}
</script>
functions.php
Add following code at the end of functions.php
// function to fetch response data from a url using curl
function getCurlData($url, $query_string_variables)
{
$ch = curl_init( $url );
curl_setopt($ch, CURLOPT_SSL_VERIFYPEER, false);
curl_setopt($ch, CURLOPT_SSL_VERIFYHOST, false);
curl_setopt( $ch, CURLOPT_POST, 1);
curl_setopt( $ch, CURLOPT_POSTFIELDS, $query_string_variables);
curl_setopt( $ch, CURLOPT_FOLLOWLOCATION, 1);
curl_setopt( $ch, CURLOPT_HEADER, 0);
curl_setopt( $ch, CURLOPT_RETURNTRANSFER, 1);
$response = curl_exec( $ch );
return $response;
}
function submit_request_a_quote()
{
$name = $_POST['name'];
$email = $_POST['email'];
$phone = $_POST['phone'];
$company_name = $_POST['company_name'];
$description = $_POST['description'];
// google re captcha
$g_recaptcha_response = $_POST['g_recaptcha_response'];
$secret_code = "Here use your own site secret code giving on google re captcha site";
$url = 'https://www.google.com/recaptcha/api/siteverify';
$data = getCurlData($url,'secret='.$secret_code.'&response='.$g_recaptcha_response);
$response = json_decode($data);
if($response->success)
{
// preparing parameters for wp_mail();
$to = "[email protected]";
$subject = "New Message from $name";
$msg = "
Quote
Name: $name
Email: $email
Phone: $phone
Company Name:
Project Description: $description
";
// sending mail using wp_mail function
wp_mail($to, $subject, $msg);
}
else
{
echo "Invalid Captcha.. Please try again..."; // this message will sent to javascript through ajax responseTxt variable we creted and we will show this error to user through alert method
}
wp_die(); // must use wp_die() to avoid unwanted output from wordpress
}
// in first parameter prefix function name with wp_ajax_
// this action is required in order to recieve data sent from ajax
add_action('wp_ajax_submit_request_a_quote', 'submit_request_a_quote');
