Dynamic Drive CSS Library- Responsive 2 column form

CSS Library

Hosting Discounts

CSS Layouts

Web Graphics

Free Graphics

Online Tools:

CSS Library: Form CSS: Here

Responsive 2 column form

Author: Dynamic Drive

This is a clean, two column form that's also responsive, turning into a single column spanning the entire width of the page when the window's size is 480px or less. The two column design and large controls are meant to make the form more inviting to fill out, by breaking up the text input fields into two columns, thus appearing less overwhelming to complete. Beautiful forms equate to inviting forms!

Click here to see the form in a liquid layout, then try resizing the browser window to 480px or less. Notice the responsive layout of the form.

The CSS:

<style type="text/css">

#contactform{
width: 100%;
font-size: 16px; /* Primary font size of form. Contained elements' font size are all relative to this setting */
}


#contactform input, #contactform textarea{
width: 98%;
border-radius: 5px;
border: 1px solid gray;
font: normal 1.5em auto; /* 24px, or 16px x 1.5 */
padding: 0.4166666666666667em; /* 10px, or 24px x 0.4166666666666667 */
box-shadow: 0 0 10px gray inset;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}

#contactform textarea{
resize:vertical; /* allow vertical resize of textarea */
height: 200px;
}


#contactform input:focus, #contactform textarea:focus{
box-shadow: 0 0 10px green inset;
}


#contactform input[type="radio"], #contactform input[type="checkbox"]{
padding: 0;
width: auto;
height: auto;
border-radius: 0;
}

#contactform select{
width: 80%;
font-size: 1.5em;
border: 2px solid #eee;
}

#contactform .formcolumn{ /* column div inside form */
width: 49%;
float: left;
}

#contactform .formcolumn:first-of-type{
margin-right: 2%; /* 2% margin after first column */
}

#contactform .formcolumn label, #contactform .formcolumn fieldset{
font: bold 0.8em Verdana; /* font size is 12.8px, or 16 x 0.8 */
text-transform: uppercase;
display: block;
margin-top: 2em;
margin-bottom: 3px;
}

#contactform fieldset{
width: 98%;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}

#contactform .formcolumn label:first-child, #contactform .formcolumn fieldset:first-child{
margin-top: 0; /* first label or fieldset within each column should not no top margin */
}

#contactform fieldset ul{
list-type: none;
margin: 0;
padding: 0;
}

#contactform fieldset ul li{
display: inline-block;
margin-bottom: 5px;
margin-right: 1em;
}

#contactform div.buttons{
clear: both;
text-align: center;
}

#contactform input.button{
margin-top: 1.5EM;
width: 50%;
box-shadow: 0 0 10px gray;
text-transform: uppercase;
cursor: pointer;
min-width: 100px;
max-width: 600px;
color: white;
font-weight: bold;
letter-spacing: 7px;
text-shadow: 0 -2px 1px #8a8a8a;
background: rgb(169,3,41);
background: -moz-linear-gradient(top,  rgba(169,3,41,1) 0%, rgba(143,2,34,1) 44%, rgba(109,0,25,1) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(169,3,41,1)), color-stop(44%,rgba(143,2,34,1)), color-stop(100%,rgba(109,0,25,1)));
background: -webkit-linear-gradient(top,  rgba(169,3,41,1) 0%,rgba(143,2,34,1) 44%,rgba(109,0,25,1) 100%);
background: -o-linear-gradient(top,  rgba(169,3,41,1) 0%,rgba(143,2,34,1) 44%,rgba(109,0,25,1) 100%);
background: -ms-linear-gradient(top,  rgba(169,3,41,1) 0%,rgba(143,2,34,1) 44%,rgba(109,0,25,1) 100%);
background: linear-gradient(to bottom,  rgba(169,3,41,1) 0%,rgba(143,2,34,1) 44%,rgba(109,0,25,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a90329', endColorstr='#6d0019',GradientType=0 );
}

#contactform input.button:active{
text-shadow: 0 0 1px #8a8a8a;
background: rgb(109,0,25);
background: -moz-linear-gradient(top,  rgba(109,0,25,1) 0%, rgba(143,2,34,1) 56%, rgba(169,3,41,1) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(109,0,25,1)), color-stop(56%,rgba(143,2,34,1)), color-stop(100%,rgba(169,3,41,1)));
background: -webkit-linear-gradient(top,  rgba(109,0,25,1) 0%,rgba(143,2,34,1) 56%,rgba(169,3,41,1) 100%);
background: -o-linear-gradient(top,  rgba(109,0,25,1) 0%,rgba(143,2,34,1) 56%,rgba(169,3,41,1) 100%);
background: -ms-linear-gradient(top,  rgba(109,0,25,1) 0%,rgba(143,2,34,1) 56%,rgba(169,3,41,1) 100%);
background: linear-gradient(to bottom,  rgba(109,0,25,1) 0%,rgba(143,2,34,1) 56%,rgba(169,3,41,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#6d0019', endColorstr='#a90329',GradientType=0 );
}

@media screen and (max-width: 480px){ /* responsive form settings, when window width is 480px or less */

	#contactform{
	font-size: 14px; /* decrease form font size */
	}

	#contactform .formcolumn{
	width: 100%;
	float: none;
	}
	
	#contactform .formcolumn:first-of-type{
	margin-right: 0; /* remove right margin from first form column */
	}

	#contactform .formcolumn:nth-of-type(2){
	padding-top: 2em; /* add padding to top of 2nd form column, so there is a gap between the 1st and 2nd column */
	}

	#contactform select{
	width: 98%;
	}

}

</style>

The HTML:

<form id="contactform">

<div class="formcolumn">

<label for="yourname">Your Name:</label>
<input type="text" id="yourname" />

<label for="youremail">Your Email:</label>
<input type="email" id="youremail" />

<fieldset>
<legend>Sex:</legend>
<ul>
<li>Male: <input type="radio" id="male" name="sex" /></li>
<li>Female: <input type="radio" id="female" name="sex" /></li>
</ul>
</fieldset>

</div>

<div class="formcolumn">

<fieldset>
<legend>Skills:</legend>
<ul>
<li>JavaScript: <input type="checkbox" id="javascript" /></li>
<li>CSS: <input type="checkbox" id="css" /></li>
<li>PHP: <input type="checkbox" id="php"/></li>
<li>Ruby: <input type="checkbox" id="ruby" /></li>
<li>Python: <input type="checkbox" id="python" /></li>
</ul>
</fieldset>

<label for="dept">Department:</label>
<select id="dept">
<option value="3">Developer</option>
<option value="2.1">HR department</option>
<option value="3">Sales</option>
<option value="4.1">Customer Service/ Support</option>
<option value="5.2">Accounting</option>
</select>

<label for="feedback">Your Experience:</label>
<textarea id="feedback"></textarea>

</div>

<div class="buttons">
<input class="button" type="submit" value="Submit!" />
</div>

</form>

Code Info

Rate this code:

Date Posted: 02/04/2015

Revision History: None

Usage Terms: Click here