forms are one of the most important communication pieces used
throughout your web site, and good form design is essential to
encouraging visitors to submit information in an easy and
A variety of different forms used creatively throughout a site
is a more useful way to collect a variety of information in
For example, visitors may be interested in volunteer activities
and will be more willing to fill out a volunteer form as opposed
to an address update form.
Well designed forms can also help visitors think about their
relationship with the organization. Again, using the volunteer
form as an example, choices of areas to volunteer in on the
form, helps a visitor to think about those choices just by
viewing the form.
None of us like spending time
filling out forms and if they’re confusing, too long or there
are errors, it’s unlikely you’ll get the information you’re
Tips for Web Forms
- Have a goal and a good plan
at the onset for designing forms. Think about the basic
function, who will be using it, optional verses required
information, where the user may be confused and what back
end business processes and systems will need to be put in
place to manage the submissions.
In some cases, if the information to be collected is not
significant nor necessarily needs to be systematic, an email
address may suffice instead of a form.
Forms should be marketed and referenced in print and other
communications. Wherever possible, encourage both internal
and external users to submit information via the web site.
Also think conversely about where it makes more sense not to
use other mechanisms to collect data.
- Locate your form where it
makes sense. It’s not productive to have a on-line giving
form buried 15 clicks within the navigation structure. Put
links to important forms on the main page of your site, and
also promote the forms and links to them from within other pages.
A link to an on-line giving form and a link to an address
update form should probably be included on all pages within
the menu structure of your site.
Contents and incentives for visitors who submit data, such as a drawing for memorabilia
can help to increase the number of submissions and encourage visitors to
return to the site and update their information on a periodic basis.
Publishing a list of winners can also be useful. Keep the
contests fresh and change the prizes on a regular basis.
Forms for your Constituents
Alumni Section Report
Event Add to a Site
Letter to the Editor
Make a Difference
News Story Add to a Site
Send a Message to the
Young Alumni Survey
Employment and Related
Student Data Entry Assistant
Professional Development Report
Professional Development Request
Suggest a Link
Web Site Assessment Survey
For secure forms, there should be a reference to the fact that the form is on a secure site
with an explanation of why a site is considered to be secure. i.e. A link to Verisign.
However, don’t brand the form with the security provider
logo. Have the security information display as a popup.
- Shorter forms are usually
better so look carefully at what you’re collecting. Don’t
duplicate information and don’t collect information you
don’t need. It makes more sense for example, to have a
specific address update form than to try and collect address
information on all forms on your site.
If you have a long form, split into sections and allow some
white space between the sections so users can see the
logical flow of information.
- Keep the collection of
profiling information separate from transaction information.
If you begin asking too many or too personal questions
during a transaction, users may become frustrated. Make
these a separate survey with some additional reward mechanism.
- Don’t split common information fields into too many pieces.
The phone number can be a text box that validates and
displays correctly once the user enters. There’s not much
point in splitting it into multiple boxes for data entry
purposes. If you do, make sure the user automatically tabs
to the next field once a field is filled out in full.
- Remember to consider auto fill technology such as provided
by the Google toolbar and design your forms to take
advantage of this so users don’t have to fill in as much
- If you have multiple forms
collecting the same information, collect it in the same
format and order on all forms so visitors see consistency
within your site.
- All forms should have properly aligned fields and tabbing between fields
should occur in the correct order. Try to have the focus on the first field when the user
first accesses the form. Try not to have more
than one field per horizontal line.
- Vary the size of boxes
according to the information you require. Don’t have a 60
character box for a phone number.
- Use dropdowns for items such
state and country so that data is collected in a consistent
fashion, and try to order the items in the dropdowns in
terms of the frequency they’re collected. i.e. For country,
have the first country the one where most of your users will
reside. Don’t make them go through a whole list.
- If you have international users, consider having variation
of the form in different languages, or allow them to select
the language when initially accessing the form.
- Remember that your audience
is international so make sure you don’t assume that everyone
lives in the country you’re in. If you can’t do
international financial transactions or if you are only
providing a service in the country you’re located in, make
this clear to the user at the onset.
- Make it obvious to users
which fields are required, and include edit checks and masks
so that users enter the information correctly. All forms on
site should use the same edits for collecting. i.e. All
dates should be in the same format.
If you have complex edits, make sure they are logically
consistent and don’t trap the user on a screen because you
have an error in your logic.
Collect information in a logical order. Name, Address,
Phone, Email etc.
- Forms should have an
equivalent in Adobe, Word, Excel or other format so users
can also print out and mail in if they are uncomfortable
sending information electronically.
- A confirmation page should
always be displayed after someone submits a form and the
user should have the option to go back and make corrections.
A confirmation page can also be used to direct the user to
some other part of the site for additional value. For
example, after filling out an order form, the confirmation
page could suggest a location for additional services.
- If a user has to go back to
a form to make corrections, the fields should not all clear.
- An email should be sent automatically to the participant letting them know their
submission has been received, when follow-up will take place and other
relevant information related to the transaction even if they get a
confirmation page in a form where an email address has been
- It is important from a
customer service perspective to respond to submissions of information within
the shortest time period possible.
- Results from a form should
ideally be saved to a database so that future statistics,
results can be analyzed and data transferred to other
- Verification of credit cards
and other financial transactions should take place if
possible within the site and not go to another company’s web
site to process the transaction. If you do go to another web
site, have the form on that site branded and designed the
same as the forms on your own site.
- Include help for forms, but
make sure if the user accesses help, that the original
fields of information do not clear.
- On all multi-step forms,
always allow the user to go back and forth easily rather
than having to start over. Have data edit and control checks
on each form so the user doesn’t have to return to the
beginning to make a correction on the first page. When they
do need to make a correction, make sure the fields don’t
clear so they don’t have to completely fill in the fields
- When information or a form
doesn’t validate correctly, make sure there is an adequate
and complete explanation of why this occurred so that users
are not confused when they receive an error. Have your
marketing staff involved in helping to create error message
and explanation language rather then just your programmers.
- Understand the difference
between the functionality of radial buttons, checkboxes and
other standard programming controls and make sure that
they’re used with the same conventions as a desktop
- Don’t have a clear or reset
button since users may accidentally click on this and clear
all of their information. In any case, the use of the back
button makes more sense. Always re-title the submit button
to the title of the form to provide a clear instruction.
i.e. Submit Feedback.
- Always allow an opt-out of
any process rather than holding a user in one screen until
they do something correctly such as keeping them in a screen
until an error is validated and corrected.
- The majority of users are
aware that the information the provide will be used for
related marketing purposes.
Allow them positive opt-outs,
such as check boxes initially in an unchecked state allowing
them so be selected if the user wants to receive additional
Always allow a information by mail option as
users are also frustrated with the amount of spam email they
- If you do use reset and
cancel remember that the web is a navigation environment as
opposed to a program which uses dialog boxes. Users know how
to get back and forth between pages with their browser.
- Do adequate stress testing
on your form, and get a number of users, particularly
non-programmers to try it. When you do testing yourself, you
tend to get in the habit of entering relatively good data.
Since you made the form, you are also familiar with the
usability aspects you put there yourself, which may be far
different than what the user experiences.
Also remember to have a regular schedule for testing your
forms in case something goes wrong on the site. Users may
not inform you if a form is broken, and unless you’re
testing on a regular basis, it could be some time before you
- Monitor the usage statistics
of your forms, and try moving them to different parts of the
site where they may be utilized more. Some forms are
seasonal, so move them to higher traffic pages at the
- Monitor if the
users submitting information are using the form in the way
it was intended. If not, you may have to re-design or create
a new form that will service the required functionality.