Basic rules to form implementation success
With the enormous amount of technologies and various ways you can implement a form on a website nowadays, sometimes we tend to forget that at the end of the day, the form just needs to work and it needs to achieve the user’s goal as soon as it can.
Here are some basic (developer-friendly) guidelines to follow so you can make rock solid forms.
Avoid Ajax unless it is absolutely necessary
Whilst Ajax forms are fancy, and they provide a questionably better User Experience, in my opinion - Ajax forms are much harder to implement, and in most cases if you are implementing a simple Contact Form it is completely unnecessary.
It adds complexity and opens up a plethora of issues – how do you handle server side validation? What if the user disables Javascript? What if they hit the Back button?
In addition to this, goal tracking and other conversion tools won’t be able to measure it accurately without custom Javascript implementations.
Labels, placeholders. They go hand in hand.
Do not use placeholders as labels. Labels should be next to the actual input box itself. If you do not do this, not only are you confusing the user because they have forgotten what they were supposed to enter into the field, you are also failing AA compliance.
Use Labels for labelling fields. Use placeholders for putting example information or providing instructions.
There is an exception however: if there is only one field on the form (for example a search form) chances are it is OK to get away with just a placeholder.
Post, success? Then redirect to thank you page.
It really helps everyone out if you redirect the user to a thank you page that is on a different URL (or has different query string parameters). You will prevent simple issues such as:
- The user refreshing the thank you page and causing double-submissions.
- Marketing people not knowing how to track and measure conversions because the form URL is identical to the form success URL.
See this page for more information: http://en.wikipedia.org/wiki/Post/Redirect/Get
If you follow those simple guidelines above, not only will you implement a rock solid user friendly form that works – but next time a maintenance developer has to make some adjustments, they won’t do it grudgingly.
