Top

Designing an Effective Contact Form

May 18, 2015

Business owners who think that contact forms are nothing more than an easy method of communication that they provide to users of their Web site are making a huge mistake. Contact forms should not be passive elements of a Web site that gain meaning only when visitors have a problem and use them to find out an easy way to solve it.

Great contact forms inspire people to reach out and play an active role in a company’s online presence. But what makes a contact form really effective? What are the key features of the best contact forms? Read on to find out.

Sponsor Advertisement
Continue Reading…

What Makes a Contact Form Effective?

UX designers who take extra care in designing contact forms realize a wide range of benefits. A great contact form should be a priority for every Web site design project because contact forms

  • generate new business opportunities
  • attract talented workers who are looking for a job
  • help prospective customers to contact a business
  • open opportunities for new partnerships
  • potentially capture new sales leads
  • improve the customer experience

With all of these benefits, well-designed contact forms can be mission critical for the vast number of companies building an online presence through their Web site. Investing resources in building a contact form that realizes all of these goals provides great value and, thus, return on investment.

Supporter Advertisement
Continue Reading…

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. 

Champion Advertisement
Continue Reading…

Content and User Experience Designer at Ninefold

Sydney, New South Wales, Australia

Monique RiversMonique is a passionate Australian blogger. She believes that the key to resolving even the most difficult business communication problems and reaching a successful conclusion is a positive and attentive approach to communication. This strong conviction has led her to become involved with a number of companies and businesses, both across Australia and overseas, where she helped alleviate communication problems between customers and employees and improve the customer experience. With more than eight years of experience, working for various organizations, on a variety of marketing projects, and writing a plethora of articles pertaining to Web design, business development, and user experience, Monique still stretches herself everyday, seeking opportunities for growing and improving.  Read More

Other Articles on Web Form Design

New on UXmatters