1. Less is more
It cannot be repeated often enough: Only query fields that are really important. Every single field, whether optional or mandatory, acts as a filter. A filter is not bad per se, but it is unfavorable if interesting potential customers are filtered out.
2. Best practice counts!
Pay attention to common practice in the structure and labeling of the form. This also applies to the order of the fields. If in doubt, just take a look at some of your competitors’ forms.
3. Allow Autofill or Autocomplete!
To make form filling more convenient, popular browsers support two HTML5 features:
- Autofill ensures that the browser remembers the user’s input so that it can fill out forms with virtually one click in the future. The problem is that the user too often relies on the data being correct.
- Autocomplete works in a similar way. Here, however, the user can decide when filling out the form which value he wants to insert into the field. Incorrect entries are therefore rather unlikely.
Unlike Autocomplete, the Autofill feature unfortunately cannot be disabled, at least not in Chrome. So the risk of getting incorrect data remains. It is best to use unique attributes from the WHATWG specification.
4. Use responsive rendering!
Web forms often lag behind in terms of responsive display. The use of forms in mobile devices is usually a horror. So make sure that your forms are also pleasing to the user on tablets and smartphones.
5. Guide the user through the form!
If a form has several fields, a user can get lost. Therefore, the form should always highlight the field that is currently being processed. This includes not only the obligatory cursor but also visual highlighting.
6. Use icons to visualize options
Graphics help to understand the content of options faster and more clearly. Therefore, use icons to describe each option.
7. Issue understandable error messages!
Forms are ubiquitous on the web, and you can’t make sense of their error messages.
You don’t have to worry about localization. The text appears automatically in the browser language. The only downside: The implementation of individual texts and colors is relatively complex.
8. Pay attention to the expectation conformity!
After submitting the form, the user wants neither riddles nor surprises. Therefore, give him clarity that the action was performed successfully and explain the following steps. Make sure that the user doesn’t end up in a dead-end after submitting the form, but can go to your social media channels instead. You can find many more tips on form design on HeyForm’s site.