Jump to content

Adding Google ReCaptcha

c0fe

By c0fe
in PHP Coding Help

Recommended Posts

c0fe Newbie

c0fe

Posted
Posted

I have a AJAX contact form and the error messages are printed right below the field. I want to add Google ReCaptcha to it but my attempt it isn't working correctly, specifically, it does not appear to be checking if it was filled out or not and returning an error if necessary.

Can anyone look and see where am I making a mistake?

main (ajax.php): 

<?php
require_once 'config.php';
require 'vendor/autoload.php';

$response = [
	'status' => 'success',
	'message' => 'Mail sent successfully',
	'data' => []
];



//Checking is it ajax request
if (strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) !== 'xmlhttprequest') {
    //Invalid Ajax request
	http_response_code(403);
	$response = [
		'status' => 'error',
		'message' => 'Invalid request, please try again.',
		'data' => []
	];
	responseHandler($response);
}

if( !isset($_POST['data']) ) {
    http_response_code(400);
    $response = [
        'status' => 'error',
        'message' => 'Empty post data.',
        'data' => []
    ];
    responseHandler($response);
}
$data = json_decode($_POST['data'], true); $errors = '';

//Email validation
if ( isset($data["emailAddress"]) && !empty( $data["emailAddress"] ) ) {
    $email = trim($data["emailAddress"]);
    if ( filter_var($emailAddress, FILTER_VALIDATE_EMAIL) === false){
        $errors .= "$emailAddress is <strong>NOT</strong> a valid email address.<br/>";
    }
} else {
    $errors .= 'Please enter your email address.<br/>';
}
//First Name Validation
if ( isset($data["firstName"]) && !empty( $data["firstName"] ) ) {
    $name = trim( $data["firstName"] );
    if ( filter_var($firstName, FILTER_SANITIZE_STRING) === false){
        $errors .= 'Please enter a valid first name.<br/>';
    } elseif (!preg_match("/^[a-zA-Z ]*$/",$firstName)) {
        $errors .= 'Only letters and white space allowed for first name...<br/>';
    }
} else {
    $errors .= 'Please enter your name.<br/>';
}

//Last Name Validation
if ( isset($data["lastName"]) && !empty( $data["lastName"] ) ) {
    $name = trim( $data["lastName"] );
    if ( filter_var($lastName, FILTER_SANITIZE_STRING) === false){
        $errors .= 'Please enter a valid name.<br/>';
    } elseif (!preg_match("/^[a-zA-Z ]*$/",$lastName)) {
        $errors .= 'Only letters and white space allowed for last name...<br/>';
    }
} else {
    $errors .= 'Please enter your name.<br/>';
}

//Company Name Validation
if ( isset($data["companyName"]) && !empty( $data["companyName"] ) ) {
    $name = trim( $data["companyName"] );
    if ( filter_var($companyName, FILTER_SANITIZE_STRING) === false){
        $errors .= 'Please enter a valid name.<br/>';
    } elseif (!preg_match("/^[a-zA-Z ]*$/",$companyName)) {
        $errors .= 'Only letters and white space allowed for company name...<br/>';
    }
} else {
    $errors .= 'Please enter your name.<br/>';
}

//Company Address Validation
if ( isset($data["companyAddress"]) && !empty( $data["companyAddress"] ) ) {
    $subject = trim( $data["companyAddress"] );
    if ( filter_var($companyAddress, FILTER_SANITIZE_STRING) === false){
        $errors .= 'Please enter a company Address to send.<br/>';
    }
} else {
    $errors .= 'Please enter a company Address to send.<br/>';
}

//City Name Validation
if ( isset($data["city"]) && !empty( $data["city"] ) ) {
    $name = trim( $data["city"] );
    if ( filter_var($city, FILTER_SANITIZE_STRING) === false){
        $errors .= 'Please enter a valid city.<br/>';
    } elseif (!preg_match("/^[a-zA-Z ]*$/",$city)) {
        $errors .= 'Only letters and white space allowed for city name...<br/>';
    }
} else {
    $errors .= 'Please enter your city name.<br/>';
}


//Message Validation
if ( isset($data["message"]) && !empty( $data["message"] ) ) {
    $message = trim( $data["message"] );
    if ( filter_var($message, FILTER_SANITIZE_STRING) === false){
        $errors .= 'Please enter a message to send.<br/>';
    }
} else {
    $errors .= 'Please enter a message to send.<br/>';
}

