How do you put a file in the client side and another in the

I'm trying to follow the contact-form tutorial and there's a Javascript and PHP validation, one being in the client side and the other in the server side.

https://mdbootstrap.com/components/bootstrap-contact-form

I'm sending a test message to my own personal e-mail, however I can't seem to receive any message despite me following all the instructions. Where should I be placing the Javascript and PHP files, on the same folder where the index.html file is located? What am I doing wrong?

HTML

<section id="contact-us" class="contact-us contact-section my-5">

<!-- Form with header -->
<div class="card">

<!-- Grid row -->
<div class="row">

<!-- Grid column -->
<div class="col-lg-8">

<div class="card-body form">

<!-- Header -->
<h3 class="mt-4"><i class="fa fa-envelope pr-2"></i>Write to us:</h3>
<form action="mail.php" id="contact-form" name="contact-form" method="POST" onsubmit="return validateForm()">
<!-- Grid row -->
<div class="row">

<!-- Grid column -->
<div class="col-md-6">
<div class="md-form mb-0">
<input type="text" id="form-contact-name" class="form-control">
<label for="form-contact-name" class="">Your name</label>
</div>
</div>
<!-- Grid column -->

<!-- Grid column -->
<div class="col-md-6">
<div class="md-form mb-0">
<input type="text" id="form-contact-email" class="form-control">
<label for="form-contact-email" class="">Your email</label>
</div>
</div>
<!-- Grid column -->

</div>
<!-- Grid row -->

<!-- Grid row -->
<div class="row">

<!-- Grid column -->
<div class="col-md-6">
<div class="md-form mb-0">
<input type="text" id="form-contact-phone" class="form-control">
<label for="form-contact-phone" class="">Your phone</label>
</div>
</div>
<!-- Grid column -->

<!-- Grid column -->
<div class="col-md-6">
<div class="md-form mb-0">
<input type="text" id="form-contact-company" class="form-control">
<label for="form-contact-company" class="">Your company</label>
</div>
</div>
<!-- Grid column -->

</div>
<!-- Grid row -->

<!-- Grid row -->
<div class="row">

<!-- Grid column -->
<div class="col-md-12">
<div class="md-form mb-0">
<textarea type="text" id="form-contact-message" class="form-control md-textarea" rows="3"></textarea>
<label for="form-contact-message">Your message</label>

</div>
</div>
<!-- Grid column -->

</div>
</form>

<!-- Grid row -->
<div class="center-on-small-only">
<a class="btn-floating btn-lg blue" onclick="validateForm()">
<i class="fa fa-send-o"></i>
</a>
<div class="status"></div>
</div>

</div>

</div>
<!-- Grid column -->

<!-- Grid column -->
<div class="col-lg-4">

<div class="card-body contact text-center h-100 white-text">

<h3 class="my-4 pb-2">Contact information</h3>
<ul class="text-lg-left list-unstyled ml-4">
<li>
<p><i class="fa fa-map-marker pr-2"></i>1980 E 35th St, Brooklyn, NY 11234</p>
</li>
<li>
<p><i class="fa fa-phone pr-2"></i>(347) 462 - 2058 </p>
</li>
<li>
<p><i class="fa fa-envelope pr-2"></i>ofp1980@gmail.com</p>
</li>
</ul>
<hr class="hr-light my-4">
<ul class="list-inline text-center list-unstyled">
<li class="list-inline-item">
<a class="p-2 fa-lg tw-ic">
<i class="fa fa-twitter"></i>
</a>
</li>
<li class="list-inline-item">
<a class="p-2 fa-lg li-ic">
<i class="fa fa-linkedin"> </i>
</a>
</li>
<li class="list-inline-item">
<a class="p-2 fa-lg ins-ic">
<i class="fa fa-instagram"> </i>
</a>
</li>
</ul>

</div>

</div>
<!-- Grid column -->

</div>
<!-- Grid row -->

</div>
<!-- Form with header -->

</section>

Mail.php

<?php
$name = $_POST['name'];
$email = $_POST['email'];
$message = $_POST['message'];
$subject = $_POST['subject'];
header('Content-Type: application/json');
if ($name === ''){
print json_encode(array('message' => 'Name cannot be empty', 'code' => 0));
exit();
}
if ($email === ''){
print json_encode(array('message' => 'Email cannot be empty', 'code' => 0));
exit();
} else {
if (!filter_var($email, FILTER_VALIDATE_EMAIL)){
print json_encode(array('message' => 'Email format invalid.', 'code' => 0));
exit();
}
}
if ($subject === ''){
print json_encode(array('message' => 'Subject cannot be empty', 'code' => 0));
exit();
}
if ($message === ''){
print json_encode(array('message' => 'Message cannot be empty', 'code' => 0));
exit();
}
$content="From: $name nEmail: $email nMessage: $message";
$recipient = "joemart06@gmail.com";
$mailheader = "From: $email rn";
mail($recipient, $subject, $content, $mailheader) or die("Error!");
print json_encode(array('message' => 'Email successfully sent!', 'code' => 1));
exit();
?>

Javascript

function validateForm() {

document.getElementById('status').innerHTML = "Sending...";
formData = {
'name' : $('input[name=name]').val(),
'email' : $('input[name=email]').val(),
'subject' : $('input[name=subject]').val(),
'message' : $('textarea[name=message]').val()
};

$.ajax({
url : "mail.php",
type: "POST",
data : formData,
success: function(data, textStatus, jqXHR)
{

$('#status').text(data.message);
if (data.code) //If mail was sent successfully, reset the form.
$('#contact-form').closest('form').find("input[type=text], textarea").val("");
},
error: function (jqXHR, textStatus, errorThrown)
{
$('#status').text(jqXHR);
}
});

}