Introduction:
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!
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!
|
<!DOCTYPE html
PUBLIC "-//W3C//DTD
XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Untitled
Page</title>
<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>
</head>
<body>
<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>
</body>
</html>
|
0 comments :
Post a Comment