How to send mail through a contact form using Recaptcha, AJAX and Laravel

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);
        }
    }
}

from Newest questions tagged laravel-5 - Stack Overflow http://ift.tt/2ENVAJY
via IFTTT