Category: development

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">&times;</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">&times;</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">&times;</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!