Views
Online form-filling is notoriously difficult. It’s bad enough when the contact form is complex by nature – think insurance applications and mortgages – but when all you want to do is get in touch with a company (possibly to give them your money, no less) then it shouldn’t be this way.
How many times have you given up on a form because it’s ‘too long to do right now,’ or when it ‘doesn’t make sense,’ or worst of all, when it just ‘doesn’t even work.’ These examples are exactly why the UX of your contact form needs to be as smooth as possible to ensure you’re not hurting your users’ opinion of your brand, and equally, not hurting your bottom line.
We’ve put together our 10 top tips to help you refine your contact form into the lean, mean, lead-generating machine it should be, simply by making it easier for users to get through.
1. Ensure your form fields are vertically stacked
When you have several form fields, stacked in multiple columns as opposed to in a single column, users are forced to apply extra logic to understand if they should complete the entire left column first, or work right to left in horizontal lines. This extra thought seems minor, but forms with a clear path from one field to the next are far more engaging and reduces the chances of user friction if a user, for example, automatically begins typing their surname after their first name, only to find they’ve accidentally navigated to the address field.
The more linear the form appears to be to complete, the less cognitive energy users need to spend on filling it out.
2. Field titles should sit above the form field, not to the side of it
Aligning the title of a form field to the left of the field may seem logical, but when you’ve got different length titles, it can quickly appear complicated and untidy. Because the spacing will be different, you’d need to either align everything in line with the start of the longest title (giving shorter titles huge spacing before the form field appears) or align backwards from the form field (meaning each title starts in a different place).
Putting the titles above the relevant form fields will ensure the form appears tidy, professional and leaves no room for misinterpretation about which title applies to which field.
3. If there are less optional fields than mandatory, mark the optional ones with an asterisk – or vice-versa
An asterisk alongside a form field means that the field is either mandatory or optional – but which one should it be? Whilst some people reserve asterisks exclusively for optional fields, the more of these fields you have, the more the asterisk becomes less of a differentiator, and more like just another part of the form layout. Best practice is to go with whichever you have least of – if you have 5 fields, 1 of which is optional, then simply flag that one and leave the rest as they are.
The presence of an asterisk should be an irregular occurrence, so only apply it to the most irregular form fields you have.
4. Explain why you need to capture less-relevant data
If you’re filling out a contact form, certain types of data are expected to be entered: a contact and/or company name, email, phone number are all understandable enough, but what about postal addresses? It might not be immediately apparent to a user why you’d need that information at this stage, but perhaps you need it to ensure they are in your service area, for example? A simple line of explainer text with the field will ensure users know the information you’re asking for is relevant, and that you’re not just data-mining them.
Users will be far more trusting if you are transparent about why you need the information you’re asking for, and therefore less likely to leave your contact form unfinished as a result.
5. Lead with the postcode and utilise the postcode search function
In the age of the postcode search, there is no real need to force users into manually entering every line of their address. Not only does it make the form longer than it should be, but it makes the time to completion much longer and much more likely to encounter errors, than if users only have a dropdown list of addresses to select from.
It’s easier for both you and your users to automate this step and keep the time to completion as low as possible.
6. Form field lengths should reflect the length of the answer required
If a field is asking for your email address but is not long enough to include it all without having to scroll, it has not been properly optimised, and forces users to scroll using their keyboard to check for errors. Similarly, having fields that are far too long for the input required makes users feel as if they’ve missed something out, and can cause unnecessary doubt during form completion.
Make sure the length of your form fields is reflective of the length of the answer you expect, and your users will find it easier to trust and correct the answers they’ve entered.
7. Use in-line validation after users leave the relevant field
Letting users know when they’ve gone wrong is a key part of any UX, least of all for contact forms. However, delivering the right error message at the right time is crucial to making this seem more like a nudge back on track, rather than an annoyance. In-line validation (checking the field is correct as users progress through steps, instead of waiting until they click submit) is an easy way to do this. However, form fields that validate as users are entering their details (think email fields that tell you you’re missing an ‘@‘ before you’ve even reached that point of your email address) are too extreme the opposite way.
Wait until users have left a field before validating it, interrupting them whilst they’re entering their contact details is the last thing you want to do.
8. Display errors around the field causing the issue
Whilst on the topic of error messages, users need to know where they’ve gone wrong and how they’ve gone wrong in order to fix it. Generic error messages such as ‘something went wrong’ gives users neither.
Instead, highlight the field that’s causing the issues, and give them a quick, but specific description of what the issue is so they can correct their mistake quickly and easily.
9. Allow keyboard navigation between fields
Making your forms accessible is just as important as making them efficient. If your fields cannot be navigated using a keyboard, and require a mouse or touchpad input, you are excluding users that are unable to use these input methods. These could alienate a user that is completely sold on your services and ready to spend money with you, simply because they cannot easily submit a contact form using their input methods on your site.
Remembering that your form has to be functional, for all of your users’ accessibility needs, will give everyone the opportunity to easily complete your contact form.
10. Make sure the keyboard on mobile devices is the best one for the job
If the majority of your traffic is on mobile devices, then factoring in the different input methods these devices have is an easy way to make your form stand out from the rest. If you’re asking for a phone number, for example, don’t present users with the standard qwerty keyboard layout – instead, use the numeric keyboard, where all the keys are relevant to the input type. The same applies for the email-based keyboard, with shortcuts to ‘@’, ‘.com’ and ‘.co.uk.’ all easily accessible.
Mobile devices give you far more flexibility for input than desktop devices, so making the most of this will keep your contact form easy to use across all devices.
These are just a few ways to get started with optimising your contact form, but there are many more factors to consider across the entirety of your site to ensure you’re generating the most business from your visitors as possible.
Want some help with improving the performance of your website? Get in touch here
Want better?
Let’s talk
