Oops! We could not locate your form.
For something so ubiquitous, it’s amazing how wrong websites still get forms, and the huge impact a poorly designed form can have on conversion rates.
Forms are an extremely commonplace website feature. We use them for all manner of contact reasons:
They allow people to make contact with you, without the need for you to list an email address in the public domain, which would ultimately end up getting spammed to death.
They’re very convenient for conversion tracking through whichever analytics software you use, and provide an alternative contact method for those who don’t like making telephone calls. A quick form feels like less of a commitment than other methods of contact.
For something so ubiquitous, it’s amazing how wrong many businesses still get them. The impact a poorly designed form can have on conversion rates can be huge.
Here are 11 UX tips to help you avoid mistakes, and improve the conversion chances of your important forms.
It sounds obvious, but it’s amazing how often this is forgotten. Whether it’s for stylistic reasons, or because forms are an afterthought, buttons don’t get the attention they deserve.
Your CTA button should be clear, stand out from the rest of the form, positioned prominently, and be labelled descriptively.
In this context, contrast and colour are important for a number of reasons:
The positioning of a button should be prominent and logical. It wouldn’t make sense to have the submit button above the fields for data collection, as this disrupts the natural journey through the form.
Size is also important. It should be large enough to be clear and to be easily clickable on a mobile device.
Ensure that your buttons actually look like buttons, or you may leave users confused. It can be tempting to try other things for design, but usability is more important. If your users don’t recognise it as a button, it’s failing at its purpose.
The button label should be concise and action-orientated to leave users in no doubt about what to do, and what pressing the button means. Also, don’t forget to use the appropriate classes and labels like Aria for accessibility. Someone using a screen reader device or dictation software should know it’s a button without the visual clues.
Form fields should be of a size that means they are easy to use across devices and screen sizes. This means that they need to be large enough to be finger-friendly for those on mobiles and other touchscreen devices.
It’s infuriating if you want to complete a form on a website in your mobile browser, and the form fields are so small you struggle to click into them or see what you’ve entered clearly.
Ensure spacing is adequate too so that your users aren’t accidentally selecting other fields when trying to click into one. I’ve abandoned forms for this.
Think about how users on different devices will view and interact with your forms, and enter data into fields. For example, is there adequate space for longer format answers where necessary?
Test your forms and test them often, on a variety of devices and browsers. Things break. So regularly checking your full form process is working correctly is important.
If you’re using an API call to feed data into your CRM, then test that too. Also, test that email confirmations or notifications are working properly.
Someone may have contacted you and you missed the notification, and a week later they call – sound familiar?
Have your form submit onto a confirmation page, not a thank you message. Thank you messages are sometimes completely missed, and make tracking more awkward.
Also don’t have confirmations in iframes, and don’t use a page refresh that just takes the user back to the top of the page. These are just annoying at best but can be plain confusing.
Use form states to make it clear to the user which field they are currently in, and automatically activate the first field. This provides a clear signpost to your user of where to start.
Your form may use pretext within the fields, such as examples of how to fill the field correctly. Make sure that this pretext disappears when a field becomes active.
If your forms make use of dropdown fields, ensure there are not too many options. The user shouldn’t have to scroll through a huge list. This can be time consuming, and particularly awkward on mobile.
Also make sure and drop down menus are sensibly organised; whether alphabetically, thematically, or in some other way that makes sense.
Limit the length of your forms and don’t add too many steps. People are weary and don’t want to hand over too much information. Keep it to what you absolutely need.
Numerous studies have shown that conversion rate is dramatically affected by form length.
In wanting to qualify them as a good prospect, it may be tempting to ask them a million questions. Resist this by asking as little as possible, and think about whether there’s a single question you could ask them which will qualify them adequately.
Are your forms compliant with privacy laws in your country, or the countries you operate in. For example GDPR. Are you automatically adding entries to your database?
If so, ensure you are getting explicit permission to do so. Implied consent is not adequate.
Keep your form to a single column. It is better for mobile users, and less overwhelming in general.
On top of this, nearly everybody reads a web page in z pattern. A single column prevents distractions and reduces completion time, as it funnels the users focus.
Prefill form fields like those which use postcode lookups etc, can save your user a lot of time and irritation.
Alongside this, many browsers now offer autofill options, which fill form fields using information a logged-in user has entered into forms previously on their device. So make sure you use field titles that browsers will recognise eg. name, phone number etc.
According to Baymard, 55% of e-commerce sites they reviewed didn’t offer automatic address lookup features.
So there you have it. 11 tips to improve the UX of your forms.
If UX is something you’re looking at in more detail, but you don’t know where to start, we offer an expert UX review for WordPress websites. It can highlight key areas of frustration that your users might be finding, and provide recommendations on how to make the experience easier so that your website converts better.
