javascript driven contact form

This code shows how the variables of the contact form are passed on dynamically so that it does not require a page re-direct,



<script type="text/javascript" src="js/jquery.js"></script> 

<script type="text/javascript">
$(function() {
 //trigger ajax on submit
 $('#contactForm').submit( function(){
  
  //hide the form
  $('#contactForm').hide();
  
  //show the loading bar
  $('.loader').append($('.bar')); 
  $('.bar').css({display:'block'});
  
  //send the ajax request  
  $.get('mail.php',{name:$('#name').val(), email:$('#email').val(), comment:$('#message').val()},
 
  //return the data
  function(data){
   //hide the graphic
   $('.bar').css({display:'none'}); 
   $('.loader').append(data);  
  }); 
 
  //stay on the page     
  return false; 
 });
});
</script>

 <div class="loader"></div>
 <div class="bar">Sending message...<br /><br /></div>



In the commenting above you can see that javascript first hides the animated loading graphic, but once the submit button of the form has been clicked this div will be visible and will show the animated loading graphic. Once the variables have been received back by javascript the grapic will be hidden again and the response text will be extracted from the mail.php file and displayed on the screen.

The following PHP code in the mail.php file shows how the variables are processed and sent and what information is sent back to the main page,



<?php

 sleep(2);

 //declare our variables
 $name = $_GET['name'];
 $email = $_GET['email'];
 $comment = $_GET['comment'];
 $todayis = date("l, F j, Y, g:i a") ;
 $subject = "From Website Form"; 
 $message = " Message: $comment \r \n From: $name  \r \n Reply to: $email";
 
 //put your email address here
 mail("info@chameleonmediaconcepts.co.uk", $subject, $message);
?>

 <div class="sent">
     <br />
        <b>Thank you  <?php echo $name ?></b><br /><br />
        Your query will be answered as soon as possible.<br />
        <br />
 </div>

Posted by