Free responsive form with css3 and html5 with demo

Today in Labs we are posting a free responsive contact form for web developers. its build on pure CSS with HTML5. You can view source code here with an working example. there is option for download it as zip file for free!. Hope you will enjoy this post.

Responsive Form CSS code

 
	form{
		width:70%;
		margin:4% 15%;
	}  
	input[type=text]{
		margin-bottom: 20px;
		margin-top: 10px;
		width:95%;
		padding: 15px;
		border-radius:5px;
		border:1px solid #ccc;
	}
	textarea{
		width:95%;
		padding: 15px;
		margin-top: 10px;
		border:1px solid #ccc;
		border-radius:5px; 
		margin-bottom: 20px;
		resize:none;
	  } 
	input[type=text]:focus,textarea:focus {
		border-color: #666;
	}
	input[type=submit]{
		margin-bottom: 20px;
		width:99%;
		padding: 15px;
		font-size:15px;
		cursor:pointer;
		background: -moz-linear-gradient(top, #fed970 0%, #febc4a 100%);
		background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fed970), color-stop(100%,#febc4a));
		background: -webkit-linear-gradient(top, #fed970 0%,#febc4a 100%);
		background: -o-linear-gradient(top, #fed970 0%,#febc4a 100%);
		background: linear-gradient(to bottom, #fed970 0%,#febc4a 100%);
		background-color: #FEC95B;
		border-top: 1px solid #EDB14A;
		border-bottom: 1px solid #CE922E;
		border-right: 1px solid #DCA03B;
		border-left: 1px solid #DCA03B;
		border-radius: 1px 3px 3px 1px;
		box-shadow: inset 0 1px #FEE395, 0 1px 2px rgba(0,0,0,0.21);
		color: #555;
 
	}
	#submit:hover{
		background:#fee395;
		text-shadow: -1px -1px 0 rgba(153,102,51,0.3);
	}

Responsive Form HTML code

 
		<!-- Form -->
		<form action="" method="post">  
			<label>Your Name </label>
			<input type="text" name="name" placeholder="Mike Tyson" width="100px;">
			<label>Email Id </label>
			<input type="text" name="email" placeholder="mail@example.com">		
			<label>  Contact Number </label>
			<input type="text" name="contact" placeholder="123456789">	
			<label>  Website URL </label>
			<input type="text" name="website" placeholder="www.example.com">
			<label>  Message </label>
			<textarea name="message" rows="10" cols="15" placeholder="Message"></textarea>
			<input type="submit" value="Send Message" id="submit">		
		</form>
		<!-- End of Form -->

Live Demo Download