Simple Contact form using Jquery Ajax & PHP.html
Simple Contact form using Jquery Ajax & PHP
http://www.otallu.com/tutorials/simple-contact-form-using-jquery-ajax-php/
-----------------------------------------------------
HTML
-----------------------------------------------------
<form method="post" class="myform" action="process-form.php">
<input type="text" name="name" placeholder="Your Name" required><br>
<input type="email" name="email" placeholder="Your Email" required><br>
<textarea rows="4" cols="20" name="message" placeholder="Your Message"></textarea><br>
<input type="submit" name="send" value="Send"> <span class="output_message"></span>
</form>
-----------------------------------------------------
CSS Code
-----------------------------------------------------
input[type=text], input[type=email], textarea {
border:1px solid #ccc;
padding:8px;
margin:2px 0;
font-size:13px;
font-family:Arial, Helvetica, sans-serif;
color:#8f8f8f;
width:250px;
border-radius:5px;
box-shadow:inset 0 0 8px #e5e8e7;
}
input[type=submit] {
border:none;
padding:8px 25px;
margin:2px 0;
font-family:Arial, Helvetica, sans-serif;
color:#fff;
background:#0d7963;
border-radius:5px;
cursor:pointer;
}
input[type=submit]:hover {
opacity:0.9;
}
-----------------------------------------------------
jQuery Code
-----------------------------------------------------
$(document).ready(function() {
$('.myform').on('submit',function(){
// Add text 'loading...' right after clicking on the submit button.
$('.output_message').text('Loading...');
var form = $(this);
$.ajax({
url: form.attr('action'),
method: form.attr('method'),
data: form.serialize(),
success: function(result){
if (result == 'success'){
$('.output_message').text('Message Sent!');
} else {
$('.output_message').text('Error Sending email!');
}
}
});
// Prevents default submission of the form after clicking on the submit button.
return false;
});
});
-----------------------------------------------------
PHP Code
-----------------------------------------------------
if (isset($_REQUEST['name'],$_REQUEST['email'])) {
$name = $_REQUEST['name'];
$email = $_REQUEST['email'];
$message = $_REQUEST['message'];
// Set your email address where you want to receive emails.
$to = 'someaddress@example.com';
$subject = 'Contact Request From Website';
$headers = "From: ".$name." <".$email."> \r\n";
$send_email = mail($to,$subject,$message,$headers);
echo ($send_email) ? 'success' : 'error';
}