Complicated Contact Form Submit (ajax help) - php

Question

How can I run this contact form without reloading or changing the page on submit? I was told to use ajax but I don't know where to start with that.
I would like to be able to display the output ('Successfully sent! Thank you.') on my index.html inside a div for example.
<?php if (isset($_POST["contact"])){
$to = 'contact#example.com'; //Contact Email
$from = $_POST["email"];
$name = $_POST["name"];
$message = $_POST["message"];
// subject
$subject = 'New message from '.$name;
// To send HTML mail, the Content-type header must be set
$headers = 'MIME-Version: 1.0' . "\r\n";
$headers .= 'Content-type: text/html; charset=iso-8859-1' . "\r\n";
// Additional headers
$headers .= 'To: ' .$to. "\r\n";
$headers .= 'From: '.$from . "\r\n";
// Mail it
if(mail($to, $subject, $message, $headers)){
echo "Successfully sent! Thank you.";
} else {
echo "Oops! Failed to send your message";
}
}
?>

Answer 1

Try the below codes =)
html
<form id="contactform" name="contactform" method="post" action="email.php">
<div>
<input type="text" name="name">
</div>
<div>
<input type="email" name="email">
</div>
<div>
<input type="text" name="subject">
</div>
<div>
<textarea name="message"></textarea>
</div>
<button type="submit">
Send Message
</button>
</form>
ajax
var form = $('#contactform');
form.submit(function(event){
event.preventDefault();
var form_status = $('<div></div>');
$.ajax({
type:"post",
url: $(this).attr('action'),
data: $(this).serialize(),
beforeSend: function(){
form.prepend( form_status.html('<p>Sending</p>').fadeIn() );
}
}).done(function(data){
form_status.html('<p>Done</p>').delay(3000).fadeOut();
});
});
email.php
<?php
$to = 'contact#example.com'; //Contact Email
$from = $_POST["email"];
$name = $_POST["name"];
$message = $_POST["message"];
// subject
$subject = 'New message from '.$name;
// To send HTML mail, the Content-type header must be set
$headers = 'MIME-Version: 1.0' . "\r\n";
$headers .= 'Content-type: text/html; charset=iso-8859-1' . "\r\n";
// Additional headers
$headers .= 'To: ' .$to. "\r\n";
$headers .= 'From: '.$from . "\r\n";
// Mail it
mail($to, $subject, $message, $headers);
?>