//Start of ReCaptcha
$response = $_POST["g-recaptcha-response"];
	$url = 'https://www.google.com/recaptcha/api/siteverify';
	$data = array(
		'secret' => 'secret_password',
		'response' => $_POST["g-recaptcha-response"]
	);
	$options = array(
		'http' => array (
			'method' => 'POST',
			'content' => http_build_query($data)
		)
	);
	$context  = stream_context_create($options);
	$verify = file_get_contents($url, false, $context);
	$captcha_success=json_decode($verify);
	if ($captcha_success->success==false) {
		$errors .= 'ReCapatcha is required.<br/>';
} else if ($captcha_success->success==true) {

if(!empty( $errors )) {
    http_response_code(400);
    $response = [
        'status' => 'error',
        'message' => $errors,
        'data' => []
    ];
    responseHandler($response);
}
}
//End of ReCaptcha

//Filtering out newlines in the email subject
$subject = str_replace(array("\r","\n"),array(" "," "),$subject);
$contactContent = file_get_contents('email_templates/contact.html');;
$parameters = ['name' => $name, 'to_name' => TO_NAME, 'message' => $message ];

if(! send_mail( $email, $subject, $contactContent, $parameters ) ){
    //Email sent failed.
    http_response_code(500);
    $response = [
        'status' => 'error',
        'message' => 'Email service failing temporarily Or Maybe you are entered invalid E-mail, Please enter valid email and try again.',
        'data' => []
    ];
    responseHandler($response);
} else {
    //Email successfully sent
    http_response_code(200);
    responseHandler($response);
}

/**
 * responseHandler function
 * @param array $response request response
 */
function responseHandler($response)
{
	header('Content-type: application/json');
	echo json_encode($response);
	exit;
}

/**
 * send_mail function
 * @param  string $email             [[Description]]
 * @param  string $Subject           [[Description]]
 * @param  string $message           [[Description]]
 * @param  array [$parameters = []] [[Description]]
 * @return boolean  [[Description]]
 */

function send_mail($email, $Subject, $message, $parameters = []){
	////Parse the message with given parameters
	if( !empty( $parameters ) )$message = parse($message, $parameters);



	$mail = new PHPMailer;
	//$mail->SMTPDebug = 3;                               // Enable verbose debug output
	$mail->isSMTP();                                      // Set mailer to use SMTP
	$mail->Host = SMTP_HOST;  // Specify main and backup SMTP servers
	$mail->SMTPAuth = SMTP_AUTH;                               // Enable SMTP authentication
	$mail->Username = SMTP_USERNAME;
	$mail->Password = SMTP_PASSWORD;
	$mail->SMTPSecure = SMTP_SECURE;                            // Enable TLS encryption, `ssl` also accepted
	$mail->Port = SMTP_PORT;                                    // TCP port to connect to

    if( isset($parameters['name']) )
        $mail->setFrom($email, $parameters['name']);
    else
        $mail->setFrom($email);


	$mail->addAddress(TO_EMAIL);     // Add a recipient
	//$mail->addReplyTo($email, 'Smart Invoice V3 Promotion');
    $mail->addBCC(TO_EMAIL);

	$mail->isHTML(true);                                  // Set email format to HTML
	$mail->Subject = $Subject;

	$mail->Body = $message;
	$mail->AltBody = strip_tags($message);

	if(!$mail->send()) {//$mail->ErrorInfo;
        return false;
	}
	return true;
}


/**
 * parse function
 * @param  string $message    [[Description]]
 * @param  array $parameters [[Description]]
 * @return string [[Description]]
 */
function parse($message, $parameters) {
	foreach ($parameters as $key => $value) {
		$message = str_replace('{'.$key.'}', $value, $message);
	}
	return $message;
}

 

script.js: 

