How To Create A Basic Contact Form

Design a Good Looking Contact Form

One of the problem areas of designing a website is how to produce a good looking and accessible contact form.

The key concept behind providing an accessible form is to have descriptive labeling on each of the forms sections and input elements.

In particular, this means the proper usage of two key elements: 'label' and 'legend' which form part of an overall 'fieldset'.

A 'fieldset' groups a series of related form elements. For example, Street Address, Town, County and Post Code could all be grouped under Postal Address. You could then create a 'fieldset' of these elements and use a 'legend' to describe the grouping. These concepts will be made clearer when you look at the form shown below.

<form action="form.php">
<fieldset>
<legend>Your Personal Details</legend>
<ol>
<li>
<label for="name">Name</label>
<input id="name" name="name" class="text" type="text" />
</li>
<li>
<label for="email">Email address</label>
<input id="email" name="email" class="text" type="text" />
</li>
<li>
<label for="phone">Telephone</label>
<input id="phone" name="phone" class="text" type="text" />
</li>
</ol>
</fieldset>

<fieldset>
<legend>Delivery Address</legend>
<ol>
<li>
<label for="address1">Address 1</label>
<input id="address1" name="address1" class="text" type="text" />
</li>
<li>
<label for="address2">Address 2</label>
<input id="address2" name="address2" class="text" type="text" />
</li>
<li>
<label for="town">Town</label>
<input id="town" name="town" class="text" type="text" />
</li>
<li>
<label for="county">County</label>
<input id="county" name="county" class="text" type="text" />
</li>
<li>
<label for="postcode">Postcode</label>
<input id="postcode" name="postcode" class="text" type="text" />
</li>
<li>
<label for="country">Country</label>
<input id="country" name="country" class="text" type="text" />
</li>
</ol>
</fieldset>
</form>
<ul><li class="button"><input name="submit" type="submit" value="Download Now" /></li>
</ul>

As you will see, the form elements are placed in an ordered list. We do this as it enables the basic XTHML page to be styled in a number of different ways.

From the point of view of accessibility, laying out the form in this way gives any visitor to your site, who has to use a screen reader, the best understanding about the page they are viewing. When their screen reader is focused on a form element it will also read out the legend text i.e.Your Personal Details - Name and Your Personal Details - Email address.

The CSS used to style the contact form

To give the form a better appearance we used the following CSS layout. Note the use of floats and specific widths to line up the fieldset and its labels. And we like to use ems page styling where appropriate.

fieldset {
float:left;
clear:left;
width:335px;
margin: 0 0 1.5em 0;
padding: 0;
border: 1px solid #006699;

}

legend {
margin-left: 1em;
padding:0;
color: #006699;
font-weight: bold;
font-size:1.5em;

}

fieldset ol {
padding: 1em 1em 0 1em;
list-style: none;

}

fieldset li {
float:left;
clear:left;
width:100%;
padding-bottom: 0.8em;

}

label {
float:left;
width: 10em;
margin-right: 1em;
text-align:right;

}

.button {
clear: both;
padding: 0.25em;
padding-left: 9em;
list-style: none;

}

You can amend this CSS as you please but be careful with the floats. To print a copy of this CSS to view or work on click here.

Also we used a conditional statement to present a different stylesheet to Internet Explorer which tends to mess up the layout of forms like this. This was placed in the Head section of the page layout.

The CSS for this amended stylesheet can be seen here.

A further conditional statement was added to stop the infamous box problem from popping up. This also goes into the Head section of the page.

After applying all of this markup and adding some general page layout styles, we now have a workable form style that's accessible and easy to use. To see an example of this completed form click here.