I am trying to use Recaptcha for my form to prevent bots from spamming my email account. I am using AJAX so the form submits without reloading the page and I am using PHP Laravel for my backend. The form worked fine before trying to implement ReCaptcha to my form. However, when trying to send the form, I receive the error messaging "Please check the ReCaptcha box." when I have already clicked the ReCaptcha box.
My HTML Form code:
<form class="wpcf7-form" id="form-id">
<div class="primary-form">
<div class="col-xs-6">
<span class="wpcf7-form-control-wrap text-768"><input type="text" name="first-name" value="" size="40" class="wpcf7-form-control wpcf7-text wpcf7-validates-as-required" placeholder="First Name" required /></span>
</div>
<div class="col-xs-6">
<span class="wpcf7-form-control-wrap text-768"><input type="text" name="last-name" value="" size="40" class="wpcf7-form-control wpcf7-text wpcf7-validates-as-required" aria-required="true" aria-invalid="false" placeholder="Last Name" required /></span>
</div>
<div class="col-xs-6">
<span class="wpcf7-form-control-wrap email-766"><input type="email" name="email" value="" size="40" class="wpcf7-form-control wpcf7-text wpcf7-email wpcf7-validates-as-required wpcf7-validates-as-email" aria-required="true" aria-invalid="false" placeholder="E-mail Address" required/></span>
</div>
<div class="col-xs-6">
<span class="wpcf7-form-control-wrap phone"><input type="text" name="phone" value="" size="40" class="wpcf7-form-control wpcf7-text wpcf7-validates-as-required" aria-required="true" aria-invalid="false" placeholder="Phone Number" required /></span>
</div>
<div class="col-xs-12">
<span class="wpcf7-form-control-wrap textarea-6"><textarea name="message" cols="40" rows="10" class="wpcf7-form-control wpcf7-textarea" aria-invalid="false" placeholder="Your Message" required ></textarea></span>
</div>
<div class="pull-right" style="margin-right:10px;">
<p class="clearfix"></p>
<div class="g-recaptcha" data-sitekey="6LfDLkgUAAAAAJrw4K4X-lEkz0tOsUz6obeGCRv7"></div>
<button type="submit" class="button button-simple btn-submit mt-30">SEND</button>
</div>
</div>
</form>
Here is the AJAX code:
$("form.wpcf7-form").submit(function(e){
e.preventDefault();
var token = $("input[name=_token]").val(); // The CSRF token
var first_name = $("input[name=first-name]").val();
var last_name = $("input[name=last-name]").val();
var email = $("input[name=email]").val();
var phone = $("input[name=phone]").val();
var bodyMessage = $("textarea[name=message]").val();
var recaptcha_token = $("#g-recaptcha-response").val();
$.ajax({
type:'POST',
url:'/contact',
dataType: 'json',
data:{_token: token, first_name:first_name, last_name:last_name, email:email, phone:phone, bodyMessage:bodyMessage, recaptcha_token:recaptcha_token},
success:function(data){
$(".email-success-messge").append(data.success).fadeIn(999);
}
});
});
My ContactController file:
<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
use App\Post;
use Mail;
use Session;
class ContactController extends Controller
{
public function postContact(Request $request){
$this->validate($request, ['email' => 'required|email'] );
$data = array(
'first_name' => $request->first_name,
'last_name' => $request->last_name,
'email' => $request->email,
'phone' => $request->phone,
'bodyMessage' => $request->bodyMessage,
'recaptcha_token' => $request->recaptcha_token
);
if ($data['recaptcha_token']){
Mail::send('emails.contact', $data, function($message) use ($data){
$message->from($data['email']);
$message->to('jafar@calmcollective.co.uk');
$message->subject('Contact Details');
});
return response()->json(['success' => 'Thank you for getting in touch!'], 200);
}else{
return response()->json(['success' => 'Please check the ReCaptcha box.'], 200);
}
}
}
via Chebli Mohamed
Aucun commentaire:
Enregistrer un commentaire