Web Design and SEO Blog

Mar201728

Designing Contact Forms to Increase Sales

by Mira Brody in Content, Design, Development, Tools & Tips

Online contact forms: best practices

The contact form on your website is an important, interactive portion of your site, and can be designed to serve existing clients as well as generate new leads. A clunky or inoperable form can annoy, and even turn business away entirely. We have put together a short list of recommendations that your business can use to evaluate your own forms.

Only ask for what you need.
Many contact us forms go overboard with questions, overwhelming the user — take this FedEx contact form for example. Not only does asking for personal information threaten their privacy, but just as people will leave a store with long lines, they will abandon your contact form if it asks for too much of their time.

Solutions:
  • Only ask for the information you need.
  • Minimize the number of questions or fields being presented at once.
  • If you do need additional information, break the form down into multiple steps or groupings, as we did on our own contact form.

Keep form labels visible.
A form label, or placeholder text, tells the user what information you need from them. If this label disappears once the user starts typing, so does their point of reference; they may then be forced to delete their work in order to double check what the placeholder said.

Solutions:
  • Make sure your labels are visible, always.
  • A hybrid adaptation of this, as implemented on Bozeman Websites, turns the placeholder text into a form label when the user starts entering data (fancy animation is optional).

Error states on contact forms.
Error states on contact forms.
A mistake shouldn’t be a setback.
Some information on your contact form might be required. Indicate any required fields with an asterisk or notation. Be sure to preserve your users' progress: do not offer them a "reset" button, and be sure to retain the information they've already entered if they submit a form that needs correction. Nobody likes being forced to start over. The form to the right is a good example of error states causing unnecessary friction — all of the errors are listed at the top, separated from the locations where the errors occurred.

Solutions:
  • Place error states next to the field they relate to and give specific instructions: “field left blank” vs. “invalid email address.”
  • Scroll the user’s webpage to the first error so they can quickly make edits without having to spend time searching for their mistake.

Be generous in accepting input.
Although you may want information formatted a certain way, it is advantageous to avoid overly strict validation. For example, a lot of address fields do not allow special characters, yet some addresses have fractions or punctuation in them, such as “123 1/2 West First Street.” Preventing the user from entering their legitimate address is frustrating. Likewise, phone numbers or dates are often stored in very specific formats, but a generous validation model can keep this from being a headache — whether your users input 406-555-5555, 4065555555, or (406) 555-555, the result should be the same.

Solutions:
  • Give clear instructions. If you need a full, 10-digit phone number, say so instead of creating an error without warning.
  • Format things like phone numbers, credit card numbers, and social security numbers automatically so the user doesn’t have to guess where you want hyphens or parentheses.
  • Look for opportunities to be less specific when validating. In the case of a phone number, for instance, "exactly 10 digits" may be less useful than "at least 10 digits" — what if your user was attempting to include their country code?

Build Trust Through Good Communication.
Your form design can speak volumes about your intention. Asking for sensitive information can make users nervous about what will happen when they submit the form. How can you prove that your company is worthy of their trust?

Solutions:
  • When you ask for sensitive information, give an explanation for how it will be used.
  • Skip the pre-checked checkbox that will enroll them in your newsletter or purchase an add-on product. This is a clearly manipulative dark pattern.
  • Do you have a slew of legal language that your users must read and agree to? Combine documents when possible and keep your disclaimers short.

Give positive feedback throughout their experience.
Does your form have multiple stages? If so, show a progress bar indicating their current progress at any moment. Did they enter a strong enough password, or a credit card type that your system could recognize? Show a green checkmark or the appropriate company logo.

When they finish jumping through the hoops you designed for them, say thank you. In addition to being a simple courtesy, a thank you state serves as good UX. Thanking the user informs them that their submission was a success and their information made it to you.

If you feel your website’s contact form could use improvement in any of the scenarios we've described, contact us. We’d be happy to take a look and offer some suggestions to ensure your site continues to help serve your customers and generate new business.