Top 10 UX tips to help your contact form convert more leads

1. Stack your form fields vertically
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. Although this seems like a minor change, forms that flow 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 last name after their first name, only to find they’ve accidentally navigated to the address field.

2. Field titles should always be above the form field
Highlighting the form titles above the relevant fields will ensure the form looks tidy, professional and leaves no room for misinterpretation about which title applies to which field. 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.

3. Mandatory vs Optional form fields
The presence of mandatory or optional information should be an irregular occurrence, so only apply it to the most irregular form fields you have. This means that you would either flag optional information, or mandatory, whichever you have less of. While some people use asterisks exclusively for optional fields, the more of these fields you have, the more the asterisk becomes less of a differentiator, and it just blends into another part of the form. The best practice is to go with whichever you have least of – if you have 5 fields, 1 of which is optional, we advise you highlight that one.

4. Explain why you need to capture less-relevant data
Certain types of information are largely anticipated when filling out a form e.g. name, company name, email, cell number etc but some data you request could be confusing. Why do you need a user’s postal address at this stage? Maybe you need it to ensure you operate in their service area, for example? A simple one liner explaining why you need that data will ensure users know the information you’re asking for is relevant, and that you’re not just capturing as much data as possible on them. The more transparent you are about why you need that information; the more users will be far more trusting and therefore more inclined to complete your form.

5. Utilize the zip code search function
Don’t force users into manually entering every line of their address if they don’t need to. This firstly makes the form longer than it should be, but it makes the time to complete much longer and increases the likelihood of errors, than if users have a dropdown list of addresses to select from. Automate this step, decrease completion time and watch you form conversions increase!

6. The length of the form field should reflect the length of the answer required
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 correctly input the answers they’ve entered. By ensuring the form is optimized in length, it will prevent users having to either 1) scroll, using their keyboard, to check for errors or 2) think they’ve not provided enough information as the field its twice the length it should be. Unnecessary doubt could lead to unsuccessful form completions.

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. But when you deliver that notification to the user is crucial. Having the error message flag at the end can make it seem more like more of a big deal. In-line validation (checking the field is correct as users progress through steps, instead of waiting until they click submit at the end) is an easy way to highlight the information in a timely way.

But…be patient…validating as users are entering their details (e.g. you’re missing an ‘@’ before you’ve even completed filling in that part of the form) could be too intrusive and frustrating. Our top tip: wait until users have left a field before validating it, interrupting them while they’re entering their contact details could prevent them from completing the form.

8. Display errors around the field causing the issue
Make it easy for users 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’ annoys users. Instead, highlight the field, be informative, of what the issue is so they can correct their mistake quickly and easily.

9. Allow keyboard navigation between fields
Accessibility = efficiency. 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. This 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 method of choice on your site. Make sure you’re accommodating to those with accessibility needs.

10. Ensure the keyboard on handheld devices are the best ones for the job
Where is your traffic coming from? If users are using their mobile phones mostly to view your website, then factoring in the different input method gives you a way for your form to stand out from your competitors. If you’re asking for a phone number, switch to displaying the numeric keyboard, where all the keys are relevant to the input type. This also goes for email-based keyboard, with shortcuts to ‘@,’ and ‘.com’ all being easily accessible. Mobile devices give you far more flexibility for input than desktop devices, so making the most to make conversions nice and easy for your users.

This is only the start – if you would like more advice on how to optimize your contact form and website to increase conversions, get in touch.