2Table of ConTenTs

Foreword 3

BasicelementsoFaForm: 4

Text 4

Inputboxes 5

Textfields 5

Radiobuttons 6

Drop-downmenus 6

Secondaryactions 7

weBFormdesignBasics 8

Layingoutaform. 8

DesigningaKillerForm. 12

theKeystoUserorientation 17

Bethefirsttocommunicate! 17

Dividetheformintobite-sized,manageablesections. 19

Beclear. 21

Releasetheuser. 26

ApplyingTheseTechniquestoYourForm 27

AdditionalResources 27

solongFornow! 29

3foreword

If youre reading this, its probably because you want to improve your web forms. Good for you! This guide is your first step toward creating more beautiful, functional, and user-oriented forms. Naturally, its a complement to CoffeeCup Web Form Builder (http://www.coffeecup.com/form-builder/), but the advice provided holds true for all forms on the web, even those not built with our software.

Please note that all the examples in this guide were created with Web Form Builder, and that there are a few places where Web Form Builder is mentioned. This is because the program makes certain tasks easier than if you were coding a form by hand in HTML.

Although the information in this guide is effective regardless of how you build your form, it is safe to say that you will get the most out of this guide and CoffeeCup Web Form Builder when you use them together.

Okay, thats all we have to say here. Read on to start learning more about web form design!

4basiC elemenTs of a form:

Before we start talking about how to style a form, its important to understand the basic elements that are used to make it. They are:

Text

Input boxes

Text fields

Checkboxes

Radio buttons

Drop-down menus

Primary actions

Secondary actions

Lets talk about each one and what theyre used for.

Text

Youre going to be titling your form, labeling input boxes, and giving brief instructions on other ele-ments within your form; as a result, you should give careful consideration to the font and font sizes being used. Unless your form is highly stylized, you should probably stick to a standard web-safe font for two reasons: Your information will be clearly read by the viewer, and you can be assured that the proper font is displaying on their computer.

web-safe fonts

If youre scratching your head and asking yourself what in the heck a web-safe font is, heres

your answer: Theyre fonts that display the exact same way regardless of what browser, com-

puter, or operating system your users are using. The most useful web-safe fonts are:

Arial Tahoma

Courier Times New Roman

Georgia Trebuchet

Impact Verdana

Lucida MS Sans Serif

Palatino

The size of the fonts you use also depends on your design. Sure, you may want to use a larger font for the title of the form, but you dont have to. It really depends on whats appropriate for your page. Heres one suggestion, though: You may want to consider making instructions, errors, and minor labels for elements small so that the user doesnt get distracted while filling out the form.

5What about the weight bold or regular of your fonts? Well, typically most items on the form are normally weighted, but important or required items could be labelled with a bold font. This helps to ensure that the user understands that the text field or checkbox is labelled by the bold text next to it.

input boxes

The main purpose of your form is to collect information, and an input box is the primary method by which a user will enter a small amount of text. Generally, these are used for inquiries that require an answer thats anywhere from one to several words in length. Because they collect one line of informa-tion, input boxes are not vertically adjustable; however, you will want to consider the width of the box so that it is appropriate to the information being collected.

Text fields

Text fields are very similar to input boxes except that theyre intended to collect information that may be longer than a few words. A text field can be adjusted vertically to allow for several lines of text to be entered. They are generally used when trying to get feedback or comments that couldnt be ad-dressed anywhere else in the form.

Your text field should utilize what is known as text wrapping so that a lengthy response doesnt ap-pear on a single line in the form; when the text being entered reaches the right side of the text box, it will automatically return to the beginning of the next line. Limiting the number of characters that can be entered into this element of your form may be important as well, so that users merely enter infor-mation that is explicitly necessary.

6Checkboxes

Checkboxes are small squares placed next to items on your form which can be selected. They are used when you want your visitors to be able to select more than one option in a given group, or no options at all.

radio buttons

Radio buttons are similar to checkboxes in that they display a list of options, except that in this case users can only select one option. Theyre best used when a selection is required. For example, if you want your users to select their gender, options for male, female, and trans would be present, but only one could be selected.

drop-down menus

Similar to checkboxes and radio buttons, this type of menu shows a list of options in which generally only one selection can be made. Their implementation is necessary when trying to conserve space, especially when an enormous list of options is available (such as a list of all of the states in the United States). A large number of options can be reduced to a single line by showing a single item with a down arrow next to it; when the arrow is clicked, the other options are temporarily displayed on the screen as a list.

7Primary actions

Your primary action is the conclusion of the form; it is the main reason that a user is filling out the form to begin with. Generally, this is the submit button if the intention is to send information to you, but it could be other options such as save or Print. The primary action button should be plainly visible at the bottom of the form.

secondary actions

A form will often utilize buttons or links alongside the primary action which will allow the user to perform a secondary action. Typical secondary actions include:

Reset/clear buttons

More information

Go back

File upload

Link to a help page

Though these other actions can be useful, it is extremely important for the user to not confuse primary and secondary actions. Using a different text size or careful placement of the secondary action is recommended.

Thats it for the nitty-gritty technical elements of the form. Next up, well talk about the best ways to transform these boring, standard elements into a cohesive, stylish web form.

8web form design basiCs

Okay, you know the names of the different elements that go into a form. But you cant just slap a bunch of text fields and radio buttons onto a page and call it a day you have to have a method to the madness or you run the risk of confusing your users. A form that confuses people is going to drive them away, and no web designer wants that.

In this section, well go over the key ideas to keep in mind when laying out a form. Then well talk about what kinds of design considerations you have to keep in mind when designing forms of differ-ent lengths. Finally, well walk you through the form creation process from beginning to end. Lets get started!

laying out a form.

Below, you can check out some of the most common ways to lay out a form:

Thats a lot of different options! How do you know which one is right for your form? Well, according to an eye-tracking/user-feedback study conducted by researchers at CXPartners (http://www.cxpartners.co.uk/cxinsights/web_forms_design_guidelines_an_eyetracking_study.htm), there are two layouts in particular that make your forms easier and more enjoyable for your users to fill out. They are (drumroll please)...

9Vertical Layout

In most cases, this is the most intuitive layout, because users fill out form fields from top to bottom. There are a few exceptions, of course, including date fields and first and last name fields. In those cases, its okay to put these fields on the same line, as long as you label the fields in such a way that its clear they are related.

Left-Aligned Labels

Bold, left-aligned labels were reported to be clear and easy to read, and made for a clean-looking layout.

Of course, theres not just one layout that works best for all forms. The most important factor to take into account when determining which layout to use is the length of your form. In the coming sections, well discuss different common form lengths and the best layouts to use in those situations.

10

whats the best way to label an optional field?

Since the dawn of web forms, it seems, the asterisk (*) has been used to denote required fields.

At the top of your form, you can include this: * = required or Fields marked with * are re-

quired. Then, at the end of the label for each required field, you simply add an asterisk. Instead

of Full Name, for example, we would have Full Name *.

On the other side of the coin, lets say you have mostly required fields, but only a few fields that

are optional. In this case, you can omit any wording about required fields. By the fields that

are optional, include the word optional in italic letters or in parenthesis, or both. When a user

sees only a handful of fields marked optional, logic dictates that the rest are required, so this

is a clear way to show the user which fields are required and which arent.

Keep in mind that you should only mark as required fields that are actually required. If your us-

ers are faced with a long form packed with required fields, they may feel pressured, frustrated,

or even annoyed and that could reduce the chance that theyll actually fill it out.

Teeny-Tiny Forms.

When we say teeny-tiny, were talking about forms with no more than three fields. In this case, you can do something unique with the design: a horizontal layout.

You can see why this wouldnt work with a longer form, but for a short form like this, its actually very streamlined and direct. Of course, you can also use a vertical layout too.

11

Medium-Sized Forms.

Were calling a medium form anywhere between four and eight fields. This should be the length you shoot for any more than eight fields, and your users may get annoyed. If youre creating a medium-sized form, you should work with a vertical layout. Left-aligned labels are a decent option, but the vertical labels are usually your best bet.

Long Forms.

Any form longer than eight fields is what were calling long. Unless theres a real reason why your form needs to be this long, we recommend trimming the fat and only asking for information thats essential.

Now, lets say you legitimately need a lot of information from your users. Thats cool! To make your form seem shorter which your users will appreciate break it up into smaller chunks. This could mean having it span multiple pages or using headers to divide up information into relevant groups.

Heres the thing about headers: People tend not to read them. But thats not actually a bad thing. Even if your users dont carefully peruse your header content, the form still seems shorter. If your head-ers are truly important, just do something to make them stand out, like bold them or apply some cool highlighting.

12

designing a Killer form.

Your form design is a chance for you to stretch your creative wings. Since its such a small part of your website, you can feel free to do something unique with it just as long as it matches your site on some level. For instance, if the rest of your site is very professional, you might not want to go with a super-funky, way out-there form. But there are other ways you can make your form feel approachable, attractive, or just plain cool, which in turn makes users more likely to fill it out:

make it clean and simple. This is a great option for beginning designers, since its easy to make some-thing attractive-looking without too much effort. Just make sure your form doesnt look sterile.

make it pretty and flashy. Like we said, your form is a great place to let go and get a little creative. And if youre design-challenged, CoffeeCup Software offers beautiful themes to match any website design.

13

write some creative text. Youre not limited to purely descriptive text in your form. In fact, it can make your form seem more friendly and approachable if you use a conversational tone.

All right, now that weve covered the concepts you need to know to design a great form, lets put those concepts to use. In the following steps, well walk you through the process of creating a medium-sized form. Lets dive right in!

Step 1: Formulate a plan

When designing a form or any other aspect of your website the best thing you can do is have a solid plan in mind before you get started. Lets say you run a small business where you provide several printing services. When it comes to your form, youll generally think like this:

I want a form on my website where a user can request a quote for my services. What do I want to get from my customers? I want their first name, last name, and e-mail address. I also want to know what service they want me to provide and any additional information that might be required.

If thats all the information you want to get with your form, the end result might come out looking something like this.

Fig. 1. A bare-bones form. Its bland, but its a good start.

14

Youve laid down some good groundwork for the rest of your form. Kudos!

Step 2: Consider the user

Think about all the forms youve had to fill out. How many times did you suspect you were just filling out B.S. info for the sake of filling out B.S. info? Dont subject your users to this frustrating, tedious task build conservatively and make your form as small an obstacle as possible. Minimize the num-ber of required fields and use the right fields for the right information, and youll ensure that the user can easily and quickly fill them out.

Heres an example: Our hypothetical small printing business has a set of services. We know exactly what these services are, so we should provide them in our form for the user instead of making the user type what service they want. After all, they may not know all of our services, or they may not know exactly what the service they want is called.

In this case, instead of a text field, we need a drop-down menu. A drop-down menu is just one of sev-eral multiple-choice options in a form. The others are lists (also known as combo boxes), checkboxes, and radio buttons. Which one of these you use depends on the situation.

This not only allows users to quickly choose the service they want, but it also allows you to control the choices a user has, helping to reduce user error. The drop-down menu is a good way to save space while offering these options.

Step 3: Design neatly.

In addition to building your form conservatively, youll want to make sure the design and layout of the form are neat and tidy. Looking at the layouts we discussed earlier, a vertically oriented form is the best bet here. Weve already done that, so go ahead and pat yourself on the back!

Ideally, your form will flow both logically and spatially. The user will most likely begin viewing the form in the upper-left-hand corner and progress from there as if reading a magazine or book. You can simplify this process for them by composing your form vertically and grouping together similar items.

15

For example, if you choose to have a single input box for a persons name, it should be the only item on that line; if you choose to have separate inputs for a persons first and last names, it makes sense to place them on the same line. Similarly, an input box for a visitors e-mail address should be on a line by itself.

As the visitor scans down the form looking over the information being requested, unnecessary items can get in the way of the ultimate goal. Extra instructions, precariously placed labels, the word re-quired next to nearly every item each serves to confuse or distract the user. Try practicing a little feng shui on your form design to see if a more minimal style comes across as more intuitive.

where to put the submit button?

Its good practice when designing your form to make sure that all the elements line up in a way

thats easy for the eye to follow and that allows the user to progress naturally through your

form. If thats the case, then why is the Submit button positioned on the right side of the form

instead of the left in Figure 2?

One thing to take into account is that people naturally read from top to bottom and left to right.

When you apply this to a form, the option someone expects to see last is a way to send the form:

the Submit button. By placing the Submit button on the right side of the form, you create a

certain feeling for that button that its the last thing on the page. Gives it an air of finality,

you know?

what about the reset button?

Lets be blunt: The Reset button is practically useless. In fact, it often does more harm than

good. You still see some in minor circulation around the web, but theyre only there because the

person who designed the form didnt know any better. Theres no good reason to have a Reset

button.

But why? You might think that a Reset button is a nice way to provide the user with a quick way

to start over. After all, on a paper form, when you mess something up, wouldnt it be nice to

have a quick, easy way to erase everything and start fresh?

Yes, that would be pretty nice on a paper form. But things are a bit different on the web. On a

web form, when someone decides at the last minute not to send the form, they just leave the

page without hitting Submit. Or if they legitimately do want to clear everything out and start

over, theyll most likely just start at the top and reenter whatever data they want to change. Or

theyll use the Refresh button on their browser.

So as you can see, all of these options drastically reduce the usefulness of a Reset button in

your form. Even worse: Reset buttons can look stylistically the same as a Submit button, and if

your user accidentally clicks Reset, everything is cleared off the form. This simple accidental

click could easily deter your user from going through all the trouble of filling out the form again.

Use short, clean descriptions when necessary.

Sometimes, youd like to explain why youre collecting certain information. This not only helps reduce user confusion, it also ensures that the information is formatted the way you want it.

16

For instance, an e-mail address is something most people are a little uneasy to give out. Nobody likes receiving spam or having their e-mail address sold to mass marketers, so guarding our e-mail ad-dresses has become as much of a security measure as locking the door to our houses when we leave. A clean description and a bit of assurance can go a long way toward easing your users minds, as youll see in Figure 3 below. Weve also added a comment to the Additional Info text field to urge the user to give a bit more information, since that will help us serve them better and increase our chances of mak-ing a customer out of them.

Fig. 3. Cleanly styled and concise comments can help you assure users and influence the data you receive.

Notice how the comments are styled differently from the rest of the text in the form namely, the font is a size smaller. Different styles can convey different types of messages. When a field is crucial, you might consider changing it to a more noticeable color, like red or orange but be tasteful!

Keep your comments and descriptions clean and concise. Explain only what you need to explain in your comments after all, you have the rest of your website to say anything else you want to say.

17

The Keys To User orienTaTion

Everything youve learned so far is a great start to any form. You can apply only the techniques above, and youll have a solid, usable form that incorporates the basics of user orientation. But there are four more very important keys that work in conjunction with everything in the previous section to make a form truly built around the user:

Be the first to communicate!

Divide the form into bite-sized, manageable sections

Be clear

Release the user.

This set of rules revolves around communication. Communication is the cornerstone to any good relationship. Think about it: No relationship can begin without communication, and it certainly cannot continue without it. A lack of communication, though, can end a relationship or worse, prevent one from even forming.

be the first to communicate!

You already know why communication is so important. If you have a web form, you are most likely trying to build some sort of relationship with your users, because a form allows for communication. Usually, though, forms on the web want the user to be the one to initiate the communication. In fact, all of the examples youve seen above want the user to be the initiator.

Lets change that. Using our current example, lets say our business has been around for a while and has grown a bit. Our company has the staff to provide calls to our customers who want to be called instead of e-mailed, and our form can now provide a quote for more than one service at a time.

To accommodate for this, weve added a Phone Number field. This is a normal text field, so theres a bit of room for error. The user might not type in an actual phone number, or it may not be properly formatted. Thankfully, in CoffeeCup Web Form Builder, theres a Phone Number Verification option that prevents users from typing invalid characters.

Some customers may give a phone number, but still want to be contacted by e-mail, or vice versa. We want to find the best way to contact the user, since we want to do our best to secure a new customer. So on our form, weve got a Preferred Contact Method set of radio buttons. Radio buttons allow the user to see all the options but only let them select one.

Weve also changed the Services option again. Now a customer can select multiple services in a single quote, so a drop-down menu, which allows for only one choice to be selected, wont work anymore. In the drop-down menus place, we have set up separate checkboxes for each service. The user can still specify the details in the Additional Info box. Take a look at the form in its new state.

18

Fig. 10. This is our form after weve made some practical changes to it. Now we can contact customers by phone

and/or e-mail, and they can choose more than one service for their quote.

Thats a pretty good-looking, functional form. Its clean and contains all the information we want from our customers. But lets take it one step further and actually communicate with our users, rather than demanding information from them. This involves the wording we use in our form. Remember earlier, when we talked about using creative, conversational language to spice up an otherwise bland form? Prompting the user with short, lifeless labels like E-mail Address, Service, and Additional Info is poor communication.

Lets actually talk to the user. Imagine youre face to face with your customer. If you ask for their name, you arent going to stare them in the eyes with a rigid expression and demand, Full name. That sounds unfriendly and more than a little creepy. If you were looking to garner a positive response from this person, you would instead open with a smile and say, Hi, whats your name?

19

Fig. 11. This is a more user-oriented form. The labels begin communication with the user.

This is the first step to a vast improvement of our form. Notice that our layout now combines left- and top-aligned labels all the labels are now top aligned, but the left edges of all the main fields still lead straight through the form to the Submit button. This saves space while still ensuring that the users eye can easily and naturally flow through the form.

And hey, now were actually communicating with the user! By asking questions and providing instruc-tions, you prompt a much more natural response from the user.

divide the form into bite-sized, manageable sections.

The form has taken a much more personal tone now. Lets go back to that imaginary situation where youre face to face with someone. After youve introduced yourselves, how are you going to carry on the conversation?

There are many ways you could conduct yourself. If youre at a business event, you might introduce yourself, then tell the other person who you are, what you do, why you do it, and perhaps (if youve got something to sell) how it benefits them.

20

If youre at a social, non-business event like a party and youre just looking to meet some new people, you could tell the other person what activities you enjoy, your favorite restaurants, and maybe tell an old story about that time your dog actually did eat your homework.

Ideally, the other person would listen to you, absorb everything you said, and then tell you everything about them in the same way you just did. You would listen, retain everything, and then, hey, youve got a new customer/friend/contact!

But thats not at all how communication works. You cant throw large quantities of information at someone and expect them to remember everything heck, its way too much to expect them to actu-ally pay attention. Most of us, unfortunately, are simply not that interesting.

Communication involves the exchange of ideas in small, manageable sections. You introduce yourself, and the other person does the same. You mention what you do for a living, and the other person has a comment or question. You remark back, or answer, and this prompts another response. In a good conversation, the information is a steady, back-and-forth flow.

A form, being another method of communication, should be the same way. You may be asking for quite a bit of information, but that doesnt mean you have to throw it all at the user in a huge block. As we mentioned earlier, you can use headers, horizontal rules, or colored bars that match the design of your site to separate the information into small, easily understood chunks.

21

Fig. 12. Headings separate the content of this form into manageable, easily understood sections.

Although our form has grown in actual vertical size, to the user, its actually decreased in complexity. Why?

Before, our form was asking for six different things: name, phone number, e-mail address, method of contact, desired services, and job description. Now, to the user, its only asking for three things: con-tact information, availability, and how we can help them.

be clear.

Try to answer any potential questions your users may have about the form. Right now, our example form is pretty clear. But some questions that immediately come to mind when looking at it are:

Well, my e-mail address is guaranteed to be kept confidential, but what about my phone number?

22

Are any of these fields optional? Which ones are required?

If I choose multiple services, do I get a quote for each one, or is this a quote for all the services together?

Also, some users may get confused and think this form is actually placing an order. This confusion is bad for two reasons. First, if someone actually does want to place an order and they think this is an or-der form, theyre going to be at least a little annoyed that the form didnt take them to another step to input their payment information. Second, if someone just wants a quote, but is confused and thinks this is an order form, theyre not going to fill it out.

You can clear all of this up in the form. There are a couple of different ways to handle all these com-mon questions. First, we will add an informative title explaining just what this form is all about. Below it, well put a note stating that all fields are required in this form. Well change the comment about the customers e-mail address being confidential to include their phone number as well. Well also use a default selection for our radio button group, which ensures that the user will choose one of the three options.

Well further clarify our form by beefing up the label for the services section. Finally, we will add a small note above the submit button letting the customer know that this is only for a quote and that no purchase is actually being made.

Check out the result on the next page.

23

Fig. 13. Weve added some notes and changed some things to eliminate confusion.

This is a nice, clean, user-oriented form. It accomplishes everything we want it to, and it does so in a way that makes it a form of communication rather than an obstacle.

A few notes about some of the changes we made: First, using a default selection for a group of radio buttons or checkboxes can be an excellent way to make sure your users select one of these options. However, this technique can be abused, and some users may be wary of preselected buttons or check-boxes that seem untrustworthy.

For instance, say you have an occasional newsletter you like to send out. You could put a preselected checkbox at the end of your form, like so:

24

Thats perfectly reasonable. But lets say you also had special offers you sent out occasionally, and that you had affiliates who offered occasional newsletters and special offers of their own. To avoid looking suspicious, you might want to hold off on using preselected options. Even if theyre all per-fectly legitimate offers, to the average user, this:

Translates to this:

Second, simply stating that all fields are required wont guarantee that your users will fill out all the fields. However, if youre using Web Form Builder, you can check the Required Field checkbox for all required fields. That way, if your user misses one or more of these questions, theyll be taken back to the form after they click the Submit button and asked to fill in the fields they missed.

As we mentioned in the last chapter, you can also make things clearer to the user by adding effective icons to your form. See Figure 14 to get a good idea of how this can positively affect a forms readabil-ity.

You should be very careful when using icons and other images in your forms, though. Always make sure they complement the other colors in the form or on your site, and make sure they have a truly functional purpose. If they dont, they may clutter your form, which looks tacky and can distract your users. The icons in Figure 14, for example, serve as more than just decoration. They have two different functions. First, they help to further separate the content of the form into manageable sections. Sec-ond, notice how the icons are purposely pushed off into the left margin of the form. This gives them the same effect that bullets have in bulleted lists.

See how the bullets in this list are off to the side?

The text still lines up properly.

25

But the list gains organization and separation if the bullet points are located off to the side.

Notice how the content in the third bullet spans two lines, but you know it still all belongs to the same bullet. The same goes for the icons in Figure 14.

Fig. 14. Carefully selected icons and imagery can enhance a forms readability.

Its not always easy finding attractive, useful icons for your form. The icons you see above are part of a graphics pack sold by CoffeeCup on our website (https://www.coffeecup.com/store/graphics/).

Our form is practically ready to put on our page now. Theres only one more thing to consider: What does the user see when they hit the Submit button?

26

release the user.

When the user clicks the Submit button, they think theyre done, and theyre ready to move on. Theyre basically saying, Heres the info you wanted. Talk to you later!

In a real conversation, youd give them a wave, say bye, and walk off, or give them some other way of acknowledging that the communication is done. Your form should be no different.

Have your form programmed so it sends the user to a custom page that tells them something like, Thank you for your submission! Youll be hearing from us shortly.

If youre not using CoffeeCup Web Form Builder, you will need to code this part of the form using the scripting language of your choice, or speak with your web developer to get this done.

If you are using CoffeeCup Web Form Builder, it makes this part easy for you. Just follow these steps to add a custom page after your form has been submitted.

1. With your form open in Web Form Builder, click the Configure Form Settings icon.

2. Click the Form Submission tab at the top of the window.

3. Here, you have two choices: Redirect to Website Address or Create a Custom Page.

Redirect to Website Address

This is the recommended option. If you wish to use it, you will need to create your own webpage using your favorite web design program. Make this page say something like, Your quote request has been sent! Well be getting back to you within 1224 hours. Have a good day!

Be sure to include links back to your homepage and maybe a link back to the form in case your user wants to request another quote. Youll see what we mean on the following page.

Fig. 15. A sample post-submission page. This gives the user a bit more information and releases them, letting

them know they are done with the form.

27

Create a Custom Page

If you dont have the time or resources to create a new page on your site, you can use the Create a Custom Page option instead. Just adjust the message between the tags near the bottom of the Custom Page Contents field to create your custom message, and Web Form Builder creates the page for you. It doesnt look as pretty as your own custom page, but it gets the job done.

Fig. 16. CoffeeCups Web Form Builder can create a custom page for you. By default, it looks something like this,

but you can add your own style and HTML to suit your site.

applying These Techniques to your form

Most likely, if you have read everything thus far, youve had ideas popping up in your head about how you can apply these techniques to your own form.

Perhaps the best way to go about it would be to start a new form from scratch, making sure to account for all of the information youve learned. If you have a form that you would rather modify, then take a look at your form and go through the pages of this guide one by one, making adjustments as you go along. You should end up with a very nice, user-oriented result.

additional resources

If you want some inspiration, check out these unique form designs chosen by Smashing Magazine: http://www.smashingmagazine.com/2008/04/17/web-form-design-modern-solu-tions-and-creative-ideas/

For more information than you ever wanted to know about web form design, read Luke Wro-blewskis definitive guide, Web Form Design: Filling in the Blanks: http://www.lukew.com/resources/web_form_design.asp

28

29

so long for now!

Thanks for reading the CoffeeCup Web Form Design Guide. Its our hope that it has helped you create strong, effective forms that yield awesome results. Feel free to check out our website at http://www.coffeecup.com/ for more cutting-edge software like Web Form Builder. If you have any questions, you can contact us there, too.

30

ForewordBasic Elements of a form:TextInput boxesText fieldsRadio buttonsDrop-down menusSecondary actions

Web Form Design BasicsLaying out a form.Designing a Killer Form.

The Keys to User OrientationBe the first to communicate!Divide the form into bite-sized, manageable sections.Be clear.Release the user.Applying These Techniques to Your FormAdditional Resources

So Long For Now!