Creating simple contact forms

Tables are designed to show tabular data. But they are also good for building contact forms, because of their easy positioning without having to write much CSS. In this article I will show you how to create simple contact form with less code and less CSS and no tables. Is that possible? You’ll find out.

Note from the author

I updated this article in order to give you the best method of creating simple contact forms. I made a few adjustments to the code and CSS as pointed in Miha’s comment.

The code

I tried to simplify the code for displaying contact form. I used only FIELDSET (which in this case acts like DIV or a container), LABEL (for displaying text) and INPUT and TEXTAREA (for entering text). So, this is the code.


<form method="post" action="#">
<fieldset>

<legend>Simple contact form</legend>

<label>Name<br /><input name="name" type="text" class="text" /><br /></label>
<label>Your e-mail<br /><input name="email" type="text" class="text" /><br /></label>
<label>Subject<br /><input name="subject" type="text" class="text" /><br /></label>
<label>Message<br /><textarea name="message" cols="50" rows="10" class="text" ></textarea><br /></label>

<input name="Submit" type="submit" value="Send message" class="button"/>

</fieldset>
</form>

Without CSS the page doesn’t look so nice. But when we write the CSS for this code it looks quite pretty. Take a look.

We used BREAKS (<BR />) because, as suggested by Miha, the page is not readable when CSS is turned off. This way if you turn off the CSS the page stays readable because every new element (LABEL, INPUT, TEXTAREA) automatically goes into a new row. Thanks for pointing that out.

Here is the CSS.


fieldset {
	padding:20px;
	border:none;
}
legend {
	font-size:2em;
	padding:0px;
	font-weight:bold;
}
label, input, textarea {
	display:block;
}
label {
	font-size:1.1em;
}
input, textarea {
	margin-top:5px;
}
.text {
	width:100%;
	border:1px solid #E5E5E5;
	padding:5px;
}

The explanation

In this case FIELDSET acts like a DIV or a container inside FORM tag. We removed the default border for FIELDSET, and gave it a 20px padding. The padding is here just to create the effect that elements are inside a form, if we wish to add a background-color to the contact form at later time.

Please note: Because of the box model rendering difference between Firefox and Internet Explorer you could have problems when adding a padding to the FIELDSET and calculating the right width. The correct method of calculating the overall box width is WIDTH(200px) + PADDING (20px) = 240px, while Internet Explorer calculates the overall width all together (200px).

In updated contact form we also used LEGEND instead of H2. I prefer using the LEGEND tag when dealing with many forms on one page, but this way the semantic looks better. This is the right way. Quick tip: if you wish that your LEGEND tag looks the same as H2, you could group them like this h2, legend { ... }.

LABEL acts like a mini-container because we added INPUT and TEXTAREA inside it. We said to the browser to display LABEL, INPUT and TEXTAREA as block so we could apply the margins. We added a margin-bottom:10px value to the LABEL so the labels (or mini-containers) get separated from each other. Because we used BREAKS, we didn’t have to use margin-bottom:10px, because the <BR /> does it for us.

To the INPUT and TEXTAREA tags we added a margin-top:5px value to make space between the text shown and text that has to be entered into input area.

We also created class TEXT and then applied it to INPUT and TEXTAREA so we can accomplish the exact look of the all input areas. This could be accomplished with input[type=text], but this will work only in Firefox.

Example

Simple contact form example


Comments

4 responses to “Creating simple contact forms”

  1. Nicely done. Perhaps not entirely semantic. I find it has more meaning to put the fieldset inside the form tag (as the fieldset is actually grouping fields). Also the use of a legend tag would add to the semantics.

    Also the form does not look readble is you remove styling as the whole form is in one line. You can quickly remedy this if you try to validate the XHTML as Strict instead of transitional.

  2. Thanks for pointing that out Miha. I corrected the code, removed the FORM tag (it’s now outside the FIELDSET), added the LEGEND tag, but as I said, I think that LEGEND could be used when dealing with multiple forms on one page. If we have only one form per page we could use the H2 tag as well to keep it simple. Nevertheless I like it better this way. The purpose of this blog is to share ideas and knowledge. Thank you.

  3. Ah, I apologize about the legend tag. It was late at night and I guess I don’t read everything as carefully as when I’m really awake :)

  4. Isn’t that a common problem for all of us? (I mean, being awake that late:)

Leave a Reply

Your email address will not be published. Required fields are marked *