CSS Form Tutorial: How to Improve Web Order Form Design

A perfect desktop image for CSS developers

Image via Wikipedia

User friendly interface and simplicity are key points when designing effective web order forms. Unlike single page forms (a sign up or contact form), an order form tends to have a couple of pages or steps to fill (including payment methods). It is not a good idea for all these to be shown in a single page. Users might be frustrated if the form seems never ending.

A good way of keeping the field list shorter and neater, but still be able to collect all the data required is by breaking them up into steps. However, it’s a good idea to let the user know in advance how many steps they have to go through in order to complete the entire order process.

Improve Order Form

Now here is a tutorial that will help you make simple yet modern looking web order forms.

Creative Web Order Form

4 Samples

Demo Download

*CSS Sprite illustrator file included

How to Make These Impressive Web Order Forms

All the graphics you need is just one CSS Sprite image, which will be used as the background for the step menu.

You can learn more about CSS Sprites from:

The rounded corners use only pure CSS without any images. You can find out more below.

CSS Tools to Generate Round Corners

Collection of CSS Round Corners Tutorials

The above 4 samples use only one CSS sprite image for each colour and the CSS rounded corner. Combination of the two will give you not only a good user friendly order form, but also a modern look with a slick typographic design.

CSS Round Corners

Using CSS Sprites for the Menu

Some people might find it easy to create separate images for the menu. However, it’s better to combine it into one image so as to reduce HTTP requests for the menu.

Plain Text and Image

Before you combine the menu background image, you will need to know the width and the height of the single menu background. In this case, the size of each image is W170px x H100px. And you need 8 background images (4 active, 4 inactive) for the four steps, so the total height will be 800px. The width remains at 170px.

Once you have your single image ready, you can make use of the background-position property in CSS to show the visible potion of the single image just like below.

01 .bg-step1-orange {background:url(../img/img-orange.jpg) no-repeat; height:100px; background-position:0 0px;}
03 .bg-step2-orange {background:url(../img/img-orange.jpg) no-repeat; height:100px; background-position:0 -100px;}
05 .bg-step3-orange {background:url(../img/img-orange.jpg) no-repeat; height:100px; background-position:0 -200px;}
07 .bg-step4-orange {background:url(../img/img-orange.jpg) no-repeat; height:100px; background-position:0 -300px;}
09 .bg-step1-o-orange {background:url(../img/img-orange.jpg) no-repeat; height:100px; background-position:0 -400px;}
11 .bg-step2-o-orange {background:url(../img/img-orange.jpg) no-repeat; height:100px; background-position:0 -500px;}
13 .bg-step3-o-orange {background:url(../img/img-orange.jpg) no-repeat; height:100px; background-position:0 -600px;}
15 .bg-step4-o-orange {background:url(../img/img-orange.jpg) no-repeat; height:100px; background-position:0 -700px;}

Background Position

Now style the typography for the menu with CSS.

