Please note that this will only work properly in modern browsers that support the CSS3 properties in use.
<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>
$("#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"