$(window).load(function() {
    $("#loader").fadeOut("slow");
    $('#main').fadeIn("slow");
});
$(document).ready(function(){
    jQuery.validator.setDefaults({
		errorPlacement : function(error, element) {
			element.removeClass('has-success').addClass('has-error');
		}
	});
    $('#contactForm').validate( {
        submitHandler : function(form) {
            return false;
        },
        rules : {
            emailAddress:{
                required: true,
                email: true
            },
			firstName:{
				required : true,
				minlength : 3,
				maxlength : 50
			},
      lastName:{
        required : true,
        minlength : 3,
        maxlength : 50
      },
      companyName:{
        required : true,
        minlength : 3,
        maxlength : 50
      },
            companyAddress: {
                required : true,
				minlength : 10
            },
            city: {
                required : true,
        minlength : 10
            },
            message: {
                required : true,
				minlength : 50
            }
        },
        messages : {
            emailAddress:{
                required : "Please enter your Email"
            },
			firstName:{
				required : "Please enter your name"
			},
      lastName:{
        required : "Please enter your name"
      },
      companyName:{
        required : "Please enter your name"
      },
            companyAddress: {
                required : "Please enter your contact purpose",
				minlength : "Minimum length of subject must be 10 chars long."
            },
            city: {
                required : "Please enter your contact purpose",
        minlength : "Minimum length of subject must be 10 chars long."
            },
            message: {
                required : "Please enter your sweet message",
				minlength : "Minimum length of your message must be 50 chars long."
            }
            captcha: grecaptcha.getResponse()
        },
        errorPlacement : function(error, element) {
            $(element).closest('div.form-group').find('.help-block').html(error.html());
        },
        highlight : function(element) {
            $(element).closest('div.form-group').removeClass('has-success').addClass('has-error');
        },
        unhighlight: function(element, errorClass, validClass) {
             $(element).closest('div.form-group').removeClass('has-error').addClass('has-success');
             $(element).closest('div.form-group').find('.help-block').html('');
        }
    });

    $(document).on('click', '#sendMailBtn', function(e){



        e.preventDefault();
        if( $('#contactForm').valid() ) {
			var sendMailBtn = $('#sendMailBtn');
			sendMailBtn.button('loading');
            $.ajax({
                url: 'ajax.php',
                method: 'post',
                dataType: 'json',
                data : { data: JSON.stringify($('#contactForm').serializeObject()) },
                success: function( response ){
					sendMailBtn.button('reset');
					$('input,textarea').val('');
                    showSuccessMessage();
                },
                error: function( response ) {
					sendMailBtn.button('reset');
					if( response.status === 400 || response.status === 403 || response.status === 500 ) {
						showWarningMessage(response.responseJSON.message);
					} else {
						showWarningMessage();
					}
                }
            });
        }

        return false;
    });

    function showSuccessMessage(){
        swal({
            title: "Many Thanks!!!",
            text: "Thanks for contacting us, We will get back to your inbox shortly...",
            type: "success",
            html: true
            /*imageUrl: "img/thumbs-up.jpg"*/
        });
    }

    function showWarningMessage(message){
		if(typeof message === 'undefined' || message === '' ) message = "Something went wrong, Please try again.";
        swal({
            title: "Oops...",
            text: message,
            type: "error",
            html: true
        });
    }

    $.fn.serializeObject = function()
    {
        var o = {};
        var a = this.serializeArray();
        $.each(a, function() {
            if (o[this.name] !== undefined) {
                if (!o[this.name].push) {
                    o[this.name] = [o[this.name]];
                }
                o[this.name].push(this.value || '');
            } else {
                o[this.name] = this.value || '';
            }
        });
        return o;
    };
});

index.html:

  