01 .typo-step {color:#382201; font:bold 30px Rockwell;}
02 /* This is for the selected "STEP".*/
04 .typo-step-o {color:#fff; font:bold 30px Rockwell;}
05 /* This is for the white "STEP".*/
07 .typo-right {padding:60px 0px 0px 30px;}
09 .typo-w {color:#fff;}
10 /* This is for the white text. */

You can make multiple colours by using the same technique.

The HTML markup is as shown below.

01 <div class="box-170 bg-step1-orange" >
02 <p class="typo-right"><span class="typo-step">STEP</span><br />Your info</p>
03 </div>
05 <div class="box-170 ml-3 bg-step2-o-orange" >
06 <p class=" typo-right"><span class="typo-step-o">STEP</span><br /><span class="typo-w">Payment</span></p>
07 </div>
09 <div class="box-170 ml-3 bg-step3-o-orange" >
10 <p class="typo-right"><span class="typo-step-o">STEP</span><br /><span class="typo-w">Submit order</span></p>
11 </div>
13 <div class="box-170 ml-3 bg-step4-o-orange" >
14 <p class="typo-right"><span class="typo-step-o">STEP</span><br /><span class="typo-w">Confirmation</span></p>
15 </div>

Pure CSS to Style The Web Form

Pure CSS Form

Shown below is the CSS used to style the web form.

1 form.order {padding:40px;}
2 ul.order li {line-height:2.4em; border-bottom:1px dashed #fff; clear:both; padding:0px 20px;}
3 form.order label {float:left; width:200px;}
4 form.order input.text {width:280px; background:#fff; border:1px solid #eee;}
5 form.order input.text1 {width:180px; background:#fff; border:1px solid #eee;}
6 form.order select.drop {width:280px; background:#fff; border:1px solid #eee;}
7 form.order select.drop1 {width:80px; background:#fff; border:1px solid #eee;}

And here is the HTML markup.

01 <form id="" name="" method="" action="orange-form-2.html" class="order">
02 <fieldset>
03 <ul class="order">
04 <li>
05 <label for="name">Title:<span class="typo-1">*</span></label>
06 <select class="drop1" id="" name="" >
07 <option value="">Mr.</option>
08 <option value="">Mrs.</option>
09 <option value="">Ms.</option>
10 <option value="">Dr.</option>
11 </select>
12 </li>
14 <li>
15 <label for="firstName">First name (middle)<span class="typo-1">*</span></label>
16 <input class="text" type="text" id="" name="" value="" size="30" maxlength="20">
17 </li>
19 <li><label for="lastName">Last name<span class="typo-1">*</span></label>
20 <input class="text" type="text" id="" name="" value="" size="30" maxlength="20">
21 </li>
23 <li><label for="email">E-mail address<span class="typo-1">*</span></label>
24 <input class="text" type="text" id="email" name="" value="" size="30" maxlength="50">
25 </li>
27 <li><label for="">Phone<span class="typo-1">*</span></label>
28 <input class="text" type="text" id="tel" name="" value="" size="16" maxlength="10">
29 </li>
30 </ul>
32 <div class="clear"></div>
34 <ul class="order">
35 <li><label for="country">Country<span class="typo-1">*</span></label>
36 <select class="drop" id="country" name="country" ></select>
37 </li>
39 <li><label id="lblStreet" for="street">Street<span class="typo-1">*</span></label>
40 <input class="text" type="text" id="street" name="street" value="" size="30" maxlength="100" >
41 </li>
43 <li><label id="lblCity" for="city">City<span class="typo-1">*</span></label>
44 <input class="text" type="text" id="city" name="city" value="" size="30" maxlength="50" >
45 </li>
47 <li><label id="lblState" for="state">State<span class="typo-1">*</span></label>
48 <select class="drop1" id="state" name="state" ></select>
49 </li>
51 <li><label id="lblZip" for="zip">Zip:<span class="typo-1">*</span></label><br />
52 <input class="text1" type="text" id="zip" name="zip" value="" size="25" maxlength="25">
53 </li>
54 </ul>
56 <div class="clear"></div>
58 <input class="bt-order-orange" type="submit" value="Next step" onclick="" />
60 <div class="clear"></div>
62 </fieldset>
63 </form>

Don’t forget the Confirmation Page

Confirm Form

Below is the CSS style.

1 .box-200 {width:200px; display:inline; float:left;}
2 .box-300 {width:300px; display:inline; float:left;}

You can use the same class as above.

1 ul.order li {line-height:2.4em; border-bottom:1px dashed #fff; clear:both; padding:0px 20px;}

And here is the HTML Markup.

01 <div class="box-200 pl-9 pb-6">
02 <ul class="order">
03 <li>Title</li>
04 <li>First Name &amp; MI</li>
05 <li>Last Name</li>
06 <li>Email Address</li>
07 <li>Phone (Home)</li>
08 <li>Phone (Daytime)</li>
09 <li>Home Address</li>
10 </ul>
12 <div class="clear"></div>
13 </div>
15 <div class="box-300 pl-9 pb-6">
16 <ul class="order">
17 <li>Ms.</li>
18 <li>XXXX</li>
19 <li>XXXX</li>
20 <li>xxx@xxx.com</li>
21 <li>111-111-111</li>
22 <li>111-111-111</li>
23 <li>100 Avenue New York, NY 10001</li>
24 </ul>
26 <div class="clear"></div>
27 </div>

Demo Download

*CSS Sprite illustrator file included


About Raashid A.

Web Designer & Front-end Developer with Social Media Marketing & SEO

2 responses to “CSS Form Tutorial: How to Improve Web Order Form Design

  1. Useful stuff, but the theme do not display correctly on my Powerbook…maybe you need to examine that out. Thanks, anyway.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s

%d bloggers like this: