Using HTML5, JS/jQuery/Ajax, CSS3, Bootstrap, PHP
Documentation here:
https://developers.google.com/recaptcha/docs/display
Practiced here: http://www.followthesun.com.cy/contactus.php
To-Do the same here in this Article Web Log/Video Log:
http://www.latchiquads.com/contactus.html
http://www.polistaxi.com/contacts.php
http://www.poliscyprusquads.com/contactus.html
Notes:
http://www.latchiquads.com/contactus.html
in the webpage HTML5/CSS3/JS/JQUERY code.
http://www.latchiquads.com/contactus.html
<script type="text/javascript">
var reC = "";
var verifyCallback = function(response) {
//console.log(response);
//reC = response;
$("#g-recaptcha-response").val(response);
};
var onloadCallback = function() {
grecaptcha.render('html_element', {
'sitekey' : 'site key',
'callback' : verifyCallback
});
};
</script> <div class="form-group">
<label class="control-label col-md-3" for="comment"> </label>
<div class="col-md-9">
<div id="html_element"></div>
</div>
</div>
in case of JS Conflicts --- try a different position of <script src="php/webformsPHPajax2017.js?2021"></script>
<script src="https://www.google.com/recaptcha/api.js?onload=onloadCallback&render=explicit" async defer></script>
</body> D:\htdocs_xampp\Latchiquads.com\php\webformsPHPajax2017.js
$(document).ready(function() {
var url = "php/contactus.php";
$('#send1').click(function(e){
e.preventDefault();
e.stopPropagation();
//alert("send1");
$.ajax({url: url, type: 'POST',
data:
{
name: escapeHTML($('#name').val()),
email: escapeHTML($('#email').val()),
phone: escapeHTML($('#phone').val()),
comments: escapeHTML($('#comment').val()),
token: escapeHTML($("#g-recaptcha-response").val())
},
error: function() {
$("#alertMsg").html('<div class="alert alert-danger"><a href="#" class="close" data-dismiss="alert" aria-label="close">×</a><strong>Error!</strong> Something went wrong, check your email and retry!</div>');
},
success: function(response){
console.log(response);
if (response=="true")
$("#alertMsg").html('<div class="alert alert-success"><a href="#" class="close" data-dismiss="alert" aria-label="close">×</a><strong>Success!</strong> We will reply ASAP!! See your email box for confirmation!</div>');
else
$("#alertMsg").html('<div class="alert alert-danger"><a href="#" class="close" data-dismiss="alert" aria-label="close">×</a><strong>Error!</strong> Something went wrong, check your email and retry!</div>');
}
});
return false;
});D:\htdocs_xampp\Latchiquads.com\php\contactus.php
$token = $_POST[“token”];
function httpPost($token)
{
$data = array(
"secret" => "secret key",
"response" => $token
);
foreach($data as $key=>$value) { $fields_string .= $key.'='.$value.'&'; }
rtrim($fields_string, '&');
$data_string = json_encode($data);
$ch = curl_init('https://www.google.com/recaptcha/api/siteverify');
curl_setopt($ch, CURLOPT_CUSTOMREQUEST, "POST");
curl_setopt($ch, CURLOPT_POSTFIELDS, $fields_string);
curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
$result = json_decode(curl_exec($ch));
return $result->success;}
function quickContactProcess($name,$email,$phone,$comments, $token) {
$captchaOK = httpPost($token);
if ($response == “false” || $captchaOK != 1) {
//die (“The reCAPTCHA wasn’t clicked. Go Back and try it again.”);
$response = “false”;
} else {
$response = “true”;
}
quickContactProcess($name,$email,$phone,$comments, $token);
?>
http://www.poliscyprusquads.com/contactus.html
soon!
http://www.polistaxicyprus.com/contactus.html
soon!
http://www.polistaxi.com/contacts.php
soon!
