Forms are one of the most important components of a website specially Responsive form for capturing valuable data.

Modern user trends shows that more than 55% users access web from mobiles, so it’s imperative that your user forms must be responsive along with your website.

So today I will show you how to create a simple and elegant ready to use responsive form with html5 and css3.

This the form we will be creating today.

View Demo  Download Source

So let’s start:

The form structure

  

    

      
Clean and Responsive Contact Form
      
Created with pure CSS Only!
    
    

      

        

          First name
          
 
            
        
        

          Last name
          
 
            
        
      
      

        

          Email
          
 
            
        
        

          Phone
          
 
            
        
      
      

        

          Comments
          
 
            
        
      
      
  

Here you have

The form has simple html5 validation, it checks for required fields like Name and Email.

It also checks for valid email and phone number formats.

Keep Reading:

The form css

.form_wrapper {
	background:#fff;
	width:500px;
	max-width:100%;
	box-sizing:border-box;
	padding:15px;
	margin:10% auto 0;
	position:relative;
	z-index:1;
	-webkit-box-shadow:0 23px 4px -21px rgba(0, 0, 0, 0.9);
	-moz-box-shadow:0 23px 4px -21px rgba(0, 0, 0, 0.9);
	box-shadow:0 23px 4px -21px rgba(0, 0, 0, 0.9);
}
.form_container {
	padding:15px;
	border:1px dashed #ccc;
}
.form_wrapper h2 {
	font-size:1.5em;
	line-height:1.5em;
	margin:0;
}
.form_wrapper .title_container {
	text-align:center;
	margin:-15px -15px 15px;
	padding:15px 0;
	border-bottom:1px dashed #ccc;
}
.form_wrapper h3 {
	font-size:1.1em;
	font-weight:normal;
	line-height:1.5em;
	margin:0;
}
.form_wrapper .row {
	margin:10px -15px;
}
.form_wrapper .row > div {
	padding:0 15px;
	box-sizing:border-box;
}
.form_wrapper .col_half {
	width:50%;
	float:left;
}
.form_wrapper label {
	display:block;
	margin:0 0 5px;
}
.form_wrapper .input_field, .form_wrapper .textarea_field {
	position:relative;
}
.form_wrapper .input_field > span, .form_wrapper .textarea_field > span {
	position:absolute;
	left:0;
	top:0;
	color:#333;
	height:100%;
	border-right:1px solid #ccc;
	text-align:center;
	width:30px;
}
.form_wrapper .textarea_field > span {
	border-bottom:1px solid #ccc;
	max-height:35px;
}
.form_wrapper .input_field > span > i, .form_wrapper .textarea_field > span > i {
	padding-top:12px;
}
.form_wrapper input[type="text"], .form_wrapper input[type="email"], .form_wrapper input[type="tel"], textarea {
	width:100%;
	padding:10px 10px 10px 35px;
	border:1px solid #ccc;
	box-sizing:border-box;
	outline:none;
	-webkit-transition: all 0.30s ease-in-out;
	-moz-transition: all 0.30s ease-in-out;
	-ms-transition: all 0.30s ease-in-out;
	transition: all 0.30s ease-in-out;
}
.form_wrapper textarea {
	height:8em;
}
.form_wrapper input[type="text"]:focus, .form_wrapper input[type="email"]:focus, .form_wrapper input[type="tel"]:focus, textarea:focus {
	-webkit-box-shadow:0 0 2px 1px rgba(255, 169, 0, 0.5);
	-moz-box-shadow:0 0 2px 1px rgba(255, 169, 0, 0.5);
	box-shadow:0 0 2px 1px rgba(255, 169, 0, 0.5);
	border:1px solid #f5ba1a;
}
.form_wrapper input[type="submit"] {
	background:#f5ba1a;
	height:50px;
	line-height:50px;
	width:100%;
	border:none;
	outline:none;
	cursor:pointer;
	color:#fff;
	font-size:1.2em;
	-webkit-transition: all 0.30s ease-in-out;
	-moz-transition: all 0.30s ease-in-out;
	-ms-transition: all 0.30s ease-in-out;
	transition: all 0.30s ease-in-out;
}
.form_wrapper input[type="submit"]:hover, .form_wrapper input[type="submit"]:focus {
	background:#daa106;
}

The css here makes the entire form structure.

The css3 magic (blur image)

.bg_img {
	background:url(https://static.pexels.com/photos/168066/pexels-photo-168066.jpeg) no-repeat center;
	background-size:cover;
	background-attachment:fixed;
	-webkit-filter: blur(8px);
	-moz-filter: blur(8px);
	-o-filter: blur(8px);
	-ms-filter: blur(8px);
	filter: blur(8px);
	position:absolute;
	top:0;
	left:0;
	height:100%;
	width:100%;
	z-index:0;
}

Responsive Form media query

@media (max-width: 600px) {
.form_wrapper .col_half {
	width:100%;
	float:none;
}
.form_wrapper label {
	margin:10px 0;
}
}

Here we have added a simple media query to check when the screen size is smaller or equal to 600px to adjust the required elements.

Demo:

See the Pen Clean and Responsive Contact Form by Ananda Projapati (@anandaprojapati) on CodePen.0

Download Source

If you do like this responsive form do share it with your friends.

The post Responsive Form: Create a ready to use form in html5 appeared first on Design The Way.