Edudemic Signup Form Snippet

gistfile1.html

<!-- ======================= begin newsletter signup code ======================= -->
<style>
	#ed_signup_box {
		background: #E8E8E8;
		margin: 10px 0;
		padding: 10px;
		border: 1px solid #D62828;
		border-radius: 5px;
		-webkit-border-radius: 5px;
		-moz-border-radius: 5px;
		-moz-box-shadow: 0 0 4px #CCC;
		-webkit-box-shadow: 0 0 4px #CCC;
		box-shadow: 0 0 4px #CCC;
	}
	#ed_email, #ed_signup_button { 
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
		box-sizing: border-box;
		width: 100%; 
	}
	#ed_email { 
		font-size: 13px; 
		padding-left: 5px;
		height: 31px;
	}
	.ed_above_form {
		margin-top: 0;
		margin-bottom: 0.5em;
		font-size: 16px;
	}
	.ed_below_form { 
		margin-top: 0.5em;
		text-align: right; 
		color: #555; 
		font-weight: normal; 
		font-size: 11px;
	}
	button#ed_signup_button {
		-moz-box-sizing: border-box;
		background: #D62828;
		text-shadow: none;
		border: 0 none;
		border-radius: 5px 5px 5px 5px;
		color: white;
		font-size: 13px;
		line-height: 13px;
		height: 31px;
		margin: 5px auto;
		padding: 0;
		text-align: center;
		cursor: pointer;
	}
	button#ed_signup_button img { 
		display:inline-block;
		vertical-align: middle; 
	}
	.ed_error {
		font-weight: bold;
		color: red;
	}
</style>
<div id="ed_signup_box">
	<form method="GET" action="http://www.educationdive.com/signup/edudemic/" id="ed_signup" name="ed_signup">
	<input type="hidden" name="utm_source" id="ed_utm_source" value="edudemic" />
	<input type="hidden" name="utm_medium" id="ed_utm_medium" value="widget" />
	<input type="hidden" name="utm_campaign" id="ed_utm_campaign" value="edudemic-sidebar" />
	<h3 class="ed_above_form">
		Never miss our best content.  Edudemic's news and features delivered daily.
	</h3>
	
	<div class="ed_fieldWrapper">
		<input class="ed_email" size="15" value="email..." id="ed_email" name="email" onblur="if(this.value=='')value='email...';" onfocus="if(this.value=='email...')value='';">
	</div>
	<button id="ed_signup_button" type="submit"><img src="http://s3.divecdn.com/widgets/email_icon2.png" width="22" height="22"> &nbsp; Sign me up! <img src="http://s3.divecdn.com/widgets/spinner.gif" style="display:none;" id="ed_spinner"></button>
	
	<div class="ed_fieldWrapper">
		<label id="ed_email_error" for="ed_email" style="display:none;" class="ed_error">A valid email address is required.</label>
		<label id="ed_message" for="ed_email" style="display:none;" class="ed_message">Thank you! You will receive an email shortly.</label>
	</div>
	<h4 class="ed_below_form">
		Powered by <a href="http://www.educationdive.com/">Education Dive</a>
	</h4>
	</form>
</div>
<script type="text/javascript" src="http://s3.divecdn.com/widgets/edudemic_signup.js"></script>
<!-- ======================= end newsletter signup code ======================= -->