Today, we want to address an important element of a user-friendly website. Online forms are a great help if you aim to establish contact with visitors to your homepage. Furthermore, they are indispensable when it comes to processing orders.
As there are many potential pitfalls regarding online form design, we have summarized the most essential tips for you. You have probably seen some examples of forms that were not very user-friendly [1]. To ensure that you don’t fall into those traps, we have put together some valuable tips for efficient and functional form design.
What are the criteria for a good online form design?
First and foremost, a successful online form design needs to be functional. It collects all the necessary data and has a clear structure. The user should be able to understand at the first glance which entries are required. By labeling the individual fields, you can ensure that users can fill them in quickly.
Unfortunately, there is no overall solution that is suitable for all websites. That’s why you need to design an individual contact form for your homepage. However, you can score plenty of brownie points with the site’s visitors if they notice that you have put some thought and effort into it.
For a successful online form design, you can follow our advice, which we have collated during our many years of Internet experience and which promises a high degree of user-friendliness.
Our 6 top tips for successful online form design
As already pointed out, online form design is a very individual topic. If the tone of your website is very formal because you want to provide mainly facts and information, then this will be reflected in the design of your contact forms. If you are very open and casual in your approach to customers, you can also design a more fun and informal contact form.
Regardless of the approach and wording, however, we aim to give you 6 tips that are valuable for any online form design.
Adapt input fields to the content
For example, a zip code field can be much smaller than a field for the name of the city. This will immediately add clarity to the design of the form and the user will know which information to enter here.
Create error messages
We have seen many examples of online forms that do not indicate an error until the end. However, we advise you to display an error directly at the relevant field of entry. It is also best to use a color to indicate an error. Red has become the popular choice of color for incorrect entries.
If you point out an error to the user immediately, they can correct it easily and don’t lose time.
Limit the use of drop-down menus
Be sparing with the use of drop-down menus. The rule of thumb is that they should be used only for questions where there is a choice of five or more answers.
Choices in a drop-down menu always require two clicks, which means extra work for the user. Consider whether a free text field might work for the question, or simply list all the potential answers one below the other. Then the user can put a check mark in the right place.
Use labels and placeholders
To avoid misunderstandings, you should choose a concise label for all fields. You should also indicate if one of the fields is mandatory. This is much more user-friendly than pointing out at the end of the form that all fields marked with an * need to be filled in.
Structure the online form
If you have several fields that belong together thematically, you should combine them visually in one block. This will make it much easier for the user to understand your form. Typically, the entry of address data make up the first block, and then the next block deals with further questions.
Arrange the fields one below the other
For the human eye, fields arranged one below the other are easier to take in. Even if you have the space to put another field in the same line for a short question, like the postcode, you should refrain from doing so.
This would distract the user because people are always consciously or subconsciously looking to the right to read the next question. In the worst case, the data you collect will not be useful.
Tips for an accessible online form design
An important issue in the context of contact form design is the accessibility of your website. If you want to design a new contact form, you would do well to consider people with impairments.
You can make your website more accessible with the following simple steps:
- Choose an appropriate font size.
- Provide contrast, such as black type on a white background.
- Use simple and easy-to-understand language.
Spam protection during input – Friendly Captcha
There is one more aspect you should consider when designing your forms. In order to create effective spam protection, you can resort to various methods of defense against bots and spam messages. While there is little difference in their effectiveness, there is a significant difference in their user-friendliness and accessibility.
From the user’s perspective, all online forms that work with a captcha test are rather inconvenient. The reason being that users have to solve a simple but annoying task, like a mathematical question or marking certain motifs on a selection of images. Moreover, such standard Captchas cannot be considered accessible.
These Captcha tests are used to distinguish whether a request is made by a human or a computer. This is an important criterion of differentiation in the defense against spam messages. But if you would rather not inconvenience the user of your contact form with such a task, you can resort to our fully automated and accessible Friendly Captcha.
Secure for you, convenient for the user
Here’s the good news. Our cloud-based solution is GDPR-compliant and also in line with the Schrems II ruling; therefore you’re on the safe side in terms of data protection. The test, to determine whether contact is being made by a human or a computer, is carried out using a cryptic puzzle. This is solved in the background while the entries are made in the contact form.
The user does not notice this at all. In addition to an appealing and easy-to-understand online form design, you can increase the user-friendliness of your website by using Friendly Captcha. So, it’s important to note that when you deal with the topic of online form design, it is also worth considering how you want to protect yourself from spam messages.
