For some reason, my contact form won’t send an email. I have some validation that doesn’t work now currently either. I keep getting an error on line 11 of the PHP page - where I have “.n\n”
Here is the Contact.html page
<div class="form-container">
<form name="contact-form" id="contact-form" method="POST" action="Contact.php" onsubmit="return validateForm()">
<div class="input-row">
<label for="name" class="labelControl" style="padding-top: 20px;">Name</label>
<input type="text"
class="formControl" name="name" id="name">
</div>
<div class="input-row">
<label for="email" class="labelControl">Email</label>
<input type="text" class="formControl" name="email"
id="email">
</div>
<div class="input-row">
<label for="subject" class="labelControl">Subject</label>
<input type="text" class="formControl" name="subject" id="subject">
</div>
<div class="input-row">
<label for="message" class="labelControl">Message</label>
<textarea name="message" id="message" class="formControl" cols="60"
rows="6"></textarea>
</div>
<div class="pb-2"> <a class="btn btn-primary mb-2" onclick="validateForm();">Send</a>
<div class="status"></div>
</div>
</form>
</div>
The javascript is on the html page
<script>
function validateForm() {
var x = document.getElementById('name').value;
if (x == "") {
document.getElementById('status').innerHTML = "Name cannot be empty";
return false;
}
x = document.getElementById('email').value;
if (x == "") {
document.getElementById('status').innerHTML = "Email cannot be empty";
return false;
} else {
var re = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
if(!re.test(x)){
document.getElementById('status').innerHTML = "Email format invalid";
return false;
}
}
x = document.getElementById('subject').value;
if (x == "") {
document.getElementById('status').innerHTML = "Subject cannot be empty";
return false;
}
x = document.getElementById('message').value;
if (x == "") {
document.getElementById('status').innerHTML = "Message cannot be empty";
return false;
}
document.querySelector('.status').innerHTML = "Sending...";
}
//get input field values data to be sent to server
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: "Contact.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);
}
});
</script>
Here is the Contact.php page
<?php
if (isset($_POST['submit'])) {
$name = $_POST['name'];
$email = $_POST['email'];
$message = $_POST['message'];
$subject = $_POST['subject'];
$mailTo = "[email protected]";
$headers = "From: ".$mailFrom;
$txt = "You have a message ".$name".\n\n".$message;
mail($mailTo, $name, $txt, $headers);
header("Location: index.html?MessageSent");
}
?>