Designing an Effective Contact Form

Why Have a Contact Form at All?

While some UX designers might fail to see the importance of creating a contact form and instead opt for a simple email link on the contact page, this can be disastrous for the user experience. How many times have you clicked such links only to have a random email client pop up? Often, these links open applications that users don’t even use on a daily basis. Some visitors just give up at this point and choose a different provider. The cost of completing this interaction has become way too high for what they’d get in return. Others who are more determined to contact a particular business copy and paste the email address into their own email application—but how many would you expect to go to such great lengths?

In contrast, a Web form can substantially improve a Web site’s user experience, rendering the process of contacting a business easy.

Designing a Great Contact Form

What do you need to do to create a contact form that delivers both the desired functionality and a great user experience? Here are five key features of contact forms that motivate users to reach out to an organization and, thus, perform well:

1. Simple design
2. A form of the right length
3. Effective error handling
4. A meaningful label for the “Submit” button
5. Balancing creativity and usability

1. Simple Design

Great contact forms need to strike a balance between visual design and usability. Some designers, when creating a contact form, might focus on its look instead of its functionality. That’s a mistake that can cost a business a lot.

A contact form is not the place for elaborate fonts, dark backgrounds, or other visually attractive elements that distract users and render the process of leaving their feedback or communicating with a company to get information more difficult. When designing a contact form, focus on improving its basic function—collecting information.

Asking for as little information as possible is the best strategy. Consider this: Expedia eliminated just one field from their contact form—company name—and enjoyed a $12-million profit from the improved conversion rate of their contact form.

Simplicity, clarity, a light background, readable fonts, the careful use of color, and functional drop-down lists of suggestions are all critical to the usability of a contact form.

2. A Form of the Right Length

A study from Quicksprout shows that minimizing the number of fields in a contact form has a direct impact on its conversion rate. Neil Patel suggests that including only three fields in a contact form guarantees a 25% conversion rate—and adding even one more field can bring this figure down significantly.

Another study that HubSpot conducted confirms this insight. They analyzed 40,000 of their clients contact forms and concluded that reducing the number of fields from four to three brought an almost 50% improvement to their conversion rate. The trick is to keep contact forms as short and simple as possible.

Reducing friction is a priority, so setting the tab order and making it clear which button sends the form and which cancels it are essential to a contact form’s usability. Another important issue is the length of drop-down lists. The Quicksprout research shows that the fewer options you include, the better. An optimal drop-down list should include no more than three options. Otherwise, you risk the conversion rate’s decreasing as much as 14%.

3. Effective Error Handling

Good error handling is a key issue for the usability of contact forms. Users make mistakes, so we should design forms to handle those mistakes and minimize the damage. You certainly don’t want to make users type everything all over again, as too often happens. This is very annoying, so likely to deter anyone from contacting a business using the contact form. A well-designed contact form clears only those fields that a user has filled out incorrectly, leaving the data in the other fields intact. Error messages must be clear and guide users, helping them to efficiently correct their mistakes.

Of course, preventing errors by providing interactive user assistance is even better. To improve the usability of contact forms, walk users through the process of correctly filling out the form by providing suggestions and examples of correct answers.

4. A Meaningful Label for the “Submit” Button

It’s clear that calling the button that submits a form a Submit button doesn’t motivate users to click it. This generic label just doesn’t do the job. The main function of the label for a call to action should be to remind users what they’ll get in return for contacting a business. Depending on the primary goal of a contact form, you might change the label to Get a Free Demo or Get Your Free Quote, for example. Seeing such a message automatically reinforces users’ motivation to contact a company.

5. Balancing Creativity and Usability

A well-designed contact form fits the Web site’s overall visual scheme, is consistent with the design of other forms, and is an attractive element in its own right.

Finding the right balance between the functionality and the look of a contact form can be tricky. To appreciate how achieving this balance can produce some stunning contact pages, have a look at a collection of examples of truly creative contact forms.

Conclusion

Creating an attractive, user-friendly, functional contact form that motivates users to reach out and makes it easy to communicate with a business can be challenging, but it’s definitely worth the trouble. Contact forms are often the first point of interaction between customers and a business, so a great contact form can strengthen a brand’s credibility.