Table of Contents

Foreword 3

Basic Elements of a form: 4

Text 4
Input boxes 5
Text fields 5
Radio buttons 6
Drop-down menus 6
Secondary actions 7

Web Form Design Basics 8

Laying out a form. 8
Designing a Killer Form. 12

The Keys to User Orientation 17

Be the first to communicate! 17
Divide the form into bite-sized, manageable sections. 19
Be clear. 21
Release the user. 26
Applying These Techniques to Your Form 27
Additional Resources 27

So Long For Now! 29

2
 Foreword
If you’re reading this, it’s 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,
it’s 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, that’s all we have to say here. Read on to start learning more about web form design!

3
 Basic Elements of a form:
Before we start talking about how to style a form, it’s 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

Let’s talk about each one and what they’re used for.

Text
You’re 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 you’re scratching your head and asking yourself what in the heck a web-safe font is, here’s
your answer: They’re 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 don’t have to. It really depends on what’s appropriate for your page.
Here’s one suggestion, though: You may want to consider making instructions, errors, and minor labels
for elements small so that the user doesn’t get distracted while filling out the form.

4
 What 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 that’s 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 they’re 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 couldn’t be ad-
dressed anywhere else in the form.

Your text field should utilize what is known as “text wrapping” so that a lengthy response doesn’t 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.

5
 Checkboxes

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. They’re 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.

6
 Primary 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.

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

7
 Web Form Design Basics
Okay, you know the names of the different elements that go into a form. But you can’t 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, we’ll go over the key ideas to keep in mind when laying out a form. Then we’ll talk
about what kinds of design considerations you have to keep in mind when designing forms of differ-
ent lengths. Finally, we’ll walk you through the form creation process from beginning to end. Let’s get
started!

Laying out a form.

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

That’s 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
8 please)...
 Vertical 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, it’s okay to put these fields on the same line, as long as you label the fields in such a way that
it’s 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, there’s 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,
we’ll discuss different common form lengths and the best layouts to use in those situations.

9
 What’s 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, let’s 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 aren’t.

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 they’ll actually fill it out.

Teeny-Tiny Forms.
When we say “teeny-tiny,” we’re 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 wouldn’t work with a longer form, but for a short form like this, it’s actually very
streamlined and direct. Of course, you can also use a vertical layout too.

10
 Medium-Sized Forms.
We’re 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 you’re 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 we’re calling long. Unless there’s a real reason why your form
needs to be this long, we recommend trimming the fat and only asking for information that’s essential.

Now, let’s say you legitimately need a lot of information from your users. That’s 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.

Here’s the thing about headers: People tend not to read them. But that’s not actually a bad thing. Even
if your users don’t 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.
11
 Designing a Killer Form.
Your form design is a chance for you to stretch your creative wings. Since it’s 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 it’s easy to make some-
thing attractive-looking without too much effort. Just make sure your form doesn’t 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 you’re design-challenged, CoffeeCup Software offers beautiful themes to match any website design.

12
 Write some creative text. You’re 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 we’ve covered the concepts you need to know to design a great form, let’s put those
concepts to use. In the following steps, we’ll walk you through the process of creating a medium-sized
form. Let’s 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. Let’s say you run a small business where you provide several
printing services. When it comes to your form, you’ll 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 that’s all the information you want to get with your form, the end result might come out looking
something like this.

13 Fig. 1. A bare-bones form. It’s bland, but it’s a good start.

 You’ve laid down some good groundwork for the rest of your form. Kudos!

Step 2: Consider the user

Think about all the forms you’ve 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? Don’t 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 you’ll ensure that the user
can easily and quickly fill them out.

Here’s 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, you’ll 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. We’ve 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.

14
 For example, if you choose to have a single input box for a person’s name, it should be the only item
on that line; if you choose to have separate inputs for a person’s first and last names, it makes sense to
place them on the same line. Similarly, an input box for a visitor’s 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?

It’s good practice when designing your form to make sure that all the elements line up in a way
that’s easy for the eye to follow and that allows the user to progress naturally through your
form. If that’s 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 it’s the last thing on the page. Gives it an air of finality,
you know?

What about the Reset button?

Let’s 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 they’re only there because the
person who designed the form didn’t know any better. There’s 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, wouldn’t 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, they’ll most likely just start at the top and reenter whatever data they want to change. Or
they’ll 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, you’d like to explain why you’re collecting certain information. This not only helps reduce
user confusion, it also ensures that the information is formatted the way you want it.

15
 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 you’ll
see in Figure 3 below. We’ve 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.

16
 The Keys to User Orientation
Everything you’ve learned so far is a great start to any form. You can apply only the techniques above,
and you’ll 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 you’ve seen above want the user to be the initiator.

Let’s change that. Using our current example, let’s 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, we’ve added a Phone Number field. This is a normal text field, so there’s 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, there’s 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, we’ve 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.

We’ve 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, won’t work anymore. In
the drop-down menu’s 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.

17
 Fig. 10. This is our form after we’ve 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.

That’s a pretty good-looking, functional form. It’s clean and contains all the information we want from
our customers. But let’s 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.

Let’s actually talk to the user. Imagine you’re face to face with your customer. If you ask for their
name, you aren’t 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, what’s your name?”

18
 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
user’s eye can easily and naturally flow through the form.

And hey, now we’re 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. Let’s go back to that imaginary situation where
you’re face to face with someone. After you’ve introduced yourselves, how are you going to carry on
the conversation?

There are many ways you could conduct yourself. If you’re 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 you’ve
got something to sell) how it benefits them.

19
 If you’re at a social, non-business event like a party and you’re 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, you’ve
got a new customer/friend/contact!

But that’s not at all how communication works. You can’t throw large quantities of information at
someone and expect them to remember everything — heck, it’s 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 doesn’t 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.

20
 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, it’s 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, it’s 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?”
21
 “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, they’re going to be at least a little annoyed that the form didn’t 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, they’re 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, we’ll put a note stating that all fields are required in this form. We’ll change the comment about the
customer’s e-mail address being confidential to include their phone number as well. We’ll also use a
default selection for our radio button group, which ensures that the user will choose one of the three
options.

We’ll 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.

22
 Fig. 13. We’ve 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
23 checkbox at the end of your form, like so:
 That’s perfectly reasonable. But let’s 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 they’re all per-
fectly legitimate offers, to the average user, this:

Translates to this:

Second, simply stating that all fields are required won’t guarantee that your users will fill out all the
fields. However, if you’re 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, they’ll 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 form’s 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 don’t, 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.

24
 • 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 form’s readability.

It’s 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. There’s only one more thing to consider: What
does the user see when they hit the Submit button?
25
 Release the user.
When the user clicks the Submit button, they think they’re done, and they’re ready to move on. They’re
basically saying, “Here’s the info you wanted. Talk to you later!”

In a real conversation, you’d 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! You’ll be hearing from us shortly.”

If you’re 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! We’ll be getting back to you within 12–24 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. You’ll 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.
26
 Create a Custom Page
If you don’t 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 <body></body> 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 doesn’t look as pretty as your own custom page, but it gets the job done.

Fig. 16. CoffeeCup’s 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, you’ve 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 you’ve 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-
blewski’s definitive guide, Web Form Design: Filling in the Blanks: http://www.lukew.com/
resources/web_form_design.asp

27
28
 So Long For Now!
Thanks for reading the CoffeeCup Web Form Design Guide. It’s 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.

29
30