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"