As forms become one of the most important parts of any website or web application. Forms give YOUR users the ability to interact with the website and more importantly gives you the opportunity to capture some very important information from your visitors. If you have an existing web form on your site or you are creating a new one and you have an existing color pallet font style etc that your site uses then why not style your web forms as well to match the appearance of your site.

Even today there are sites that use the stock standard formatting and appearance of web forms, but with a few little, easy changes they could become visually appealing and more professional. In this article I will show you how to add a more professional look to those web forms that you have. Below is the Working Contact Form made in Dreamweaver that I outlined in a previous article. With a few simple HTML markups and CSS code the result is a lot more appealing than the standard form.

Below is the code sample from the Contact Form Page. Note the additions of a couple of form elements, FIELDSET and LEGEND.

<form action="FormToEmail.php" method="post" name="ContactForm">
<fieldset>
<legend>My Contact Form</legend>
<label>Name:</label>
<br>
<input name="name" type="text" id="name">
<br>
<label>Email:</label><br>
<input name="email" type="text" id="email">
<label><br>
Comments:<br>
<textarea name="comments" cols="40" rows="10" id="comments"></textarea>
</label>
</label>
<br>
<input type="submit" name="Submit" value="Submit">
</fieldset>
</form>

The Fieldset element is used to group related blocks of information and is used here to group the form information. The Legend is used as a title for the form “My Contact Form”.

1. Now we will use some CSS to add some style. Open up your style sheet or if you haven’t created one then create one. Add the following code to it to style the FIELDSET element.

fieldset{
border:1px solid #778D1D;
margin:1em 0;
padding:1em;
}

Then add the following to style the LEGEND Element.

legend{
font-family: "Trebuchet MS";
}

2. The next thing we will do is add some color and style to the text boxes and text area.

input, textarea{
border:1px solid #778D1D;
background-color:#ECF4CA;
}

And that is all there is to it. As you can see with 2 minutes of work you can improve the look and feel of those standard web forms that you still see on websites today.

As an added example you could also take it a step further and create two Fieldsets and separate the form even further which is very handy when you have a big and complicated form with different sections. All I have done here is put the Comments Text Area and Label inside an additional Fieldset.

Below is the markup I used to add an additional Fieldset.

<form action="FormToEmail.php" method="post" name="ContactForm">
<fieldset>
<legend>My Contact Form</legend>
<label>Name:</label>
<br>
<input name="name" type="text" id="name">
<br>
<label>Email:</label><br>
<input name="email" type="text" id="email">
</fieldset>
<fieldset>
<legend>Comments</legend>
<label><br>
Message:<br>
<textarea name="comments" cols="40" rows="10" id="comments"></textarea>
</label>
</label>
<br>
<input type="submit" name="Submit" value="Submit">
</fieldset>
</form>

So as you can see it is well worth it to create a more professional looking web form for your website visitors.

If you would like some more Web Design Tips then make sure you REGISTER for my WEB TIPS NEWSLETTER

Social Media:

| del.icio.us | Digg it | Furl | reddit | StumbleUpon | Yahoo MyWeb

You can follow any responses to this entry through the RSS feed. You can leave a response, or trackback from your own site.