An experimental Drupal 8 module: Inline Form Errors

Many sites use web forms on their web pages. Usually, it’s registration forms allowing users to create personal accounts. People fill in the fields with some basic facts about themselves, and then go from being site visitors into regular customers. If you are a web resource owner and pay attention to the potential clients of your company, read this article about web form usability tips. There we describe how a web form should be designed to provide a positive user experiences. One of these tips concerns errors. Today we are going to focus on them and present a module that will be helpful in avoiding them.

Why are form errors worth your attention?

When visitors to your site see web forms (often in modal windows), they are unable to see the rest of your website until they enter required data, for example, a login and password or some personal data for registration. Most people hate this step and want to get access to the main pages as fast as possible, because they came to your site to find out something new for themselves, not to spend time typing information they already know. Thus, it’s important to make the process of filling in web forms as uncomplicated as possible. Otherwise, it may discourage users from continuing to interact with your web resource. They may prefer to get the information they need somewhere else and leave your site with a negative user experience.

When users input required data which is then sent to a server for processing, some inaccuracies may occur. They must be quickly detected. In such situations users want to be provided with an understandable explanations of what’s wrong and, preferably, with an advice as to their further actions. Such messages must be placed properly, showing exactly which fields need correction and in what way.

You must have encountered non-field errors or “non-contextual” messages in red boxes. They are situated on the top of web page and contain information about fields that are below, naming which one (or several) of them is not filled or filled with invalid characters. After reading non-contextual form errors, you have to scroll down the page to find the field with a red border around it. Many users found this time-consuming and a bit annoying. To improve this situation, use an experimental Drupal 8 Inline Form Errors module.

How can Inline Form Errors module help?

The module Inline Form Errors (IFE) allows locating form submission error message inline with the fields. It provides three such options:

• Leave the messages in place. This means that the error message is copied and put inline, while the original one set by Drupal remains in the same place.
• Show an alternative message. The original report on the top of the page is replaced with a generic phrase (e.g. 'Please correct all errors.'), which can be set in the configuration page of this module. The original note is placed inline.
• Remove all messages. This option clear away all notifications from the top of the page and move them inline with the form items.

Sure, the most desirable message is the one notifying the users that there are no errors at all. However, sometimes something goes wrong, and the system must report that. Check out whether in your web resource these reports are set in a convenient way and in context, inline with the field that needs users attention at the right time. If not, make a constructive solution to download the Inline Form Errors module. If you have any questions as to its installation, or you want to test it out on your Drupal site, contact our Drudesk team.