How To Optimize Online Forms For Conversions

Online forms are an essential part of any website that wants to collect information from its visitors. However, if not designed correctly, they can be a major source of frustration for users and lead to low conversion rates.

In this article, I will provide you with tips on how to optimize your online forms so that you can increase your conversion rates and improve the user experience.

Before we get to the specific tips, a few words on expectations management:

Some optimization tips are no-brainers.
For instance, it’s a well researched fact that the majority of all page views happen nowadays on mobile devices. Using forms that are not mobile responsive would cost you precious form submissions.

On the other hand, some optimization tips are heavily dependent on your own context.
An example:
A general good practice is keeping requested information to a minimum.
Following this approach, a larger B2B business might decide to use a single input field in their contact form and ask for the email address only. But what would this lead to?
Probably a lot of irrelevant requests that would clog up their sales managers’ pipelines, wasting their time when trying to follow up and qualify such leads, and ultimately cost them valuable customers due to long response times. Not to mention having false signals in analytics & performance marketing systems, and optimizing for wrong audiences.
This kind of businesses would benefit from using additional form fields that would allow them to prequalify leads – fields like Organization name, Department, Job title & Message – and redirect to different thank you pages or trigger different form submission tracking events.

The last type of optimization tips are those with an unclear success rate.
It’s optimizations that are usually subject to the personal taste of users (like colors, layout, tone of voice…) or heavily influenced by other factors (e.g. informational or visual complexity of the page, customer journey stage of the user…).
One simply might not be able to predict the impact (especially without deeper insights into customer behavior and motivations). The only way forward is experimentation.

The following tips are all more or less no-brainers, but still, don’t forget to consider your own context and measure & evaluate the efficiency of your executed optimizations.

Mobile Optimization Best Practices

Make sure your forms can be rendered without issues within the visible display area. Follow responsive design practices and have your forms optimized for mobile devices.

The worst kind of fail that can happen to you is when your forms are partially rendered outside of the screen (especially the submit button) and it’s impossible for the user to zoom out or pan.

But it’s not just about flawless rendering. Be mindful of the specifics of user interactions on mobile (touch-based) devices. Mobile visitors use fingers, not mouse pointers.

Register clicks on the whole input element area (not just the text part), keep enough distance between input elements, be mindful of different on-hover behavior on mobile devices (there are basically no hover-interactions on mobile). It’s also impossible to use exit-intent triggers on mobile devices.

Always test your forms on all device categories (desktop, tablet, mobile), in both horizontal and vertical modes, as well as in major web browsers (Chrome, Safari, Firefox, Edge).

Website Placement Optimization

Generate enough traffic to your forms by placing them on important pages and linking to them from less important ones.

Consider using pop-up or slide-in forms to cover more pages (triggered automatically after some time on the site or page, at a certain scroll-depth, or on exit intent), or in cases when an embedded form might be too obtrusive (triggered by a button click).

At the same time try to avoid having multiple embedded forms on one page, to prevent choice paralysis. Or at least use visual hierarchy clues to steer the user towards the main form (position on page, form surface area size, contrast & color dominance, distance between forms).

On-Page Placement Optimization

Place your forms as close as possible to the top of the page, ideally in the above-the-fold area (the area that’s instantly visible without scrolling). Half of your page viewers might bounce before they scroll down two or three screens.

Of course, nevertheless be mindful of the overall page design (does the form visually fit its surroundings?) and of the informational flow (have the users had the chance to view all supportive arguments to convince them to fill out the form?).

Visual Design Optimization

Your website visitors need to notice your forms and recognize them as such. Give your forms enough attention by making them stand out. Use well recognized form element design practices to signal that this is a form intended for user input.

Browser Autofill Optimization

Allow your visitors to pre-fill your forms with just one click, by optimizing your forms for browser autofill functionality.

Functional Optimization

Make sure that your form works on the basic technical level = collects and sends data where it’s supposed to go, and triggers specified follow-up processes & automations (like thank you page redirects or email automations).