CSS Form Tutorial: How to Improve Web Order Form Design

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

[tut demo=”https://onextrapixel.com/examples/css-order-web-form/blue-form-1.php” download=”https://onextrapixel.com/examples/css-order-web-form/css-order-web-form.zip”]
*CSS Sprite illustrator file included

Creative Web Order Form

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

4 Samples

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.

.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;}

Background Position

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

Pure CSS 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

Confirm Form

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>

[tut demo=”https://onextrapixel.com/examples/css-order-web-form/blue-form-1.php” download=”https://onextrapixel.com/examples/css-order-web-form/css-order-web-form.zip”]
*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.

Deals

Iconfinder Coupon Code and Review

Iconfinder offers over 1.5 million beautiful icons for creative professionals to use in websites, apps, and printed publications. Whatever your project, you’re sure to find an icon or icon…

WP Engine Coupon

Considered by many to be the best managed hosting for WordPress out there, WP Engine offers superior technology and customer support in order to keep your WordPress sites secure…

InMotion Hosting Coupon Code

InMotion Hosting has been a top rated CNET hosting company for over 14 years so you know you’ll be getting good service and won’t be risking your hosting company…

SiteGround Coupon: 60% OFF

SiteGround offers a number of hosting solutions and services for including shared hosting, cloud hosting, dedicated servers, reseller hosting, enterprise hosting, and WordPress and Joomla specific hosting.