Posts Tagged ‘form design’
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
- 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.
We are pleased to announce that FormSmarts now supports the full range of HTML form input fields. Users can now update their web forms and create new ones using Drop Down Lists, Radio Buttons, and Checkboxes.
We are in the process of updating relevant documentation on the site.
Update: see how to choose the correct form input field.
You can specify Form Filling Instructions for your web forms. Although this field is optional, we encourage you to make use of it. It will help your visitors complete the form more efficiently, and also help you build trust with them. Here are some information you may want to place in the Form Filling Instructions.
Remind users of the purpose of the form to avoid people submitting the wrong form.
Precise the intended content of particular fields. This will help your visitors complete the form accurately and efficiently.
Include the name of your website, so visitors can be confident they are contacting the right person or organization.
Whenever relevant, give an estimated response time, e.g. “we normally reply within 2 working days”.
Links & Formatting
You may insert links in the form filling instructions and add basic formatting with this wiki-like syntax.