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=”http://www.onextrapixel.com/examples/css-order-web-form/blue-form-1.php” download=”http://www.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=”http://www.onextrapixel.com/examples/css-order-web-form/blue-form-1.php” download=”http://www.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.

Namie is a New York based web designer who is also an artist. She started her career in web design industry since 2005 and have been trying to pursue the best practices in web design. She spends her spare time trying to catch up with new trends and new technology.

Comments

  1. / Reply

    Great forms

    thanks

    • Kyle,
    • December 5, 2009
    / Reply

    Instead of using an unordered list for forms, it makes more semantic sense to use a definition list.

    eg:

    That implies an association between the label and the input beyond the ‘for’ attribute. Also, it gives you more control over the styles.

    Example of keeping dt and dd on one line:

    dt, dd { float: left }
    dt { clear: left }

    That way dt and dd will be on the same line, but the dt will not jump up to the end of a line if there is room.

    Read more (pros and cons of dl vs ul):
    http://stackoverflow.com/questions/519234/why-use-definition-lists-dl-dd-dt-tags-for-html-forms-instead-of-tables

      • Namie,
      • December 5, 2009
      / Reply

      Oh, I actually never tried that way. It seems it’s a proper way.
      Thanks and I will try it.

    • Kyle,
    • December 5, 2009
    / Reply

    It stripped out my html. Let’s try this again. My example of a definition list:

    <dl>
    <dt><label><dt>
    <dd><input></dd>
    </dl>

  2. / Reply

    This is a nice web form layout, but with a few simple changes you could really improve your conversion rates. For example: place the label directly above the input and/or give the submit button a more vibrant color compared to the backdrop.

  3. / Reply

    http://wufoo.com/ has the best and most user-friendly forms design so far.

    • simply,
    • December 6, 2009
    / Reply

    This is a good way to do forms. I do it in a very similar way. One nice thing too — it is very easy to have your labels flush with the input fields with a simple text-align: left, on the label selector.

    • simply,
    • December 6, 2009
    / Reply

    Sorry, I meant text-align: right

      • Namie,
      • December 6, 2009
      / Reply

      That’s good, too.

  4. / Reply

    awesome tuts..cool enough for me to build this cool forms..thanks a lot

  5. / Reply

    Hi Namie, nice tutorial!

    By the way, the following CSS-part you could make shorter:

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

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

    .bg-step2-orange {background-position:0 -100px;}
    .bg-step3-orange {background-position:0 -200px;}

    • 02134,
    • December 24, 2009
    / Reply

    I was wondering, I’m not very advanced with CSS so to make something like this is out of the question for me, would you allow someone to use one of your samples if they give credit and link back?

    I appreciate your response whether you allow it or not. Thanks.

  6. / Reply

    if I have a page with radio buttons and form text, that uses java and no style, how can i change them all without js only in css? it is possible? thanks!

  7. / Reply

    This is an incredible post. Its amazing to see what CSS3 can do , at the same time its sad a lot of customers still want IE support which sucks at CSS3 big time.

    I am taking the liberty of adding this article to my CSS aggregator site. Hope you dont mind. :)

    • Pick,
    • August 7, 2010
    / Reply

    This one is a very helpful post. Nice work!

    • Flazw.,
    • August 7, 2010
    / Reply

    A good one.

  8. / Reply

    very nice tutorial

    • Marco,
    • February 13, 2011
    / Reply

    Fantastic post!!!!

  9. / Reply

    This is an incredible post. Its amazing to see what CSS3 can do , at the same time its sad a lot of customers still want IE support which sucks at CSS3 big time.

    I am taking the liberty of adding this article to my CSS aggregator site. Hope you dont mind. :)

    • Joeyj01,
    • August 10, 2011
    / Reply

    Nice tut but how about a form builder that is quite useful easy and quick. No codes check it out! http://bit.ly/lJrEzs

    • mike,
    • October 12, 2011
    / Reply

    great forms! thank you.
    one question – may be a dumb one…
    if i also want the info to be emailed to somebody at the same time, is it possible to have 2 form actions on one page? or do i need another approach?
    thank you Namie!

Leave a Reply

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

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.