Website Development Tips: CSS Compliant Contact Forms

This week’s development tip is how to build a contact form on your website correctly and that is most importantly fully css compliant. The traditional “old fashioned” way to build contact forms is to place all the input fields into cells within a table and space them out this way using cell padding. If this is the way you’re still building forms, you may be wondering what’s wrong with this method.

Well, it’s lazy, plus it is not using the correct web standards and is, quite simply, inelegant. Good practice web development is to separate content from presentation. In this way,  just by altering a stylesheet the form can be displayed differently across a range of media, computer, iPhone, Android, etc.

First Mistakes

The first error that I see with many web developers is that they over complicate their mark-up.  For example, if you are going to put a border around your contact form, many developers would put a <div> around the <form> and place the border on that. But this is unnecessary, the form mark-up tag like any other tag can be presented differently according to what’s in the stylesheet. If you don’t need a div or a class, why have it? Adding extra code into your page can slow it down and make it harder to update in the future.

The Correct Mark-up

Below is the correct way to mark up a contact form.

<form>

<fieldset>
<legend>Contact Form</legend>
<p>Please complete all details of your enquiry &amp; we’ll get back to you shortly.</p>

<label>Name:<span>Add your name</span></label>
<input name=”name” maxlength=”150″>
<label>E-mail:<span>Add a valid address</span></label>
<input name=”email” maxlength=”150″>
<label>Message<span>Add your message</span></label>
<textarea name=”message”></textarea>
<div class=”spacer”></div>
<input name=”submit” value=”Send Message”>
</fieldset>

</form>

The mark-up meets the necessary standards and is fully dda compliant. The code uses a fieldset which is used to logically group together elements in a form and draws a box around the related elements and is able with the element legend to define a caption for the form.

Within this, the field text is displayed using standard label tags.

Presentation of the form

We have the content in, next we need to consider the presentation. This is where we start using a few tricks. Let’s start with the containing boundary:

form {
width: 470px;
}

fieldset {
border:solid 1px #DEDEDE;
font-family:verdana;
font-size:12px;
color: #6b6b6b;
padding:14px;}

legend {
font-weight:bold;
margin-bottom:5px;
font-size:14px;}

The legend gives us our contact form headline. Now looking into the labels, we will float these to the left using the following code:

fieldset label{
display:block;
font-weight:bold;
text-align:right;
line-height : 15px;
width:115px;
float:left;}

and the smaller sub text should be as follows:

fieldset label span {
display:block;
font-size:11px;
font-weight:normal;
text-align:right;
width:115px;}

fieldset input, fieldset textarea {
border:solid 1px #cccccc;
color:#666666;
background-color:#F2F2F2;
font-size:12px;
font-family:Arial, Helvetica, sans-serif;
line-height:160%;
padding : 3px;
width:298px;
float:left;
margin:2px 0 15px 10px;}

fieldset textarea {
height:130px;}

fieldset p {
font-size:10px;
margin: 0px 0px 20px 0px;
border-bottom:solid 1px #dedede;
padding-bottom:10px;}

fieldset input:focus, fieldset input:active,
fieldset textarea:focus, fieldset textarea:active {
background: #fff;
border: 1px solid #595959;}

fieldset input:hover, fieldset textarea:hover {
background-color:#fff;}

fieldset .submit {
width : 100px;
margin-left : 125px;}

fieldset .submit:hover {
color : #fff;
background-color : #EB038B;
cursor : pointer;}

fieldset .spacer{clear:both; height:1px;}

The final form

That’s it, wasn’t so hard was it? The finished form should look like the following:

I’ll be back next week with more development tips, so be sure to check back then.

Tweet