I would suggest using AJAX for this.
You could do something like this for the jQuery part:
<script type="text/javascript">
jQuery(document).ready(function($) {
// Execute when user clicks on the "Submit" button
$('#SUBMIT_BUTTON_ID').on('click', function(e) {
e.preventDefault();
var email = $('input[name=email]').val();
var firstname = $('input[name=firstname]').val();
var familyname = $('input[name=familyname]').val();
var other_names = $('input[name=other_names]').val();
var dob_day = $('input[name=dob_day]').val();
var dob_month = $('input[name=dob_month]').val();
var dob_year = $('input[name=dob_year]').val();
var city_of_birth = $('input[name=city_of_birth]').val();
var country_of_birth = $('input[name=country_of_birth]').val();
var gender = $('input[name=gender]').val();
var formData = new FormData();
formData.append("action", "submit_contact_form");
formData.append("email", email);
formData.append("firstname", firstname);
formData.append("familyname", familyname);
formData.append("other_names", other_names);
formData.append("dob_day", dob_day);
formData.append("dob_month", dob_month);
formData.append("dob_year", dob_year);
formData.append("city_of_birth", city_of_birth);
formData.append("country_of_birth", country_of_birth);
formData.append("gender", gender);
$.ajax({
url: "/wp-admin/admin-ajax.php",
type: "post",
data: formData,
processData: false,
contentType: false,
cache: false,
success: function(resp) {
console.log('Message sent!');
},
error: function(errorThrown) {
console.log(errorThrown);
}
});
});
});
</script>
And then use your function as it is, to send the email to the recipient. Also note, that your input-fields must contain the ID’s from below, for jQuery to get the input. It’s also way easier to do requirement-check by using jQuery/AJAX here.
Hope it helps 🙂
EDIT:
You’re not actually sending the mail(!) You’re only checking if the mail is sent – but not running the function itself. Change this bit of code:
if(wp_mail($email_to,$subject,$form_message,$headers)) {
echo json_encode(array("result"=>"complete"));
} else {
echo json_encode(array("result"=>"mail_error"));
var_dump($GLOBALS['phpmailer']->ErrorInfo);
}
To this:
$send_mail = wp_mail($email_to,$subject,$form_message,$headers);
if($send_mail) {
echo json_encode(array("result"=>"complete"));
} else {
echo json_encode(array("result"=>"mail_error"));
var_dump($GLOBALS['phpmailer']->ErrorInfo);
}