CSS3 Tricks

Please note that this will only work properly in modern browsers that support the CSS3 properties in use.

Basic structure


				<div id="note"></div>
      				<div id="fields" class="contact-form">
	      				<form id="ajax-contact-form" class="form-horizontal" action="javascript:alert('success!'); ">
	      					<div class="control-group">
	      						<label class="control-label" for="inputName">Your name:</label>
	      							<input type="text" name="name" >
	      					</div>
	      					<div class="control-group">
	      						<label class="control-label" for="inputEmail">Your Email:</label>
	      							<input type="text" name="email" >
	      					</div>
	      					<div class="control-group">
	      						<label class="control-label" for="inputEmail">Subject:</label>
	      							<input type="text" name="subject" >
	      					</div>
	      					<div class="control-group">
	      						<label class="control-label" for="inputEmail">Your Message:</label>
	      							<textarea name="content" rows="3"></textarea>
	      					</div>
	      					<div class="control-group captcha">
	      					<label class="control-label " for="captcha">Captcha:</label>
	      						<img src="captcha/captcha.php">
	      						<input type="text" name="capthca" value="">
	      						<div style="clear:both"></div>
	      					</div>        
	      					<button type="submit" class="btn btn_ btn-small_">submit</button>
	      				</form>
      				</div>    
				

Initialization


					      $("#ajax-contact-form").submit(function() 
					      { var str = $(this).serialize(); $.ajax( 
					        { type: "POST", url: "contact.php", data: str, success: function(msg)
					    			{ if(msg == 'OK') // Message Sent? Show the 'Thank You' message and hide the form
					    				{ result = '<div class="notification_ok">Your message has been sent. Thank you!<br> 
					    				<a href="#" onclick="freset();return false;">send another mail</a></div>'; 
					            $("#fields").hide(); 
					            } 							
					            else
					    	    { 
					              result = msg; 
					            } 
					            $("#note").html(result); 
					          } 
					    	  }); 
					        return false; 
					      });
					      function freset()
					      {
					     	  $("#note").html(''); 	
					        document.getElementById('ajax-contact-form').reset(); 	
					        $("#fields").show();
					      }
  					

Open contact_config.php file and replace "YOU_EMAIL_ADDRESS"