Dec
4
10

CSS Form Tutorial: How to Improve Web Order Form Design

Author admin    Category Website Designing     Tags Creative Form, Creative Web Order Form, CSS, CSS And XHTML, CSS Form Tutorial, Inspiring Blog Comment Form Designs, Web Order Form Design

Creative Web Order Form

4 Samples

*CSS Sprite illustrator file included


How to Make These Impressive Web Order Forms

All the graphics that you need is just one CSS Sprite image, which will be used for 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 color 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 and 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, 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;}
02
03 .bg-step2-orange {background:url(../img/img-orange.jpg) no-repeat; height:100px; background-position:0 -100px;}
04
05 .bg-step3-orange {background:url(../img/img-orange.jpg) no-repeat; height:100px; background-position:0 -200px;}
06
07 .bg-step4-orange {background:url(../img/img-orange.jpg) no-repeat; height:100px; background-position:0 -300px;}
08
09 .bg-step1-o-orange {background:url(../img/img-orange.jpg) no-repeat; height:100px; background-position:0 -400px;}
10
11 .bg-step2-o-orange {background:url(../img/img-orange.jpg) no-repeat; height:100px; background-position:0 -500px;}
12
13 .bg-step3-o-orange {background:url(../img/img-orange.jpg) no-repeat; height:100px; background-position:0 -600px;}
14
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".*/
03
04 .typo-step-o {color:#fff; font:bold 30px Rockwell;}
05 /* This is for the white "STEP".*/
06
07 .typo-right {padding:60px 0px 0px 30px;}
08
09 .typo-w {color:#fff;}
10 /* This is for the white text. */

You can make multiple colors by using the same technique.

HTML markup is as follows.

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>
04
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>
08
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>
12
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

Below is the CSS 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>
13
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>
18
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>
22
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>
26
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>
31
32 <div class="clear"></div>
33
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>
38
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>
42
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>
46
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>
50
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>
55
56 <div class="clear"></div>
57
58 <input class="bt-order-orange" type="submit" value="Next step" onclick="" />
59
60 <div class="clear"></div>
61
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>
11
12 <div class="clear"></div>
13 </div>
14
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>
25
26 <div class="clear"></div>
27 </div>

*CSS Sprite illustrator file included

Create your Web Order Form Now!

By using this method above, you can also apply it to another form that has a 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.

10 Comments to “CSS Form Tutorial: How to Improve Web Order Form Design”

  • CSS Form Tutorial: How to Improve Web Order Form Design « Om Net … | Kerja Keras Adalah Energi Kita December 4, 2009 at 11:20 pm

    [...] this article: CSS Form Tutorial: How to Improve Web Order Form Design « Om Net … AKPC_IDS += "5959,";Popularity: unranked [?] Tags: corners-, corners-spiffycorners, css, [...]

  • Pharmacy Technician December 6, 2009 at 10:07 am

    nice post. thanks.

  • No Prescription Online Pharmacy January 14, 2010 at 11:16 pm

    Thanks, this is easily the best health related article I’ve read in a while. Do you guys offer a subscription serivce?

  • Emilio Pettus April 19, 2010 at 7:06 am

    Really Nice Blog Dude

  • Pharmacy Reviews May 4, 2010 at 3:13 pm

    I found this article from Facebook (my friend posted it). After reading it, I of course clicked Like and shared it. More power.

  • John Artic May 25, 2010 at 1:51 am

    Hello, I am a graphic arts graduate and I think your post is a great resource for both rookies and advanced designers. I’ve bookmarked you!

  • CatalinaAlexander27 May 31, 2010 at 4:50 am

    I propose not to hold off until you get enough amount of cash to buy different goods! You can take the personal loans or just secured loan and feel yourself comfortable

  • Beula Cambel August 18, 2011 at 7:08 pm

    Fantastic understand, I transferred that in your coworker who had been accomplishing some on-line research upon which. And that he in fact purchased myself lunch break since I stumbled upon that to get the pup look Hence let me rephrase that will: Many thanks for lunchtime!

  • the best June 1, 2012 at 2:31 am

    Great write-up, I’m regular visitor of one’s site, maintain up the excellent operate, and It is going to be a regular visitor for a long time.

  • click here January 24, 2013 at 2:18 am

    Heya i am for the first time here. I came across
    this board and I find It truly useful & it helped me out a
    lot. I hope to give something back and help others like you aided me.

Post comment


nine − = 3

Subscribe Me

Enter your email address:

Delivered by FeedBurner

GET CONNECTED

Categories

Recent Posts

Find us on Facebook

RSS Om Net Solution Facebook Wall

Twitter Tweet

  • The RSS feed for this twitter account is not loadable for the moment.

Follow @paras_1603 on twitter.

Tags