Forms are an essential tool for collecting information about your website visitors. From simple newsletter subscription forms and contact pages to multi-step checkout processes, forms help you to build closer relationships with your visitors and are an essential part of their journey from anonymous website visitor to loyal customer.

Since forms introduce friction to the visitor journey, Session Replay is the perfect tool for discovering exactly where your visitors are struggling.

What is form abandonment?

Form abandonment occurs when your visitor’s motivation to complete a form isn’t enough to overcome the friction involved in completing it.

Reducing Friction in Forms

Here we’ll take a look at some best practices for form design. As with all advice related to making changes on your website, we suggest always watching Session Replay before and after you’ve made changes to check that you have improved the experience for your visitors.

Keep it Simple

Unnecessary fields, whether mandatory or optional, make forms more time consuming to parse and complete. The perceived friction of a lengthy or complex form may even be daunting enough for your visitors to want to abandon it before they begin completing it.

Let’s take the common example of a newsletter subscription form where you want to capture your visitor’s email addresses. Since this is often your visitor’s first point of contact with your business, it’s important at this stage to only ask for enough information to enable you to email them.

The only essential field in this example is their email address. A nice-to-have field would be their first name, enabling you to begin your emails by greeting your subscribers with their name rather than “Hello Subscriber!”. And that’s it. First name and email address is really all you need for a newsletter subscription form.

As you send your subscribers helpful content, relevant updates, and promotional offers, you have the opportunity to build a relationship over time. Once you’re providing value on a regular basis, using forms to find out more about their preferences, interests and experiences will not be such a big ask.

The same applies to your contact page, order form page, checkout process. Keeping forms brief will reduce abandonment, increasing conversions.

Stick to a single column layout and place the easiest fields to complete first

Forms that span multiple columns are more difficult to parse and complete. Keeping labels and form elements stacked in a single column helps your visitors move from one field to the next without having to do the mental gymnastics of assessing which order you intended for them to complete the form.

Placing the easiest fields first helps with form completion because by the time your visitor gets to the more difficult fields, they have already invested time and energy and therefore will be more motivated to finish what they started.

Use inline form field validation with clear error messages

Inline form validation means that rather than waiting until the entire form is submitted to check for problems and then displaying a list of errors, each field is validated as your visitor completes it and any error messages are displayed inline, one field at a time, while your visitor’s focus is on that field.

Research has shown that inline form validation makes forms quicker to complete and although error messages do introduce friction, that friction is minimised when broken down into individual messages.

“Our participants were faster, more successful, less error-prone, and more satisfied when they used the forms with inline validation.“ — Luke Wroblewski

Use a a task specific text for your Submit button

The default text for a HTML form submit button is “Submit”. This is rather technical sounding, vague and not related to the task at hand. Instead of sticking with the default text, use a task specific phrase to describe the result of your visitor’s task. Some examples of task specific button text:

• Subscribe
• Create Account
• Register
• Pay Now
• Send message

Reviewing Your Forms in Session Replay

Session Replay often provides many unexpected insights when watching through all sessions in chronological order. However, we have a more specific task at hand right now and that is to zone in on sessions on pages with forms.

To do this, go to your Visitor Activity page and select the Filters button to expand the Filter options. Select the Page filter and type in the name of the form page you wish to review. In this example we’re using the contact page. Your Visitor Activity page will update to only show sessions that included a visit to your contact page.

How do you calculate abandonment rate?

You divide the number of completed transactions by the total number of shopping carts with at least one item in them. You then multiply the result by 100 to get the percentage. This gives you the percentage for successful checkouts, if you then subtract it from 100%, you will get the abandonment rate