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.

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

Creative Web Order Form

*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:

• Smashing Magazine - The Mystery of CSS Sprites Techniques Tools and Tutorials
• A List Apart - Sprites
• CSS-Tricks - CSS Sprites

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

CSS Tools to Generate Round Corners

• Spiffycorners
• Nifty Corners Cube

Collection of CSS Round Corners Tutorials

• Build Internet - Using Rounded Corners CSS 3
• Smashing Share - Best Collection of CSS Rounded 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.

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.

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.

.bg-step1-orange {background:url(../img/img-orange.jpg) no-repeat; height:100px; background-position:0 0px;}

.bg-step2-orange {background:url(../img/img-orange.jpg) no-repeat; height:100px; background-position:0 -100px;}

.bg-step3-orange {background:url(../img/img-orange.jpg) no-repeat; height:100px; background-position:0 -200px;}

.bg-step4-orange {background:url(../img/img-orange.jpg) no-repeat; height:100px; background-position:0 -300px;}

.bg-step1-o-orange {background:url(../img/img-orange.jpg) no-repeat; height:100px; background-position:0 -400px;}

.bg-step2-o-orange {background:url(../img/img-orange.jpg) no-repeat; height:100px; background-position:0 -500px;}

.bg-step3-o-orange {background:url(../img/img-orange.jpg) no-repeat; height:100px; background-position:0 -600px;}

.bg-step4-o-orange {background:url(../img/img-orange.jpg) no-repeat; height:100px; background-position:0 -700px;}

Now style the typography for the menu with CSS.

.typo-step {color:#382201; font:bold 30px Rockwell;}
/* This is for the selected "STEP".*/

.typo-step-o {color:#fff; font:bold 30px Rockwell;}
/* This is for the white "STEP".*/

.typo-right {padding:60px 0px 0px 30px;}

.typo-w {color:#fff;}
/* This is for the white text. */

You can make multiple colours by using the same technique.

The HTML markup is as shown below.

<div class="box-170 bg-step1-orange" >
    <p class="typo-right"><span class="typo-step">STEP</span><br />Your info</p>
</div>

<div class="box-170 ml-3 bg-step2-o-orange" >
    <p class=" typo-right"><span class="typo-step-o">STEP</span><br /><span class="typo-w">Payment</span></p>
</div>

<div class="box-170 ml-3 bg-step3-o-orange" >
    <p class="typo-right"><span class="typo-step-o">STEP</span><br /><span class="typo-w">Submit order</span></p>
</div>

<div class="box-170 ml-3 bg-step4-o-orange" >
    <p class="typo-right"><span class="typo-step-o">STEP</span><br /><span class="typo-w">Confirmation</span></p>
</div>

Pure CSS to Style The Web Form

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

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

And here is the HTML markup.

<form id="" name="" method="" action="orange-form-2.html" class="order">
<fieldset>
    <ul class="order">
    <li>
        <label for="name">Title:<span class="typo-1">*</span></label>
        <select  class="drop1" id="" name="" >
            <option value="">Mr.</option>
            <option value="">Mrs.</option>
            <option value="">Ms.</option>
            <option value="">Dr.</option>
        </select>
    </li>

    <li>
        <label for="firstName">First name (middle)<span class="typo-1">*</span></label>
            <input  class="text" type="text" id="" name="" value="" size="30" maxlength="20">
    </li>

    <li><label for="lastName">Last name<span class="typo-1">*</span></label>
            <input  class="text" type="text" id="" name="" value="" size="30" maxlength="20">
    </li>

    <li><label for="email">E-mail address<span class="typo-1">*</span></label>
            <input  class="text" type="text" id="email" name="" value="" size="30" maxlength="50">
    </li>

    <li><label for="">Phone<span class="typo-1">*</span></label>
            <input  class="text" type="text" id="tel" name="" value="" size="16" maxlength="10">
    </li>
</ul>

<div class="clear"></div>

<ul class="order">
    <li><label for="country">Country<span class="typo-1">*</span></label>
         <select class="drop" id="country" name="country"  ></select>
    </li>

    <li><label id="lblStreet" for="street">Street<span class="typo-1">*</span></label>
         <input class="text" type="text" id="street" name="street" value="" size="30" maxlength="100" >
    </li>

    <li><label id="lblCity" for="city">City<span class="typo-1">*</span></label>
         <input class="text" type="text" id="city" name="city" value="" size="30" maxlength="50" >
    </li>

    <li><label id="lblState" for="state">State<span class="typo-1">*</span></label>
         <select  class="drop1" id="state" name="state" ></select>
    </li>

    <li><label id="lblZip" for="zip">Zip:<span class="typo-1">*</span></label><br />
         <input class="text1" type="text" id="zip" name="zip" value="" size="25" maxlength="25">
    </li>
</ul>

<div class="clear"></div>

    <input class="bt-order-orange" type="submit" value="Next step" onclick="" />

<div class="clear"></div>

</fieldset>
</form>

Don't forget the Confirmation Page

Below is the CSS style.

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

You can use the same class as above.

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

And here is the HTML Markup.

<div class="box-200 pl-9 pb-6">
    <ul class="order">
        <li>Title</li>
        <li>First Name &amp; MI</li>
        <li>Last Name</li>
        <li>Email Address</li>
        <li>Phone (Home)</li>
        <li>Phone (Daytime)</li>
        <li>Home Address</li>
    </ul>

    <div class="clear"></div>
</div>

<div class="box-300 pl-9 pb-6">
    <ul class="order">
        <li>Ms.</li>
        <li>XXXX</li>
        <li>XXXX</li>
        <li>xxx@xxx.com</li>
        <li>111-111-111</li>
        <li>111-111-111</li>
        <li>100 Avenue New York, NY 10001</li>
    </ul>

    <div class="clear"></div>
</div>

*CSS Sprite illustrator file included

Create your Web Order Form Now!

By using this method shown above, you can also apply it to other kinds of forms with long list of fields by breaking them up into a couple of steps. This makes it user friendly. Feel free to take your creativity to the next level by using this tutorial.

Note: In this tutorial, CSS shorthand is not in use.