Alt-Web Design & Publishing
CSS Styled Contact Form

CSS Code

/**BEGIN FORM STYLES**/

#form1 {
font-size: 14px;
width: 500px;
margin: 0 45px; /**adjust margins as needed**/
background: #FFF;
border: 2px groove purple;
padding: 7px 14px 7px 14px;
}

#form1 fieldset {
margin-bottom:5px;
border-right:none;
border-bottom:none;
border-left:none;
}

#form1 legend {
padding: 8px;
border: 1px solid silver;
background: purple;
font-weight: bold;
color: #FFF;
line-height: 1.5;
margin-left: -45px;
/**for IE6 only**/
*margin-left:0;
}

/**wrap form lables and fields inside ordered lists for better web accessibility**/

#form1 ol {
list-style:none;
margin:0;
padding:0}

#form1 li {
padding:5px;
margin: 0;
clear: left;
}

#form1 label{
display:inline-block;
float:left;
line-height: 23px; /**lines up labels with fields**/
width:167px;
font-size: 12px;
color: #666;
text-align:right;
margin-right: 10px; /*space between labels, fields*/
}

#form1 input[type=text], #form1 textarea {
width: 190px; /**same width on all text fields**/
padding: 5px;
color: #666;
border: 1px dotted purple;
font-family:Arial, Helvetica, sans-serif;
font-size: 12px;
}

/**field background on focus**/

#form1 input:focus,
#form1 input:active,
#form1 textarea:focus,
#form1 textarea:active
{background-color: #F2DDF7; border: 1px solid;}

/**submit button**/

#submit {
margin-left: 45px;
background: purple;
font-size: 14px;
padding: 4px;
color:#FFF;
font-weight: bold;
border: 2px outset #FFF;
}

#submit:hover { border: 2px inset #FFF;}

#submit:focus, #submit:active {color: purple;}

/*optional rounded borders*/

.round {
-moz-border-radius: 12px;
-webkit-border-radius:12px;
border-radius: 12px;
}

/*optional shadows*/

.shadows {
-moz-box-shadow: 5px 5px 15px #999;
-webkit-box-shadow: 5px 5px 15px #999;
-o-box-shadow: 5px 5px 15px #999;
-ms-box-shadow: 5px 5px 15px #999;
box-shadow: 5px 5px 15px #999;
}

/**END FORM STYLES**/

XHTML Code

<!--BEGIN HTML FORM, action="path to form-processing script on your server" -->

<form id="form1" class="round shadows" action="form-to-email.php" method="post" enctype="multipart/form-data" name="form1">

<h3>Basic Contact Form</h3>

<fieldset>
<legend class="shadows">Required Fields:</legend>

<ol>
<li>
<label for="first_name">First Name:</label>
<input name="first_name" class="shadows" id="first_name" type="text" />
</li>

<li>
<label for="last_name">Last Name:</label>
<input name="last_name" class="shadows" id="last_name" type="text" />
</li>

<li>
<label for="email">E-mail:</label>
<input name="email" class="shadows" id="email" type="text" />
</li>

</ol>

</fieldset>

<fieldset>
<legend class="shadows">Optional Fields:</legend>

<ol>
<li>
<label for="phone">Phone number:</label>
<input name="phone" class="shadows" id="phone" type="text" />
</li>

<li>
<label for="subject">Subject:</label>
<input name="subject" class="shadows" id="subject" type="text" />
</li>

<li>
<label for="message">Message:</label>
<textarea id="message" class="shadows" name="message"></textarea>
</li>

<li>
<label for="submit">&nbsp;</label>
<input type="submit" class="round shadows" name="submit" id="submit" value="Submit" />
</li>

</ol>

</fieldset>

</form><!--END OF FORM -->