HBO contact form

HTML

<div class="formS">
    <form action="" method="post">
      <ul>
        <h4>Contact Us (click here)</h4>
        <input type="hidden" name="subject" value="Submission" /> 
        <input type="hidden" name="redirect" value="thankyou.html" />
        <li><label for="name">Name</label>
        <input type="text" name="name" id="name"></li>

        <li><label for="zip">Zip</label>
        <input type="text" name="zip" id="zip"></li>

        <li><label for="city">City</label>
        <input type="text" name="city" id="city"></li>

        <li><label for="telephone">Telephone</label>
        <input type="text" name="telephone" id="telephone"></li>

        <li><label for="email">Email</label>
        <input type="text" name="email" id="email"></li>

        <li><label for="comments">I would like to know:</label>
        <textarea name="comments" id="comments" cols="40" rows="5"></textarea></li>

        <li><button name="submit" type="submit" class="submit" id="submit" value="Submit">Submit</button></li>

        <input type="hidden" name="form_order" value="alpha"/>
        <input type="hidden" name="form_delivery" value="hourly_digest"/>
        <input type="hidden" name="form_format" value="text"/>
      </ul>
  </form>
</div>

CSS

/* Contact form page */

html {
    background: #6b6b6b;
}

h4 {
	font-size: 20px;
	color: #0c5b78;
	padding-bottom: 5px;
	margin: 15px 0 0 0;
	cursor: pointer;
	display: block;
}

.formS {
	width: 400px;
	margin: 0 auto;
	padding: 0;
}

form > ul {
	font-size: 18px;
	padding: 0;
	margin: 0;
	float: right;
	list-style-type:none;
}

form > ul > li {
	padding: 5px;
	display: none;
}

form { 
	text-align:left; 
	padding: 0 10px 10px 10px;
	height: 408px;
}

.formS > form > ul > li > label 	{
	float: left;
	width: 50px;
	margin:5px 10px 0 0;
	text-align:right;
	display:block;
	background:none;
	font-weight:bold;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
}
		
input:focus, textarea:focus	{
	background: rgba(0, 0, 0, 0.1);
	border-radius: 5px;
	color: #fff;
	text-shadow: 0 1px 0 #2b2b2b;
}

textarea {
	width: 150px; 
	height: 50px;
	border: 3px solid rgba(255, 255, 255, 0.5); 
	padding:5px; 
	background: rgba(0, 0, 0, 0.1); 
	border-radius: 5px;
	box-shadow: 0 1px 3px #2b2b2b inset;
	resize: vertical;
}

.formS > form > ul > li > input {
	width: 150px; 
	height: 15px;
	border: 3px solid rgba(255, 255, 255, 0.5); 
	padding:5px; 
	background: rgba(0, 0, 0, 0.1); 
	border-radius: 5px;
	box-shadow: 0 1px 3px #2b2b2b inset;
}

.submit {
	width: 80px; 
	height: 30px;
	margin-left: 100px;
	font-size: 12px;
	background: #0c5b78;
	background: -webkit-gradient(linear, 0% 0% 0% 100%, from(#0c5b78), to(#094961));
	background: -webkit-linear-gradient(top, #0c5b78, #094961);
	background: -moz-linear-gradient(top, #0c5b78, #094961);
	background: -ms-linear-gradient(top, #0c5b78, #094961);
	background: -o-linear-gradient(top, #0c5b78, #094961);
	border-radius: 5px;
	box-shadow: 0 1px 0 rgba(255, 255, 255, 0.3) inset;
	border: 1px solid black;
	color: #fff;
	cursor: pointer;
}

.submit:hover {
	background: #094961;
}

JavaScript

$('form ul h4').on('click', function() { 
	$('form > ul > li').stop(true).fadeToggle(1500); 
});