Posted on Leave a comment

How to setup Google reCaptcha Version 2.0?

Screenshot_4

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:

Screenshot_3

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      = "recipient@email.com";
       $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');

 

Leave a Reply

Your email address will not be published. Required fields are marked *