My last PHP snippet is about creating
PHP/MySQL Login Form for any particular PHP/MYSQL system. Today I will give you another snippet, a Simple PHP / jQuery Contact Form. Contact us is essential element when having a website especially when you’re catering products online. This is pre-requisite to all e-commerce website to make contact page in order for their customer reach them to ask question / for just sending feedback. In this post I will show you on how to create a
simple PHP and jQuery Ajax Contact Form.
Step Summary
1. Create file contact.php.
2. Create file contact_send.php
Details
1. Create a file contact.php
- this includes your form with input field along with their corresponding fields.
CODE:
<form id="contact-form">
Name : <input class="text" name="contact-names" type="text" />
<span class="name-required"></span>
Email :<input class="text" name="contact-email" type="text" />
<span class="email-required"></span>
<div class="comment">
Comment :</div>
<textarea class="text-area" name="contact-comment"></textarea>
<span class="comment-required"></span>
<input class="send" id="submit-form" name="submit" type="submit" value="" />
</form>
2. The next step is to create a contact_send.php file
<?php
$names = $_POST['names'];
$email = $_POST['email_address'];
$comment = $_POST['comment'];
$to ='your@email.com';
$message = "";
$message .= "*Name: " . htmlspecialchars($names, ENT_QUOTES) . "<br>\n";
$message .= "*Email: " . htmlspecialchars($email, ENT_QUOTES) . "<br>\n";
$message .= "Comment: " . htmlspecialchars($comment, ENT_QUOTES) . "<br>\n";
$lowmsg = strtolower($message);
$headers = "MIME-Version: 1.0\r\nContent-type: text/html; charset=iso-8859-1\r\n";
$headers .= "From: \"" . $names . "\" <" . $email . ">\r\n";
$headers .= "Reply-To: " . $email . "\r\n";
$message = utf8_decode($message); mail($to, "Note from the Contact Form", $message, $headers);
if ($message){
echo 'sent';
}else{
echo 'failed';
}
?>
3. Then the last thing you need to do is to add the jQuery Ajax functions that will call your contact_send.php file. Edit your contact.php file and add the following code:
IMPORTANT: Don't forget to add the jQuery javascript at the the top of this code.
<script>$(document).ready(function(){
$('#submit-form').click(function(){
var reg = /^([A-Za-z0-9_\-\.])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,4})$/;
var names = $('#contact-form [name="contact-names"]').val();
var email_address = $('#contact-form [name="contact-email"]').val();
var comment = $.trim($('#contact-form .contact-comment').val());
var data_html ='' ;
if(names == ""){
$('.name-required').html('Please enter your name <br/>.');
}else{
$('.name-required').html('');
}
if(email_address == ""){
$('.email-required').html('Your email is required.');
}else if(reg.test(email_address) == false){
$('.email-required').html('Invalid Email Address.');
}else{
$('.email-required').html('');
}
if(comment == ""){
$('.comment-required').html('Comment is required.');
}else{
$('.comment-required').html('');
}
if(comment != "" && names != "" && reg.test(email_address) != false){
data_html = "names="+ names + "&comment=" + comment + "&email_address="+ email_address;
//alert(data_html);
$.ajax({
type: 'POST',
url: 'contact_send.php',
data: data_html,
success: function(msg){
if (msg == 'sent'){
$('#success').html('Message sent!') ;
$('#contact-form [name="contact-names"]').val('');
$('#contact-form [name="contact-email"]').val('');
$('#contact-form .contact-comment').val('');
}else{
$('#success').html('Mail Error. Please Try Again.!') ;
}
}
});
}
return false;
})
})
</script>
Validation Output
