11 tips for optimizing web forms

How to optimize web forms and avoid mistakes when creating them.

Online forms are among the neuralgic points of a website. Whether form pages in the ordering process or contact forms the design has a great influence on the conversion rate. But what is the best way to optimize online forms and what mistakes should be avoided?

The 4 steps of online form optimization

1. Understand the user’s perception

As a first step, store operators need to understand the perception of their visitors on the form pages. A good way to do this is to use a mouse tracking solution. This is because scientific studies have shown that mouse movement can be used to infer eye movement and thus user perception.

With mouse tracking, the operator can, for example, condense visitor sessions into overlay maps and display them directly on the form page. This allows them to see at a glance what arouses visitors’ interest on a form page, which sections of the form they perceive, what they actually read, or where they scroll to.

2. Analyze forms correctly

In the second step, the store operator should analyze the form in detail. The optimization potential of a form can be easily identified by the number of visitors who started typing but did not successfully submit the form. Further optimization potential can be determined using key figures such as the delay until the start of input, the interaction time per field, and the abandonment rate per field.

In the event that most visitors abort without entering data, key figures such as scroll depth, perception focus, and dwell time in the individual form sections are also relevant.

3. Derive optimization requirements

If website operators intelligently combine their findings in a third step, they obtain concrete starting points for optimizing the form. For example, if only a few visitors start the form entry, mouse tracking must be used to determine the cause. If the user searches primarily in the header area and submits the form without any data at all, there may be a lack of information about how many more form steps follow. If, on the other hand, many visitors interact with the form but do not successfully submit it, the task is to attract the users who are already engaged with the input. To do this, you need to analyze the individual form fields in detail: Where do users hesitate? Where do they frequently correct entries? Where do they abort?

4. Optimize and measure improvement

After implementing the optimization measure, the website operator must then check the effect and further optimize the form if necessary. After that, the optimization cycle starts all over again, because even a form that is optimal today must be checked again in a few months since user requirements and expectations can change quickly.

The 7 most common mistakes with website forms

1. Not optimized for visitors’ browsers

So it happens that the order button slips under the scrollbar and is not seen or visitors have to scroll back and forth. This increases the time required to fill out the forms and thus the likelihood that users will abandon the ordering process. In principle, store operators should use a mouse tracking solution to analyze exactly which areas of the ordering process are visible to the most visitors. Important content, actions, banners, or call-to-action buttons can thus be placed on the page in a targeted manner.

2. Too many mandatory fields

As a general rule, only data that is indispensable for order processing should be requested in the critical phase of an order process. This makes for shorter and clearer forms and simplifies the ordering process for visitors. Additional information can be requested after the order has been submitted as optional details or separately by e-mail. Online retailers increase the willingness to provide information by offering incentives such as coupons or extra services. If you would still like to enter the data directly in the order form, it is advisable to include a small note, which is displayed via mouseover, for example, and which explains why certain data is being requested. For example, for one of our customers, a simple note to the phone number field “Only for problems with delivery” reduced the field abandonment rate by 90%.

3. No possibility to go back

If visitors want to correct their entries again, they often lack the option to do so. That is, there is no “back” button with which they can navigate to previous order steps. This leads to frustration and ultimately often to the cancellation of an order process. Store operators should therefore make sure that they not only make the ordering process short and clear but also user-friendly. To this end, it is advisable to give visitors the option of jumping back to previous steps at any time and keeping all the data entered so far there, so that they do not have to enter it again.

4. No keyboard navigation

Visitors no longer use only the mouse to navigate. Navigation using the tab key on the keyboard is now part of everyday life for many Internet users. The more negative is then the perception if when using the Tabulator key one does not go from one form field to the next, but the cursor jumps crosswise in the online form. Store operators can easily circumvent this problem by controlling the order of the individual form elements by assigning the “tabindex” attribute in the HTML element of the form field.

5. Nonsensical default form values

If defaults are done well, they drive the speed of completion. This avoids errors and increases conversion. In contrast, nonsensical defaults are a deterrent, for example, if today’s date is used as the return date for a vacation in Mallorca, or even worse if this does not change automatically when a departure date in the future is selected. Good examples recognize the potential origin of the visitor based on the IP address, for example, and automatically pre-fill the fields accordingly.

6. Deterrent error messages

Good error messages should not be red flashing and a deterrent, but direct help with examples in the context of the error. Ideally, they are displayed in the immediate vicinity of the field with the incorrect entry. In addition, it is advisable to show why the entries are necessary in the case of fields that have been left blank. By the way, you can also avoid error messages by checking each individual form entry “on the fly”, i.e. when jumping to the next form field, and confirming it with a checkmark.

7. Provoke incorrect entries

If there is an accumulation of incorrect entries for a particular form field, this may indicate incorrect or ambiguous filling instructions. For example, the simultaneous presence of the form fields “coupon code” and “promotion code” can lead to confusion. Visitors who receive a promotion code from a newsletter may enter it under “Coupon Code” or vice versa. In this case, a common field for entering the voucher or promotion code would be a solution. Similarly, the checkbox for confirming the terms and conditions is often placed too inconspicuously and thus overlooked by visitors. To prevent error messages from arising in the first place, incorrect user entries should therefore be recorded with an event tracker and then evaluated and optimized.