Search This Blog

Mar 24, 2011

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

16 comments:

Anonymous said...

It'd be nice if you posted a zip with the code in it ;)

Derek said...

I agree, your form code has at least one typo in it. it should be form-comment, not form-commnent.

Can you post your working source in a file?

Janz said...

@derek. Thanks for seeing the type. I updated the code, and will attached the download link in it. I didn't attached a file in the first place since it hosted in blogger. but I will planning to buy hosting..

thanks fellas

.net web development said...

Nice Its really easy to undersand

Qwerty said...
This comment has been removed by a blog administrator.
Janzell Jurilla said...

Thanks for creative criticism. :)

Aad said...

BLOORA TEMPLATE - HTML from templateforest, have that cf

Admin said...

Thank you so much!

Anonymous said...

Hi there, could you relink your working example, as it is currently a dead link. I have copy and pasted the above code but it does not work.

Thanks.

Janz said...

Hi All,

I updated the download link. Sorry I changed it last couple of days and I forgot to update this one.

Happy coding...

Janzell

Unknown said...

nevermind - i got it :)

Colin said...

Hello - thanks for this really useful and flexible form. it pretty much works perfectly, but I have a question I hope someone can answer:

sometimes I receive emails from the form that are sent from this address: "" <> .. and there is no other content in the message.

i've even added validation to ensure fields are not populated with a 'space' and also a hidden field that needs to have no value - but it still happens. any ideas?

Colin said...

Hello - thanks for this really useful and flexible form. it pretty much works perfectly, but I have a question I hope someone can answer:

sometimes I receive emails from the form that are sent from this address: "" <> .. and there is no other content in the message.

i've even added validation to ensure fields are not populated with a 'space' and also a hidden field that needs to have no value - but it still happens. any ideas?

Janz said...

@Colin - There might be a missing html tag in your code or anything related to that. You can send your code to my email and I'm happy to help you on that. :)

Web developer said...

It was sure a pleasure of mine to make one comment on this blog. Have bookmarked this website for future reference. Will definitely share this info with friends

Mn Designer said...

Thanks for informative share! This is an easy way to build contact form.