Simple PHP / jQuery Contact Form

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

Download