FormSmarts Web Form Blog

Home > Weblog > Building Successful Web Forms, Part 1

Building Successful Web Forms, Part 1

Web forms play a key role for visitor (and customer) interaction on many
sites. However, many web designers don’t realize that there may be huge
differences in form abandonment ratio, depending on how well the form is
designed. In this post and follow ups, we’ll give you some tips to help
you make your web forms an effective communication channel.

Always provide form filling instructions.

Don’t assume that all of your visitors will understand how to submit a form without further explanation. Short and clear form filling instructions can reduce form abandonment, and increase the quality of the information collected.

include a call to action phrase like “Please fill out this form to
contact XYZ”
indicate the purpose of the form and the recipient of the information collected
if applicable, confirm that you will reply, and give an indication of the time frame

Select the correct data type for each input field.

Because of necessary form validation, choosing and incorrect data type may prevent a form user from submitting valid information. When this happens, it is likely to lead to form abandonment.
For example, if you specify that a form field can only contain a Number, it may not work for a phone number. 1233456789 will work, but not 123-345-6789. So use
the Phone type instead. In many cases, the form builder will
pre-select a type for you, but not always. Read
more about selecting an input field data type in the form builder documentation.

Choose the most appropriate input field widget.

Don’t restrict yourself to text boxes and drop-down lists. Take advantage of the full range of HTML form fields with radio buttons and checkboxes. Learn when to use each one.

Using a drop-down list for a yes/no question will slow down the form user, and increase the chances (s)he gives up. Use radio buttons instead. Read tips about choosing the best input field widget in the form builder documentation.

Brand your forms for instant visual recognition.

Always brand your web forms with your own logo. This helps visitors
recognize at first sight who they are about to send information to.

Posted by FormSmarts on Tuesday, May 6, 2008 at 2:21 pm in HTML form.
Permalink | Com ment
Tags: form builder, form design, howto, input field, web forms

About This Blog

This is FormSmarts Blog, a weblog about web form design. The topics covered include technical aspects of HTML forms — such as form security and form spam — but also broader social aspects, like form accessibility, usability, and privacy. Most posts discuss general topics in the context of FormSmarts free web form service.