How to get reCaptcha to work with ajax .load - php

Question

I am looking to use reCaptcha with the jquery '.load' ajax function so that the information is passed across to my PHP contact form. I have established how to send across things such as name value, subject value etc with this method, however, I am unsure how to pass across the reCaptcha info.
As it currently stands when I submit the form I receive a PHP error advising 'Undefined index: g-recaptcha-response'. I believe this is to do with the Ajax side of things.
Any help on this would be amazing as I am at a total loss!
jQuery:
$("#contactForm").submit(function(event) {
event.preventDefault();
var name = $("#name").val();
var email = $("#email").val();
var subject = $("#subject").val();
var phone = $("#phone").val();
var company = $("#company").val();
var message = $("#message").val();
var submit = $("#submit").val();
$(".form-message").load("contactForm.php", {
name: name,
email: email,
subject: subject,
phone: phone,
company: company,
message: message,
submit: submit
});
PHP:
if(isset($_POST['submit'])) {
require 'dist/PHPMailer/PHPMailerAutoload.php';
$mail = new PHPMailer;
$name = $_POST['name'];
$email = $_POST['email'];
$subject = $_POST['subject'];
$phone = $_POST['phone'];
$company = $_POST['company'];
$message = $_POST['message'];
$secretKey = "--KEY--";
$responseKey = $_POST['g-recaptcha-response'];
$userIP = $_SERVER['REMOTE_ADDR'];
$url = "https://www.google.com/recaptcha/api/siteverify?secret=$secretKey&response=$responseKey&remoteip=$userIP";
$response = file_get_contents($url);
$mail->HOST = 'smtp.gmail.com';
$mail->Port = 587;
$mail->SMTPAuth = true;
$mail->SMTPSecure = 'tls';
$mail->Username = '--username--';
$mail->Password = '--password--';
$mail->setFrom('--email--', 'Contact Form Submission');
$mail->addAddress('--email--');
$mail->addReplyTo($email, $name);
$mail->isHTML(true);
$mail->Subject= $subject;
$mail->Body='<p>Name: '.$name. '<br>Email: '.$email.'<br>Subject: '.$subject.'<br>Phone: '.$phone.'<br>Company: '.$company.'<br>Message: '.$message.'</p>';
HTML:
<form method="POST" action="contactForm.php" id="contactForm">
<div class="form-group">
<input
type="text"
id="name"
name="name"
class="form-control"
placeholder="Full Name"
/>
</div>
<div class="form-group">
<input
type="text"
id="email"
name="email"
class="form-control"
placeholder="Email Address"
/>
</div>
<div class="form-group">
<input
type="text"
id="subject"
name="subject"
class="form-control"
placeholder="Subject"
/>
</div>
<div class="form-group">
<input
id="phone"
type="text"
name="phone"
class="form-control"
placeholder="Phone (optional)"
/>
</div>
<div class="form-group">
<input
id="company"
type="text"
name="company"
class="form-control"
placeholder="Company (optional)"
/>
</div>
<div class="form-group">
<textarea
class="form-control"
id="message"
name="message"
placeholder="Message"
style="height: auto"
rows="5"
></textarea>
</div>
<div
class="g-recaptcha"
data-sitekey="--KEY--"
></div>
<input
id="submit"
type="submit"
value="Submit"
class="btn btn-outline-primary btn-block mb-3"
name="submit"
/>
</form>

Answer 1

You can use the grecaptcha.getResponse() method to get the value of the captcha from the client side, then send that value with your ajax/jquery
<script type="text/javascript">
("#contactForm").submit(function(event) {
event.preventDefault();
var name = $("#name").val();
var email = $("#email").val();
var subject = $("#subject").val();
var phone = $("#phone").val();
var company = $("#company").val();
var message = $("#message").val();
var submit = $("#submit").val();
var captcha = grecaptcha.getResponse(); //get captcha
$(".form-message").load("contactForm.php", {
name: name,
email: email,
subject: subject,
phone: phone,
company: company,
message: message,
submit: submit,
captcha : captcha
});
</script>
Then your php
<?php
if(isset($_POST['submit'])) {
require 'dist/PHPMailer/PHPMailerAutoload.php';
$mail = new PHPMailer;
$name = $_POST['name'];
$email = $_POST['email'];
$subject = $_POST['subject'];
$phone = $_POST['phone'];
$company = $_POST['company'];
$message = $_POST['message'];
$secretKey = "--KEY--";
$responseKey = $_POST['captcha']; //captcha
$userIP = $_SERVER['REMOTE_ADDR'];
$url = "https://www.google.com/recaptcha/api/siteverify?secret=$secretKey&response=$responseKey&remoteip=$userIP";
$response = file_get_contents($url);
$mail->HOST = 'smtp.gmail.com';
$mail->Port = 587;
$mail->SMTPAuth = true;
$mail->SMTPSecure = 'tls';
$mail->Username = '--username--';
$mail->Password = '--password--';
$mail->setFrom('--email--', 'Contact Form Submission');
$mail->addAddress('--email--');
$mail->addReplyTo($email, $name);
$mail->isHTML(true);
$mail->Subject= $subject;
$mail->Body='<p>Name: '.$name. '<br>Email: '.$email.'<br>Subject: '.$subject.'<br>Phone: '.$phone.'<br>Company: '.$company.'<br>Message: '.$message.'</p>';