20 Simple Ways to Improve Your Contact Form and Consequently Generate Sales Leads
Web forms are “the last and most important mile in a long journey.” (Luke Wroblewski).
Despite their significance, web forms are often poorly though out so “closing the deal” via them is something that happens on rare occasions.
Designing a user-friendly contact form
An average contact form converts only 1% of visitors which means that contact forms are by far the worst-performing type of web form businesses use.
These statistics can be both – inspiring and uninspiring. Why, you wonder?
There are two ways to look at this problem either contact forms are trash OR almost all brands (more precisely, designers) are failing miserably when designing an appropriate contact forms for their type of business.
We can safely say that the latter is true. Contact forms often don’t get the attention they truly deserve and the consequences are easily noticeable in brands ability to generate sales leads.
There are multiple ways how to make good contact form, and in this article the focus will be on, in our opinion, the most important ones.
1. Follow minimalist approach (if possible)
The classical minimalist approach is a good idea when you need only few information from a user such as name, email and message. Try to avoid optional fields when you can. On the contrary, limit it to one or two optional fields and be explicit about it (more about it later).
When you follow minimal approach, you are following Hick’s law – one of the laws of UX. Hick’s law say that “the time it takes to make a decision increases with the number and complexity of choices”. Therefore, it is important to simplify choices for the user by breaking down complex tasks into smaller steps to reduce overwhelming users.
2. Make form attractive and consistent
When we find someone attractive, we usually attribute other positive qualities to them… in social psychology this is called the “halo effect”. It is phenomenon whereby we assume that if a person is good at doing A thing, that they will be good at doing B,C or D thing. Something similar happens in UX. If a website is beautiful and intuitive, we often believe that those interfaces are better, faster and we tolerate errors if they occur on stunning screens. When it comes to form filling, a task that causes annoyance and frustration, this is crucial. This is also known as the aesthetic-usability effect.
It is not enough for a contact form to be attractive, it also has to be designed in consistent manner. Users are often bored or tired and they don’t want to think too much so it is important to make a form undeviating.
3. Familiarity is your friend
When there are no surprises you know what to expect. Familiarity helps when it comes to making a beautiful and functional contact form as well. Check boxes, radio boxes, dropdown fields – they do what they say. When user sees one of those fields they instantly know what they are being asked. This means that web form looks familiar, users will feel comfortable when filling it out and it is more likely for a user to complete filling out the form.
Familiarity is associated with so called Jakob’s law which states that the “users spend most of their time on other sites”. This means that users prefer your site to work the same way as all the other sites they already know. In other words, users will appreciate if your website looks and works similarly as other websites they visit.
4. The multi-step approach
As previously said, contact forms should be as simple as possible… but what to do when you need to use more than four or five fields? In these situations you can follow the multi-step approach. Instead of showing all the fields at once, the multi-step forms create illusion to a user of needing to fill in only one field, making the initial effort less challenging. This means that more users will fill out your contact form.
You might think… ”multi-step approach looks nice but does it actually work?”. Yes, it really does work – and not just for contact forms. It is proven that these kind of forms get up to 300% more conversions. There are numerous reasons for this: first impressions for a user is less overwhelming, progress bars encourage users to complete the form and you can ask delicate questions at the end of the form when user has already filled out majority of the form and don’t won’t their effort to be in vain. It is proven that users tend to stay more focused when answering one question at the time.
When using multi-step approach don’t forget to use progress bar. It encourages completion and reduces anxiety for a user. Progress bar gives a timeframe which always provides a certain relief.
5. Does size matter?
It does. A Baymard Institute usability study found out that if a field is too long or too short, users start to wonder if they understood the label correctly. This is especially important when we ask a user to provide some unusual data or technical label like CVC (card verification code).
This means that designers should always adjust the length of fields so they are long enough to contain all the characters, but not more than that. Also, there are some fields that should be as flexible as possible. For example, first name field should be flexible since there are variety of names when it comes to length.
6. Single-column layout
Avoid so called “zig-zag” field placement. Eye-tracking tests have shown that users spend more time jumping from one column to another and have trouble to identify a specific field in the form. Instead of this, the one-column design makes it easier for a user to actually complete and understand a contact form better.
7. Aligning when creating contact form
University of Basel researchers have found out that left-aligning is better option than centre-aligning since users eyes don’t need to jump across the page.
8. Grouping related information
When the data is grouped on any kind of web form, it seems more attractive and intuitive. This helps in situations when user wants to change certain information because then he/she can simply remember in which section (e.g. personal information, contact information etc.) that field was.
9. Highlighting optional rather than required field
Often, there are a bunch of mandatory fields instead of few optional fields. Since this is a widespread practice, there are numerous forms with few too many red asterisks. Also, it is important to highlight that red colour cause negative associations since it is commonly used for error messages text, so try to avoiding using it for this purpose.
It is proven also that asterisk are not clear for all the users. Simple solution is to avoid such misapprehensions with usage of short text for optional field (and as previously mentioned, try to limit optional fields to one or two of them).
10. Usage of autocomplete option
There are numerous fields that can be autocompleted: email, phone, city, postcode, etc. Every time you have an opportunity to make users life a bit easier, they will appreciate it and your conversion rate will unquestionably increase. Despite autocomplete suggestions being common they often perform poorly with end-users. To achieve a high-performing autocomplete design try to avoid scrollbars, reduce visual noise, highlight the active suggestion and keep the list manageable.
11. Custom input fields
Users love different representation of data fields. For instance, it is good practice to use a radio button for gender types or designing obvious fields for mobile numbers, dates, etc.
In this context it is important not to forget on rules regarding input format:
- length of the field needs to reflect the length of the answer (as previously mentioned in rule number 5)
- usage of placeholder especially if the label is ambiguous (CVV)
- highlighting minimum and maximum input if needed
12. CTA buttons
When creating CTAs, use brief and clear names for them to decrease the path to completion. The primary purpose of this button is to catch users eye and to instantly understand what button he/she should use to perform an action. CTA buttons should be the same width as fields. This way users will be certain where the CTA is located.
13. Form validation
Designers should always predict form validations since this is one of the most important form functionalities. Basically everything should be designed, from error states to help text. Users should easily understand these messages. Form validation should be conducted in real-time primarily because it is quite annoying when after submitting the data, user find out that something has gone wrong.
Validation should not be too strict since it is a bad experience for users and it can cause negative impact on your business.
14. Avoid using placeholders as the field labels
Generally, the role of placeholder is to give hint on what type of information is required for the particular field. Some designers started using placeholders as labels for aesthetic reasons, which is ok if contact form consist of less than five fields. On the contrary, this practice can be really annoying if user forgets the purpose of the field and needs to delete the input to find out the purpose.
15. Highlighting active fields
Active areas of a contact form should be highlighted by changing the border colour and size of the field. This way users can stay more focused on one question when filling out the form.
The same concept can be used for errors as well.
16. How to ask for sensitive information
It is important to know how to ask for sensitive information since a lot of users became increasingly concerned about our privacy when we need to give a certain personal information. If you must ask for that kind of information, be sure to explain why it is needed by using support text below the field. These text messages should be phrased incomprehensible manner.
17. Clear or reset buttons
The situation in which a user needs to clear the entire form is quite rare. More often user accidentally presses clear when looking for the CTA button. When this happens, users get really irritated and usually will not fill in the form again. For this reason avoid using clear or reset buttons on your web forms.
18. Mobile friendly contact forms
The average adult finger pad size is about 10mm wide. In web terms, this is approximately 48 pixels. This means that designers need to make sure that fields have a height of at least 48 pixels. Also, the text should be at least 16 pixels in size. This is crucial if we want to accommodate for people with impaired vision (very common in older population).
19. Form order must be logical
Information should be asked logically from an average user perspective. For instance, it’s unusual to ask for someone’s address before asking for their name. This advice is connected to so called Jakob’s law which was mentioned earlier when we talked about familiarity. If the users are asked to give information in a similar order as they are asked on other sites they visit, a chance that the users will fill out the form increases. Consequently, the brands ability to generate sales leads will increase.
20. Consider the colours
Did you know that 90% of our initial judgment of a website is based on a used colour scheme? You don’t need to be a designer to figure out which colour schemes work best. There are a lot of handy programs such as Adobe Color, Coolors, Color Hexa, HTML Color Codes, Paletton and others. These programs will help you choose colours that reflect your business image.
We are all aware of the fact that filling out the forms is not anyone’s idea of fun, but it doesn’t mean they have to be designed poorly.
There are a lot of things that designers can do to make the user experience a bit better for the users. Probably the most important thing is to keep attention to detail and to avoid ambiguity.
By following these tips you’ll provide your visitors with an intuitive, friendly and positive experience that helps you boost conversions.
Let us know if you have any questions or experience regarding web forms you want to share with our team.
24 Feb 2020Follow These Post-Launch Activitiest To Have a Successful WebsiteMarketing
As we mentioned in the previous article, investing in a new website or website redesign is a big business decision. We tend to invest our money in the website when we are counting on the return on investment (famously known as ROI in the world of marketing) through increased customer experience and consequently measurable […]
12 Feb 2020What is The Difference Between Template and Custom Templates? Which One Should You Choose?Development
When you decide to invest your money into a new website, important questions arise: “Should I invest my money into a custom-made or template-based website? Which one is more suitable for my business and what are the differences?”. It is not an easy task to answer these questions since everyone’s business goals and audience are […]
27 Jan 2020Challenges of translating a design to code, learn about the essentials of design handoffDesign
Have you ever experienced a scenario where after presenting the new design (or brand new features of an existing design) everyone in the room is quiet…and then…developers speak up: “Do we actually need to make this?”, “This will take too long”, “We haven’t done this…EVER.” After the presentation, the developers are frustrated because they […]
20 Jan 2020Why should every designer prototype and which prototyping tools to useDesign
A popular phrase by IDEO company says that “If a picture is worth a thousand words, a prototype is worth 1000 meetings.” Designers are bound to design websites, web applications and all kinds of different products based on clients’ requests. Since those requests are not often clear and solutions are not always obvious, this is then followed by […]