{"id":1314,"date":"2021-12-12T22:40:53","date_gmt":"2021-12-12T20:40:53","guid":{"rendered":"http:\/\/leonidassavvides.com\/blog\/?p=1314"},"modified":"2021-12-12T22:40:53","modified_gmt":"2021-12-12T20:40:53","slug":"google-recaptcha-in-a-web-form","status":"publish","type":"post","link":"https:\/\/www.leonidassavvides.com\/blog\/2021\/12\/google-recaptcha-in-a-web-form\/","title":{"rendered":"Google reCAPTCHA in a web form"},"content":{"rendered":"
<\/div>\n

Using HTML5, JS\/jQuery\/Ajax, CSS3, Bootstrap, PHP<\/strong><\/p>\n\n\n\n

Documentation here:<\/p>\n\n\n\n

https:\/\/developers.google.com\/recaptcha\/docs\/display<\/a><\/p>\n\n\n\n

<\/p>\n\n\n\n

<\/p>\n\n\n\n

Practiced here: http:\/\/www.followthesun.com.cy\/contactus.php<\/a><\/p>\n\n\n\n

To-Do the same here in this Article Web Log\/Video Log:<\/p>\n\n\n\n

http:\/\/www.latchiquads.com\/contactus.html<\/a><\/p>\n\n\n\n

http:\/\/www.polistaxi.com\/contacts.php<\/a><\/p>\n\n\n\n

http:\/\/www.poliscyprusquads.com\/contactus.html<\/a><\/p>\n\n\n\n

<\/p>\n\n\n\n

Notes:<\/p>\n\n\n\n

http:\/\/www.latchiquads.com<\/a>\/contactus.html<\/a><\/strong> <\/h2>\n\n\n\n

in the webpage HTML5\/CSS3\/JS\/JQUERY code.<\/p>\n\n\n\n

http:\/\/www.latchiquads.com<\/a>\/contactus.html<\/a> <\/strong><\/p>\n\n\n\n

<script type=\"text\/javascript\">\n\n  var reC = \"\";\n\n  var verifyCallback = function(response) {\n        \/\/console.log(response);\n        \/\/reC = response;\n        $(\"#g-recaptcha-response\").val(response);\n      };\n  var onloadCallback = function() {\n    grecaptcha.render('html_element', {\n      'sitekey' : 'site key',          \n            'callback' : verifyCallback\n    });\n  };\n<\/script><\/code><\/pre>\n\n\n\n
                                    <div class=\"form-group\">\n                                      <label class=\"control-label col-md-3\" for=\"comment\"> <\/label>\n                                      <div class=\"col-md-9\">\n                                        <div id=\"html_element\"><\/div>\n                                      <\/div>                                            \n                                    <\/div>\n<\/code><\/pre>\n\n\n\n
in case of JS Conflicts --- try a different position of <\/code><\/pre>\n\n\n\n
<script src=\"php\/webformsPHPajax2017.js?2021\"><\/script>\n<script src=\"https:\/\/www.google.com\/recaptcha\/api.js?onload=onloadCallback&render=explicit\" async defer><\/script><\/strong>\n<\/body> <\/code><\/pre>\n\n\n\n
D:\\htdocs_xampp\\Latchiquads.com\\php\\webformsPHPajax2017.js<\/strong><\/p>\n\n\n\n
$(document).ready(function() {<\/p>\n\n\n\n
var url = \"php\/contactus.php\";\n$('#send1').click(function(e){\n    e.preventDefault();\n    e.stopPropagation();\n    \/\/alert(\"send1\");\n\n  $.ajax({url: url, type: 'POST',\n  data:\n  {\n    name: escapeHTML($('#name').val()),\n    email: escapeHTML($('#email').val()),\n    phone: escapeHTML($('#phone').val()),\n    comments: escapeHTML($('#comment').val()),\n    token: escapeHTML($(\"#g-recaptcha-response\").val())<\/strong>\n  },\n  error: function() {\n      $(\"#alertMsg\").html('<div class=\"alert alert-danger\"><a href=\"#\" class=\"close\" data-dismiss=\"alert\" aria-label=\"close\">&times;<\/a><strong>Error!<\/strong> Something went wrong, check your email and retry!<\/div>');     \n  },\n  success: function(response){\n    console.log(response);\n    if (response==\"true\")                 \n      $(\"#alertMsg\").html('<div class=\"alert alert-success\"><a href=\"#\" class=\"close\" data-dismiss=\"alert\" aria-label=\"close\">&times;<\/a><strong>Success!<\/strong> We will reply ASAP!! See your email box for confirmation!<\/div>');\n    else      \n      $(\"#alertMsg\").html('<div class=\"alert alert-danger\"><a href=\"#\" class=\"close\" data-dismiss=\"alert\" aria-label=\"close\">&times;<\/a><strong>Error!<\/strong> Something went wrong, check your email and retry!<\/div>');      \n    }\n  });\n    return false;\n});<\/code><\/pre>\n\n\n\n
D:\\htdocs_xampp\\Latchiquads.com\\php\\contactus.php<\/strong><\/p>\n\n\n\n
$token = $_POST[“token”];<\/p>\n\n\n\n
function httpPost($token)
{<\/p>\n\n\n\n
$data = array(\n    \"secret\" => \"secret key\", \n    \"response\" => $token\n);    \nforeach($data as $key=>$value) { $fields_string .= $key.'='.$value.'&'; }\nrtrim($fields_string, '&');\n\n$data_string = json_encode($data);                                                                                                         \n$ch = curl_init('https:\/\/www.google.com\/recaptcha\/api\/siteverify');                                                                      \ncurl_setopt($ch, CURLOPT_CUSTOMREQUEST, \"POST\");                                                                     \ncurl_setopt($ch, CURLOPT_POSTFIELDS, $fields_string);                                                                  \ncurl_setopt($ch, CURLOPT_RETURNTRANSFER, true);                                                                      \n\n$result = json_decode(curl_exec($ch));    \n\nreturn $result->success;<\/code><\/pre>\n\n\n\n
}<\/p>\n\n\n\n
function quickContactProcess($name,$email,$phone,$comments, $token) {<\/p>\n\n\n\n
$captchaOK = httpPost($token);<\/p>\n\n\n\n
if ($response == “false” || $captchaOK != 1) {
\/\/die (“The reCAPTCHA wasn’t clicked. Go Back and try it again.”);
$response = “false”;
} else {
$response = “true”;
}<\/p>\n\n\n\n
quickContactProcess($name,$email,$phone,$comments, $token);
?><\/p>\n\n\n\n
<\/p>\n\n\n\n
http:\/\/www.poliscyprusquads.com\/contactus.html<\/a> <\/h2>\n\n\n\n
soon!<\/strong><\/p>\n\n\n\n
<\/p>\n\n\n\n
http:\/\/www.polistaxicyprus.com\/contactus.html<\/a> <\/h2>\n\n\n\n
soon!<\/strong><\/p>\n\n\n\n
<\/p>\n\n\n\n
http:\/\/www.polistaxi.com\/contacts.php<\/a><\/h2>\n\n\n\n
soon!<\/strong><\/p>\n","protected":false},"excerpt":{"rendered":"
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 D:\\htdocs_xampp\\Latchiquads.com\\php\\webformsPHPajax2017.js $(document).ready(function() { D:\\htdocs_xampp\\Latchiquads.com\\php\\contactus.php $token = $_POST[“token”]; function httpPost($token){ } function quickContactProcess($name,$email,$phone,$comments, $token) { $captchaOK = httpPost($token); if ($response == “false” || … Continue reading “Google reCAPTCHA in a web form”<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[2,7,8,40,41,42,43],"tags":[],"class_list":["post-1314","post","type-post","status-publish","format-standard","hentry","category-android","category-design","category-dev","category-social","category-tablets","category-technical","category-tech"],"_links":{"self":[{"href":"https:\/\/www.leonidassavvides.com\/blog\/wp-json\/wp\/v2\/posts\/1314","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.leonidassavvides.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.leonidassavvides.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.leonidassavvides.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.leonidassavvides.com\/blog\/wp-json\/wp\/v2\/comments?post=1314"}],"version-history":[{"count":0,"href":"https:\/\/www.leonidassavvides.com\/blog\/wp-json\/wp\/v2\/posts\/1314\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.leonidassavvides.com\/blog\/wp-json\/wp\/v2\/media?parent=1314"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.leonidassavvides.com\/blog\/wp-json\/wp\/v2\/categories?post=1314"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.leonidassavvides.com\/blog\/wp-json\/wp\/v2\/tags?post=1314"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}