10 Best Practices for Complex Web Forms

The goal of web forms is completion. Since each form field requires consideration and action, a person who views or starts filling out a form does not necessarily complete it. Users do not owe form owners data or full completion. Submissions are, therefore, results of users’ willingness to carry out the entire fill-out process. Of course, this willingness can be encouraged. Let’s see how to do it.

1. Start off with the research. Always the vital first step. In our case, research refers to learning about and testing out form builder features. Check out the different types of form fields and learn about platform functionalities. Know your tools and get to work!

2. Group content. In longer forms, this is usually a must. Signal sections either by headings (Personal information, Contact Data etc.) or by visual elements (thin horizontal lines). Users like clear-cut forms that they can easily comprehend. And keep in mind that best conversion rates come with forms that do not require content grouping, i.e. short forms.

3. Adapt label positioning. Labels can be positioned in three ways, each one having strenghts and drawbacks. Top-aligned labels help users scan and understand the form quickly, but take up more vertical space. Left-aligned labels save space, but may sometimes be too distanced from input areas. Right-aligned labels also care for economy of space and, in addition, are easily associated with input areas; however, with right-aligned labels, longer forms are more difficult too scan and may be perceived as less aesthetic. Read more about field labels in short contact forms.

4. Reduce typing stress. Use choice fields whenever possible: dropdown lists, radio buttons, checkboxes. Tick the Accept other values option to allow users to specify a different value than the ones provided. Also, be aware of all types of predefined fields — their structure and validation features facilitate the fill out process.

5. Add interactivity. Forms can be responsive to users’ input throughout the fill-out process. Establish field rules for your form and, based on user input, previously hidden fields will show up. Why ask for the pet’s name if the user has already stated that he or she does not have a pet?

6. Required vs. optional fields. For highest completion rates, follow a well-defined objective throughout the form creation process. Most — if not all — of your form fields should be required. What fields build towards the objective and which ones don’t? Leave out the latter or keep them to a minimum. Why should users fill out information that is not really necessary? In 123ContactForm web forms, required fields are marked by a red asterisk. If you decide to use optional fields, you can include optional in their labels, to point out the distinction better.

7. Care for layout and design. In best case scenarios, it takes users 8 to 10 seconds to decide whether they will start filling out your form or not. Besides submission purpose, this decision is based on form layout and design. Try to stick to one-column forms, when possible — it makes it easier for users to focus on one field at a time. Use colors to reflect the form owner’s identity, but don’t abuse them (two colors should be fine). Avoid field or graphic clutter.

8. Use smart CAPTCHAs. CAPTCHA images are short verification codes that users have to read and type in order to prove that they are people and not robots. Such images make your forms safer, but annoy users. You can choose to always show a CAPTCHA image at the end of your form or to never show one. The best approach is to use smart CAPTCHAs. They show up only when your form seems to be abused (e.g.: multiple submissions from the same IP). Verification number settings can be changed in your Settings → Security section.

9. Provide guidance. There are several ways in which guidance can be provided to users: a) Use predefined fields — they are the easiest to understand; b) Add field instructions when necessary; c) Show highlighted error messages. With 123ContactForm web forms, when there’s an error in the fill out process, an error box is displayed at form top and the field where the error occured is also highlighted. Like this, users know exactly what input needs to be fixed, while correctly provided information is preserved.

10. Communicate submission success and be thankful. Once the Submit button is clicked and the submission delivered, show a customized Thank You message. It tells users that the submission was sent successfully and thanks them for their interest and effort. The Thank You page can also redirect users to your website. Customize this page in your Settings → Notifications section.

Featured image courtesy: freedigitalphotos.net

Originally published at www.123contactform.com on October 3, 2011.