How can i add recaptcha properly to my html form? - php

Question

I have an AJAX HTML form with validation fields. So my problem is that i'm stuck. I want to embed a recaptcha in my form. I want to produce the following result. If the user completes the recaptcha then the form will be sended. Now if i complete the form and the recaptcha correctly the form is not sended.
HTML
function sendContact() {
var valid;
valid = validateContact();
if(valid) {
jQuery.ajax({
url: "contact_mail.php",
data:'userName='+$("#userName").val()+'&userEmail='+$("#userEmail").val()+'&subject='+$("#subject").val()+'&content='+$(content).val(),
type: "POST",
success:function(data){
$("#mail-status").html(data);
},
error:function (){}
});
}
}
function validateContact() {
var valid = true;
$(".demoInputBox").css('background-color','');
$(".info").html('');
if(!$("#userName").val()) {
$("#userName-info").html("<span style='color: #F00423';>Απαιτούμενο πεδίο</span>");
$("#userName").css('background-color','#3E3E3E');
valid = false;
}
if(!$("#userEmail").val()) {
$("#userEmail-info").html("<span style='color: #F00423';>Απαιτούμενο πεδίο</span>");
$("#userEmail").css('background-color','#3E3E3E');
valid = false;
}
if(!$("#userEmail").val().match(/^([\w-\.]+#([\w-]+\.)+[\w-]{2,4})?$/)) {
$("#userEmail-info").html("<span style='color: #F00423';>Απαιτούμενο πεδίο</span>");
$("#userEmail").css('background-color','#3E3E3E');
valid = false;
}
if(!$("#subject").val()) {
$("#subject-info").html("<span style='color: #F00423';>Απαιτούμενο πεδίο</span>");
$("#subject").css('background-color','#3E3E3E');
valid = false;
}
if(!$("#content").val()) {
$("#content-info").html("<span style='color: #F00423';>Απαιτούμενο πεδίο</span>");
$("#content").css('background-color','#3E3E3E');
valid = false;
}
return valid;
}
</script>
<div id="frmContact">
<div id="mail-status"></div>
<div>
<span id="userName-info" class="info"></span><br/>
<input type="text" name="userName" id="userName" class="form-control form-dark demoInputBox" placeholder="Όνομα">
</div>
<div>
<span id="userEmail-info" class="info"></span><br/>
<input type="text" name="userEmail" id="userEmail" class="form-control form-dark demoInputBox" placeholder="Email">
</div>
<div>
<span id="subject-info" class="info"></span><br/>
<input type="number" name="subject" id="subject" class="form-control form-dark demoInputBox" placeholder="Τηλέφωνο">
</div>
<div>
<span id="content-info" class="info"></span><br/>
<textarea name="content" id="content" class="form-control form-dark demoInputBox" cols="60" rows="6" placeholder="Μήνυμα"></textarea>
</div>
<div>
<div class="g-recaptcha" data-theme="dark" data-sitekey="6LcoXZ0UAAAAAMdgKIlchJvizDWic5S7nwr5XD3g"></div>
<button name="submit" class="btn btn-border border-white btnAction" onClick="sendContact();">Αποστολη</button>
</div>
</div>
PHP
<?php
if ($_SERVER["REQUEST_METHOD"] == "POST") {
// access
$secretKey = '6LcoXZ0UAAAAAF3U4SSfiKPZ7NWyuATN7NFh8fKE';
$captcha = $_POST['g-recaptcha-response'];
if(!$captcha){
echo '<p class="alert alert-warning">Please check the the captcha form.</p>';
exit;
}
$ip = $_SERVER['REMOTE_ADDR'];
$response=file_get_contents("https://www.google.com/recaptcha/api/siteverify?secret=".$secretKey."&response=".$captcha."&remoteip=".$ip);
$responseKeys = json_decode($response,true);
if(intval($responseKeys["success"]) !== 1) {
echo '<p class="alert alert-warning">Please check the the captcha form.</p>';
} else {
$to = "vp#digital-media.gr";
$msg = "name:\t$_REQUEST[userName]\n";
$msg .= "email:\t$_REQUEST[userEmail]\n";
$msg .= "tel:\t$_REQUEST[subject]\n";
$msg .= "message:\t$_REQUEST[content]\n";
$success = mail($to, "Mail from our site", $msg, "Content-type: text/plain; charset=UTF-8");
if($success) {
print "<p class='success'>Ευχαριστούμε, το μήνυμα σας έχει σταλθεί. Θα σας απαντήσουμε το συντομότερο.</p>";
} else {
print "<p class='Error'>Υπήρξε ένα σφάλμα, δοκιμάστε αργότερα! </p>";
}
}
?>