Building a contact form with "CSS rows"

I've had a few requests to create a form whose elements are split up into rows of data, without resorting to the use of divs or tables – just CSS. This task might sound like it involves hacks or is riddled with bugs that break across browsers, but that isn't the case. The solution is simple and only really involves two CSS properties.

Creating a form

We'll use a contact form as our example and give it name, email, subject and message fields and corresponding labels, along with a submit button.

The no-frills form

XHTML Code:

<form method="post" id="contactFormInitial" action="">
	<fieldset>
    	<label for="name">Name:</label>
        <input type="text" name="name" id="name" />
        <label for="email">Email:</label>
        <input type="text" name="email" id="email" />
        <label for="subject">Subject:</label>
        <input type="text" name="subject" id="subject" />
        <label for="message">Message:</label>
        <textarea name="message" id="message"></textarea>
        <input type="submit" name="submit" value="Submit form" />
    </fieldset>
</form>

HTML Code:

<form method="post" id="contactFormInitial" action="">
	<fieldset>
    	<label for="name">Name:</label>
        <input type="text" name="name" id="name">
        <label for="email">Email:</label>
        <input type="text" name="email" id="email">
        <label for="subject">Subject:</label>
        <input type="text" name="subject" id="subject">
        <label for="message">Message:</label>
        <textarea name="message" id="message"></textarea>
        <input type="submit" name="submit" value="Submit form">
    </fieldset>
</form>

Result:

There's our form. It doesn't look very pretty, does it? Let's give it some styles. It's good to utilise the CSS selectors to their full potential when writing CSS so we shall be using the attribute selector to style our text fields and buttons. In an ideal world, we would be able to use the attribute selector by itself, but older browsers don't support it, so we have to back it up with classes.

Enter the CSS

CSS Code:

#contactFormStart {
	margin:0;
    padding:0;
}

fieldset {
	border:1px solid #ccc;
}

label {
	color:#33C;
	font-family:"Lucida Sans Unicode", "Lucida Grande", sans-serif;
	font-style:italic;
}

/* Use the attribute selector to style text fields. 
Back it up with a textField class for browsers that
don't support the attribute selector.*/
input[type=text], .textField {
	border:1px solid #999;	
}

/* Use the attribute selector to style text fields. 
Back it up with a textField class for browsers that 
don't support the attribute selector.*/
input[input=submit], .button {
	font-family:"Lucida Sans Unicode", "Lucida Grande", sans-serif;
	text-transform:uppercase;
	background:#336;
	color:#FCC;
	border:1px solid #FCC;		
}

XHTML Code:

<form method="post" id="contactFormStart" action="">
	<fieldset>
    	<label for="name">Name:</label>
        <input type="text" name="name" id="name" class="textField" />
        <label for="email">Email:</label>
        <input type="text" name="email" id="email" class="textField" />
        <label for="subject">Subject:</label>
        <input type="text" name="subject" id="subject" class="textField" />
        <label for="message">Message:</label>
        <textarea name="message" id="message"></textarea>
        <input type="submit" name="submit" value="Submit form" class="button" />
    </fieldset>
</form>

HTML Code:

<form method="post" id="contactFormStart" action="">
	<fieldset>
    	<label for="name">Name:</label>
        <input type="text" name="name" id="name" class="textField">
        <label for="email">Email:</label>
        <input type="text" name="email" id="email" class="textField">
        <label for="subject">Subject:</label>
        <input type="text" name="subject" id="subject" class="textField">
        <label for="message">Message:</label>
        <textarea name="message" id="message"></textarea>
        <input type="submit" name="submit" value="Submit form" class="button">
    </fieldset>
</form>

Result:

What you've been waiting for

So, we've got our form and we've applied some styles to it, now let's get onto the real fun and add the final CSS touches to achieve pure CSS rows. This is accomplished by using the CSS float and clear properties along with some margins and padding. Here's what we'll do:

• We will convert our labels, input fields, textarea and submit button to block elements, via display:block
• We will float the labels next to their corresponding form elements, using float:left.
• To achieve the line-break effect, we will clear the labels to the left using clear:left.
• We will give our labels and form fields a set width, to make our form look neater, and position the submit button at the bottom of the form, in line with the form fields.

The final code

#contactFormFloats {
	margin:0;
    padding:0;
}

fieldset {
	border:1px solid #ccc;
}

label, input[type=text], .textField {
	float:left;	
	display:block;	
}

label {
	color:#33C;
	font-family:"Lucida Sans Unicode", "Lucida Grande", sans-serif;
	font-style:italic;
    clear:left;	
	width:100px;
}

/* Use the attribute selector to style text fields. 
Back it up with a textField class  for browsers 
that don't support the attribute selector.*/
input[type=text], .textField {
	border:1px solid #999;	
    margin-bottom:10px;
	width:400px;
}

/* Use the attribute selector to style text fields. 
Back it up with a textField class  for browsers 
that don't support the attribute selector.*/
input[type=submit], .button  {
	font-family:"Lucida Sans Unicode", "Lucida Grande", sans-serif;
	text-transform:uppercase;
	background:#336;
	color:#FCC;
	border:1px solid #FCC;		
	margin-left:105px;
	padding:3px;
	clear:left;
	display:block;	
}

textarea {
	font:84% Verdana, Geneva, sans-serif;	
	margin-bottom:10px;	
	width:400px;
}

XHTML Code:

<form method="post" id="contactFormFloats" action="">
	<fieldset>
    	<label for="name">Name:</label>
        <input type="text" name="name" id="name" class="textField" />
        <label for="email">Email:</label>
        <input type="text" name="email" id="email" class="textField" />
        <label for="subject">Subject:</label>
        <input type="text" name="subject" id="subject" class="textField" />
        <label for="message">Message:</label>
        <textarea name="message" id="message"></textarea>
        <input type="submit" name="submit" value="Submit form" class="button" />
    </fieldset>
</form>

HTML Code:

<form method="post" id="contactFormFloats" action="">
	<fieldset>
    	<label for="name">Name:</label>
        <input type="text" name="name" id="name" class="textField">
        <label for="email">Email:</label>
        <input type="text" name="email" id="email" class="textField">
        <label for="subject">Subject:</label>
        <input type="text" name="subject" id="subject" class="textField">
        <label for="message">Message:</label>
        <textarea name="message" id="message"></textarea>
        <input type="submit" name="submit" value="Submit form" class="button">
    </fieldset>
</form>

Result:

And there you have it, one form with neat rows of data, accomplished with CSS and no extra tags. Just some things to note:

• To add space between the textarea and the submit button, I added a margin-bottom to the textarea, instead of a margin-top to the submit button. The reason for this was because the float on the textarea caused the top margin on the submit button to collapse.
• textareas, by default, are set to a different font family (usually Courier) and tend to have a bigger font size than the other form elements. If you want the font size to be the same as your other form elements, reducing it by a quarter will do the trick.