Dec
4

CSS Form Tutorial: How to Improve 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.

28 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.

  • shahedC August 5, 2013 at 12:49 am

    I have a list of links that will be used as a Navigation Bar. I am putting a background image under the text of the list item/links and want the text centered. The background image is just a colored gradient.

  • Austin August 10, 2013 at 9:23 pm

    i use to have mozilla and was able to left click the background and scroll down to view background imae. but with chrome i can’t. can i get an addon to help me do sumthing to view the background image or sumthing?

  • LN13 August 27, 2013 at 2:33 am

    I am aware some themes do NOT have Description boxes (they just have posts) and I would like a theme that has that but also allows me to change the background image, like in the theme “Fold”.
    Anyone know a theme similar to this?

  • Gabriel Kenney August 31, 2013 at 1:52 pm

    When I got to edit channel I see ways to design your youtube profile.
    When I go to other people profile they have background images of their self.
    I want to have a background image of a singer.
    I saved the picture of the singer on my computer.
    It is on my pictures.

    On YouTube when you go to edit channel it says background image URL I think.
    I dont know what URL they want me to do.
    What do they mean?

  • Jesse September 2, 2013 at 8:05 am

    I added the following to my css file:

    margin: auto;

    This works great, except now when I change to a lower screen size, the main table which contains all the content covers up my background image that I have on the left side of the page. Is there a way to add a code that also adjusts the background image?

  • jaimin October 1, 2013 at 4:06 pm

    I have Windows XP and I’ve noticed that pictures that I’ve taken were automatically saved as selectable images for backgrounds on my PC. I want to delete these but the pictures are not in my Windows\Web folder as the preloaded system background images are.

    I’ve deleted the photos from the “My Pictures” folder but they still appear in my list of background images. Is there any way to delete them or the folder itself?

  • Xbox Gamer October 6, 2013 at 6:41 pm

    How to make a background image that suits every resolution? I tried with <img src… 100% height and width but it looks bad. How can I make it lets say 100% width with proportional height to the width, so that the ratio for example 4:3 of the image can be kept? I was also wondering how can I make the image unelectable and unmovable and upright-click-able?

  • Daniel October 9, 2013 at 4:06 am

    I am sending an invitation in an e-mail and would like to add a watermark or background image/photo and I don’t want to send as an attachment. I am using hotmail, can this be done? Thanks in advance for any help..
    If I use Yahoo mail to do this will it still be sent as an attachment for those who have their e-mail accounts set as text only?

  • whitesoxfan2347 October 12, 2013 at 4:36 am

    When I upload my image on Photobucket, they reduce it’s size. How can I type the codes to enlarge the background image to what I want it to be.

  • happyha31 October 19, 2013 at 7:06 pm

    I don’t want it to be just centered, I want it to be one whole background image from end to end, without repeating or being tiled. I did this once a long time ago, but haven’t ever been able to find a generator or code to do it since then.
    I have images that are large in size to use, perhaps 2500×3500 pixels on average.
    Thanks for any advice!!

  • Spider Pc November 10, 2013 at 12:53 pm

    I’m just wondering what will happen if my background image gets reported on Youtube? I have the Apple logo for my background on YT. Do you think I’m safe. Is the reporting option for people who have controversial pictures or pictures that have to do copyright? Am I safe?

  • Mc L November 12, 2013 at 12:29 pm

    I used to have a selection of background images on my emails. They have disappeared when I upgraded Yahoo mail. How can I restore them?
    Many thanks and best wishes.

  • hank baseballs November 13, 2013 at 5:37 pm

    I’m new to blogging and I am using Tumblr. I want to make sure no one obtains my content or background images and pictures. If anyone has any suggestions I would really appreciate it. Thanks!

  • evangldbrg November 16, 2013 at 10:30 pm

    The background image of my website is labeled for commercial reuse. However, I need to copyright all other content (since I do not own the image), how do I go about doing so? Just to label my website as copyrighted… I am not concerned with the entire copyrighting process… All help is greatly appreciated.

  • mitesh November 19, 2013 at 12:32 am

    Windows 7 sometimes gets stuck on the desktop background image for no apparent reason, freezing the default slide show, or even displaying a blank, black background. And while parts of the theme (folder windows, sounds, screen savers, etc.) are still adjustable, the background image is not. Restarting the system and even a system restore won’t help, which is why it can be highly annoying.

  • Duke November 20, 2013 at 7:17 am

    does anyone know how to make a background image stretch all the way to the edges of the page in html/css?

  • Matthew S November 20, 2013 at 10:07 am

    I’m going to test for my third degree black belt soon, and need some suggestions for songs to use for my creative form. I am going to be using a straight sword. I’m looking for a song that has a good beat, and a short and slow beginning that builds intensity as it goes further into the song.
    Any help would be appreciated!
    Thanks!

  • Sriram R November 27, 2013 at 2:24 am

    Before, I could see the link to change the background image. But now, all I see is the option to change the background color. But it doesn’t give an option for adding or changing an image. Has Google sites changes it background options? How do I change my background image?

Post comment


× eight = 64

Subscribe Me

Enter your email address:

Delivered by FeedBurner

Categories

Recent Posts

Find us on Facebook

RSS Om Net Solution Facebook Wall