<!doctype html>
<html>
<head>
	<title>Form Master</title>
	<script src='https://www.google.com/recaptcha/api.js'></script>
	<!-- Bootstrap -->
	<link href="css/bootstrap.min.css" rel="stylesheet">
	<!--<link rel="stylesheet" href="css/super_bootstrap.min.css">-->
	<link rel="stylesheet" href="css/sweetalert/sweetalert.css">
	<link rel="stylesheet" href="css/style.css">
	<!-- Ripple CSS -->
	<!--

	<style type='text/css'>
	width:100%; @-webkit-keyframes uil-ripple{0%{width:0;height:0;opacity:0;margin:0}33%{width:44%;height:44%;margin:-22% 0 0 -22%;opacity:1}100%{width:88%;height:88%;margin:-44% 0 0 -44%;opacity:0}}@-ms-keyframes uil-ripple{0%,100%{opacity:0}0%{width:0;height:0;margin:0}33%{width:44%;height:44%;margin:-22% 0 0 -22%;opacity:1}100%{width:88%;height:88%;margin:-44% 0 0 -44%}}@-moz-keyframes uil-ripple{0%{width:0;height:0;opacity:0;margin:0}33%{width:44%;height:44%;margin:-22% 0 0 -22%;opacity:1}100%{width:88%;height:88%;margin:-44% 0 0 -44%;opacity:0}}@-webkit-keyframes uil-ripple{0%{width:0;height:0;opacity:0;margin:0}33%{width:44%;height:44%;margin:-22% 0 0 -22%;opacity:1}100%{width:88%;height:88%;margin:-44% 0 0 -44%;opacity:0}}@-o-keyframes uil-ripple{0%{width:0;height:0;opacity:0;margin:0}33%{width:44%;height:44%;margin:-22% 0 0 -22%;opacity:1}100%{width:88%;height:88%;margin:-44% 0 0 -44%;opacity:0}}@keyframes uil-ripple{0%{width:0;height:0;opacity:0;margin:0}33%{width:44%;height:44%;margin:-22% 0 0 -22%;opacity:1}100%{width:88%;height:88%;margin:-44% 0 0 -44%;opacity:0}}.uil-ripple-css{background:0 0;position:relative;width:200px;height:200px}.uil-ripple-css div{position:absolute;top:50%;left:50%;margin:0;width:0;height:0;opacity:0;border-radius:50%;border-width:12px;border-style:solid;-ms-animation:uil-ripple 2s ease-out infinite;-moz-animation:uil-ripple 2s ease-out infinite;-webkit-animation:uil-ripple 2s ease-out infinite;-o-animation:uil-ripple 2s ease-out infinite;animation:uil-ripple 2s ease-out infinite}.uil-ripple-css div:nth-of-type(1){border-color:#afafb7}.uil-ripple-css div:nth-of-type(2){border-color:#5cffd6;-ms-animation-delay:1s;-moz-animation-delay:1s;-webkit-animation-delay:1s;-o-animation-delay:1s;animation-delay:1s}
	</style>
-->
</head>
<body>
<div class="col-sm-6 col-sm-offset-3">

	<h1>Contact Form</h1>

	<!-- OUR FORM -->
	<form id="contactForm">

		<!-- NAME -->
		<div class="form-group">
			<label for="firstName">First Name</label>
			<input type="text" class="form-control" name="firstName" id="firstName" placeholder="Henry Pym">
			<span class="help-block"></span>
			<!-- errors will go here -->
		</div>

		<!-- NAME -->
		<div class="form-group">
			<label for="lastName">Last Name:</label>
			<input type="text" class="form-control" name="lastName" id="lastName" placeholder="Henry Pym">
			<span class="help-block"></span>
			<!-- errors will go here -->
		</div>

		<!-- NAME -->
		<div class="form-group">
			<label for="companyName">Company Name:</label>
			<input type="text" class="form-control" name="companyName" id="companyName" placeholder="Henry Pym">
			<span class="help-block"></span>
			<!-- errors will go here -->
		</div>

		<!-- NAME -->
		<div class="form-group">
			<label for="companyAddress">Company Address:</label>
			<input type="text" class="form-control" name="companyAddress" id="companyAddress" placeholder="Henry Pym">
			<span class="help-block"></span>
			<!-- errors will go here -->
		</div>

		<!-- NAME -->
		<div id="city-group" class="form-group">
			<label for="city">City:</label>
			<input type="text" class="form-control" name="city" id="city" placeholder="Henry Pym">
			<span class="help-block"></span>
			<!-- errors will go here -->
		</div>
<!--
		<div id="state-group" class="form-group">
      <label for="state">State</label>
      <select id="state" name="state" class="form-control">
        <option selected>Choose...</option>
        <option>...</option>
      </select>
    </div>
	-->

		<!-- EMAIL ADDRESS -->
		<div id="emailAddress-group" class="form-group">
			<label for="emailAddress">Email Address:</label>
			<input type="email" class="form-control" name="emailAddress" id="emailAddress" placeholder="rudd@avengers.com">
			<span class="help-block"></span>
			<!-- errors will go here -->
		</div>

		<!-- COMMENT -->
		<div id="comment-group" class="form-group">
			<label for="comment">Comment:</label>
			<input type="text" class="form-control" name="message" id="message" placeholder="Ant Man">
			<span class="help-block"></span>
			<!-- errors will go here -->
		</div>

		<div id="g-recaptcha" class="form-group">
			<div id="g-recaptcha" name="g-recaptcha" class="g-recaptcha" data-sitekey="public_key"></div>
			<span class="help-block"></span>
		</div>

		<button type="button" id="sendMailBtn" data-loading-text="Please Wait..." class="btn btn-success form-control">Submit <span class="fa fa-arrow-right"></span></button>

	</form>

</div>
<script src="js/jquery-1.12.3.js"></script>
<!-- <script src="http://cdn.jsdelivr.net/jquery.validation/1.15.1/jquery.validate.min.js"></script> -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.17.0/jquery.validate.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/sweetalert/sweetalert.min.js"></script>
<script src="js/script.js"></script>
</body>
</html>

 

Link to comment
Share on other sites

Archived

This topic is now archived and is closed to further replies.

Go to topic listing
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.