jQuery: Interactive email submit form. Single line email only. Validates email as well. Good for those "announcement" pages when you want users to submit their emails for further notifications. See it in action here: www.sharenpay.com

email-submit.html

<div id="email-form">
  <p id="form-above"><strong>Enter your email to receive an exclusive first look invitation!</strong></p>
  <p id="form-above-error"><strong>Please enter a valid email address. </strong></p>
  <p id="form-above-success"><strong>Thank you! We will be sending you an invitation soon.</strong></p>
  <form method="" action="" id="subscribe-form">
    <fieldset class="cfix">
      <input type="text" class="text" name="email" id="subscribe-email" value="Enter your email" />
      <input type="submit" class="submit" name="submit" value="Submit" />
    </fieldset>
  </form>
  <p id="form-below">We hate SPAM and we'll never share your information with a third party.</p>
</div> <!-- #email-form -->

email.js

/****************************
* Author: William <hello@bigwilliam.com>
* Date: 22 Oct 2012
* License: Free to use, copy and redistrube. For commercial and non-commercial use.
***************************/

$(function() {  
  // hide the error and success elements to start off
  $("#form-above-error").hide();
	$("#form-above-success").hide();

	$(".submit").click(function() { // when the user clicks the submit button
		//$("#form-above-error").hide(); // hide the error if it was previously activated
		var email = $("input#subscribe-email").val(); // gets the email from the form

		// validate the email (source: http://stackoverflow.com/questions/2855865/jquery-validate-e-mail-address-regex)
		function isValidEmailAddress(emailAddress) {
		    var pattern = new RegExp(/^((([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+(\.([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+)*)|((\x22)((((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(([\x01-\x08\x0b\x0c\x0e-\x1f\x7f]|\x21|[\x23-\x5b]|[\x5d-\x7e]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(\\([\x01-\x09\x0b\x0c\x0d-\x7f]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]))))*(((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(\x22)))@((([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.)+(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.?$/i);
			return pattern.test(emailAddress);
		};

		// check validation, show error if bad email
		if (!isValidEmailAddress(email) || email == "" || email == "Enter your email") { 
			$("#form-above").hide();
			$('#form-above-error').show();
			$("#subscribe-email").focus();
			return false; // don't submit the form yet cuz there's errors buddy!
		} 

		var dataString = 'email=' + email;  
		//alert (dataString);return false;  // this line is for testing purposes, special thanks to Jeffrey Way - http://jeffrey-way.com/
		$.ajax({  
		  type: "POST",  
		  url: "email/email.php",  
		  data: dataString,  
		  success: function() {  
		  	$('#email-form').fadeOut(500, function() {
		  		$('#form-above-error').hide();
		  		$('#form-above-success').show();
		  	});

		  }
		});  
		return false; 	  
	});  
});