Sample Web Forms

Home Blog Job Board Community Contribute Vendor Listings Search Site

Sample web forms.

Web 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 systematic way.

A variety of different forms used creatively throughout a site is a more useful way to collect a variety of information in different ways.

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

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 Locator
Alumni Section Report
Award Recommendation
Email Forwarding
Event Add to a Site
Event Registration
Facultygram
Information Update
Letter to the Editor
Magazine Subscription
Make a Difference
On-line Giving
News Story Add to a Site
Payroll Deduction
Planned Giving Brochures
Reunion Survey
Send a Message to the President
Volunteer
Web Survey
Young Alumni Survey

Employment and Related
Payroll Deduction
Student Communicator
Student Data Entry Assistant

Others
E-updates
Feedback
Portal Development Inventory
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 information.
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 as 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 submitted.
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 systems easily.
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 again.
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 interface.
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 information.

Always allow a information by mail option as users are also frustrated with the amount of spam email they receive.
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 notice.
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 appropriate times.
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.