Bootstrap snippet and html example. Highlighted contact form

<link rel="stylesheet" type="text/css" href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css">
<div class="container bootstrap snippets bootdey">
    <section id="contact" class="gray-bg padding-top-bottom">
    	<div class="container bootstrap snippets bootdey">
            <div class="row">
				<form id="Highlighted-form" class="col-sm-6 col-sm-offset-3" action="contact.php" method="post" novalidate="">
					
					<div class="form-group">
					  <label class="control-label" for="contact-name">Name</label>
					  <div class="controls">
						<input id="contact-name" name="contactName" placeholder="Your name" class="form-control requiredField Highlighted-label" data-new-placeholder="Your name" type="text" data-error-empty="Please enter your name">
						<i class="fa fa-user"></i>
					  </div>
					</div><!-- End name input -->
					
					<div class="form-group">
					  <label class="control-label" for="contact-mail">Email</label>
					  <div class=" controls">
						<input id="contact-mail" name="email" placeholder="Your email" class="form-control requiredField Highlighted-label" data-new-placeholder="Your email" type="email" data-error-empty="Please enter your email" data-error-invalid="Invalid email address">
						<i class="fa fa-envelope"></i>
					  </div>
					</div><!-- End email input -->
					<div class="form-group">
					  <label class="control-label" for="contact-message">Message</label>
						<div class="controls">
							<textarea id="contact-message" name="comments" placeholder="Your message" class="form-control requiredField Highlighted-label" data-new-placeholder="Your message" rows="6" data-error-empty="Please enter your message"></textarea>
							<i class="fa fa-comment"></i>
						</div>
					</div><!-- End textarea -->
					<p><button name="submit" type="submit" class="btn btn-info btn-block" data-error-message="Error!" data-sending-message="Sending..." data-ok-message="Message Sent"><i class="fa fa-location-arrow"></i>Send Message</button></p>
					<input type="hidden" name="submitted" id="submitted" value="true">	
				</form><!-- End Highlighted-form -->
			</div>	
		</div>	
	</section>
    </div>                    

                       
body{
    background:#EEEEEE;    
}

.contact-item h2{
    font-size:18px;
    font-weight:600;
    margin-bottom:10px;
}

.contact-item .icon{
    display:block;
    font-size:48px;
    color:#5cc9df;
    text-shadow:-2px 2px 0 rgba(0,0,0,0.1);
    -webkit-transition:all .3s ease-out;
    transition:all .3s ease-out;
}

.contact-item .icon:hover{
    color:#5cc9df;
    -webkit-transform:scale(1.3) translateY(-10px);
    transform:scale(1.3) translateY(-10px);
}


.bl_form {
    margin: 30px 0 0;
}

.bl_form input {
    padding-top: 15px;
	background: rgba(255,255,255,0.10);
	box-shadow: 0 4px 0px rgba(0,0,0,0.2);
	border: none;
	color: white;
	padding: 10px 15px;
	border-radius: 5px;
	font-size: 16px;
	outline: none;
}

.lb_wrap .lb_label.top, .lb_wrap .lb_label.bottom {
	left: 66px !important;
}

.lb_wrap .lb_label.left {
	left: 0;
}

.lb_label {
	font-size:18px;
    line-height:32px;
	font-weight: 400;
	color: #ccc;
}

.no-placeholder .lb_label {
	display:none;
}

.lb_label.active {
	color: #aaa;
}

#Highlighted-form .form-group label{
    display:none;
    font-size:18px;
    line-height:24px;
    font-weight:100;
    text-transform:uppercase;
}

#Highlighted-form.no-placeholder .form-group label{
    display:block;
}

#Highlighted-form .controls {
    padding:0;
    margin-top:40px;
}

#Highlighted-form.no-placeholder .controls {
    margin-top:0;
}

#Highlighted-form .form-control {
	display:inline;
    background:#fff;
    border:none;
    border-radius:5px;
    outline:none;
    box-shadow:0 4px 0 rgba(0,0,0,0.05);
    height:52px;
    font-size:18px;
    line-height:32px;
    color:#aaa;
    font-weight:400;
    padding-left:64px;
	vertical-align:top;
}

#Highlighted-form .form-group.half-width{
    width:40%;
    float:left;
}

#Highlighted-form .form-group{
    position:relative;
}

#Highlighted-form .form-group [class*=fa] {
    display:block;
    width:64px;
    position:absolute;
    top:0;
    left:5px;
    color:#eee;
    font-size:24px;
    line-height:52px;
    text-align:center;
    font-weight:300;
	-webkit-transition:color .3s ease-out;
	transition:color .3s ease-out;
}

#Highlighted-form .form-group [class*=fa].active{
    color:#ccc;
}

#Highlighted-form.no-placeholder .form-group [class*=fa]{
    top:30px;
}

#Highlighted-form textarea.form-control {
    height:auto;
	max-width:100%;
	min-width:100%;
    font-size:18px;
    font-weight:400;
    line-height:24px;
	padding-top:14px;
	vertical-align:top;
}

#Highlighted-form .form-control:focus {
    outline:none;
    box-shadow:0 4px 0 rgba(0,0,0,0.05);
}

#Highlighted-form .error-message {
    padding:5px 0;
    position:absolute;
    top:-35px;
    right:0;
    font-size:15px;
    line-height:24px;
    font-weight:400;
    color:#ff3345;
    z-index:10;
}

#Highlighted-form.no-placeholder .error-message {
    top:0;
}