I'm trying to integrate invisible recaptcha on a website that currenty uses recaptcha v2. Completing the form and hitting submit button has no problems. The problem is after the challenge is completed, the page doesn't get redirected to action.php or it doesn't get submitted at all.
I look for the same topics here. The topic I found near with my situation is this Invisible reCaptcha AJAX Call but still the form won't proceed further.
Actual test working link Test Registration
Below are my html, js and php codes for your reference.
index.html
<body>
<div id="form-messages"></div>
<div class="signup-form">
<form id="ajax-contact" action="action.php" method="post" enctype="multipart/form-data">
<div class="field-group">
<div class="input-group-icon">Name:</div>
<input type="text" placeholder="Enter name" id="name" name="name" required />
</div>
<div class="field-group">
<div class="input-group-icon">Email:</div>
<input type="email" placeholder="Enter email" id="email" name="email" autocorrect="off" autocapitalize="none" required />
</div>
<div id="interact_btn">
<input class="ghost-submit" id="submit_Btn" type="submit" value="SUBMIT" />
<input class="ghost-reset" id="reset_Btn" type="reset" value="CANCEL" />
</div>
<div class="g-recaptcha" data-sitekey="SITE KEY" data-callback="onSubmit" data-size="invisible">
</div>
</form>
<script src="js/app.js"></script>
<script src="https://www.google.com/recaptcha/api.js"></script>
</body>
app.js
$(function() {
var form = $('#ajax-contact');
var formMessages = $('#form-messages');
$(form).submit(function(e) {
e.preventDefault();
grecaptcha.execute();
});
function onSubmit(token) {
$("#submit_Btn").attr("disabled", true);
$("#reset_Btn").attr("disabled", true);
var formData = $(form).serialize();
formData.push({name: "g-recaptcha-response", value: token});
$(".overlay").show();
$.ajax({
type: 'POST',
url: $(form).attr('action'),
data: formData
})
.done(function(response) {
$("#submit_Btn").attr("disabled", false);
$("#reset_Btn").attr("disabled", false);
$(formMessages).removeClass('error');
$(formMessages).addClass('success');
$(formMessages).text(response);
$(".overlay").hide();
$('#name').val('');
$('#email').val('');
})
.fail(function(data) {
$("#submit_Btn").attr("disabled", false);
$("#reset_Btn").attr("disabled", false);
$(formMessages).removeClass('success');
$(formMessages).addClass('error');
if (data.responseText !== '') {
$(formMessages).text(data.responseText);
} else {
$(formMessages).text('Oops! An error occured and your message could not be sent.');
}
$(".overlay").hide();
});
grecaptcha.reset();
}
});
action.php
if ($_SERVER["REQUEST_METHOD"] == "POST")
{
$url = 'https://www.google.com/recaptcha/api/siteverify';
$privatekey="<SITE KEY>";
$resp=$_POST['g-recaptcha-response'];
$token = $_POST['token'];
if(isset($token) && !empty($token)) {
verify=file_get_contents(
$url.http_build_query([
'secret' => $privatekey
'response' => $resp,
]).$token
);
$captcha_success=json_decode($verify);
}
if ($captcha_success->success==false) {
http_response_code(401);
echo "reCAPTCHA verification failed.";/*These will be displayed on form-messages in index.html*/
}
else
{
$mail = new PHPMailer;
/*... phpmailer handling codes ...*/
if(!$mail->send()) {
http_response_code(500);
$error_message .= "Mailer Error: " .$mail->ErrorInfo;
}
else {
http_response_code(200);
echo "Thank you! your details are submitted.An email was sent to your email address.";
}
}
Expected result:
Click Submit button > Recaptcha challenge appears > Verified > show overlay while using ajax submitting the form
Current result: Click Submit button > Recaptcha challenge appears > Verified > no overlay no ajax form is not submitted
It would be a great help if you would point out which parts needs improvement or point out my mistakes. whatever any help is appreciated.
