[TL;DR: Contact forms are a marketing tool. Make them easy to use, and let us know if you have questions.]
How many error messages have left you grumbling at a company’s online contact form recently? How often have you had to enter the same information more than once because of formatting mistakes the site didn’t tell you how to fix?
If you’ve found yourself in this predicament, you’re not alone. And if you’ve been hearing complaints like this about your organization’s online contact form, it deserves a second look. If it wasn’t produced under your direction, your contact form may need TLC from your IT, design, marketing, and content professionals.
That attention is worth it because your online contact form is often the first link in the customer service chain. The more easily prospective customers can reach you, the more likely you are to make the first sale and cultivate a lasting client relationship. Below are 10 ways to change the online form user experience from a chore into a pleasure:
1. Make the fonts on your form easy to read. Be aware that not everyone can read small print comfortably, and small screens on cell phones and tablets can make this problem worse. Overly large fonts can also be frustrating when used on mobile devices.
Recommendations:
- Set generous minimums for font and field sizes so that scrolling isn’t necessary. The more time users spend scrolling, the less time they have in which to make a purchase or sign up for a subscription (if you can avoid it, please don’t rush users by imposing time limits on completion of the form).
- Choose font colors carefully. Black is the obvious choice. If it isn’t included in your organization’s brand palette, try (a) using a bolded brand-compliant color as the default font style for your form; and/or (b) adjusting the background color for contrast.
- Consider using black text, a white background, and a border color from the company’s brand palette.
- Use italics sparingly. They can be difficult to decipher because they make fonts look smaller than they actually are. In addition, telling the difference between a lowercase b and h in italics can be a challenge.
- Steer clear of Courier unless the context relates to typewriters. Spacing with Courier fonts can look clunky, and like italics, they tend to make letter combinations look grey instead of black.
2. Put apartment and suite numbers in the same field as street addresses. Asking users to enter the numeral 8 in the apartment or suite number field without specifying Apartment or Suite 8 in that field runs the risk of sending business correspondence to the wrong address. And customers who incur late fees because of a misdirected invoice make for unhappy users. Cross-border transactions are especially vulnerable to these scenarios because different countries have different postal conventions (more on this in a bit).
Recommendations:
- Include at least five open-comment fields in the address section:
(a) Company name (marked as optional)
(b) Street address line 1
(c) Street address line 2 (marked as optional)
(d) City, state/province, postal/ZIP code
(e) Country [thus avoiding the CA vs. California or Canada problem] - If you want to keep the original fields, edit the suite/apartment microcopy to read something like “(specify suite or apartment number).” The idea is to give the number its proper context.
3. Ask visitors to input unique address information only once. Don’t require them to submit the same contact details in multiple fields. Customers might be frustrated enough to leave the site, and even if they aren’t, the risk of error rises with each repetition.
Recommendations:
- Include a “Use same as [shipping/billing] address” checkbox with fields that display second/subsequent addresses. If the box is checked, the script should clone and grey out the initial version of the address so that visitors can’t type in that field by mistake.
- Create an address book. Visitors should be able to specify shipping, billing, and gift recipient addresses at a minimum.
4. Make formatting allowances for customers outside your home country. Don’t assume that form data is being sent to or from U.S. or Canadian companies.
Recommendations:
- Don’t list the United States, Canada, or the United Kingdom at the top of a drop-down menu. Instead, display all countries alphabetically.
- Don’t limit ZIP or postal codes to five numerals. Countries and territories outside the United States use varying permutations of alphanumeric characters and internal spaces in their postal codes.
- Use a seven- to nine-character alphanumeric postal code as a prototype for sizing the appropriate editable field(s).
5. Show users how to format telephone numbers. Some organizations prefer to use parentheses and hyphens. Others use only hyphens. Still others separate numerical groups with spaces. Select one format and make it consistent across your entire site.
Recommendations:
- Don’t break the telephone number into multiple fields; doing so might cause problems for customers who live outside North America and therefore don’t use the +1 country code.
- Accompany the telephone number field with a statement like “Format as [000-000-0000]. Do not use parentheses or internal spaces.”
- Treat telephone numbers as optional rather than required.
- Tell customers how to populate the telephone field if they’d rather not disclose their number.
- Use a standalone telephone number field to accommodate customers from around the world.
6. Specify character and word limits. Don’t keep visitors guessing as to what those limits are. A number such as “-178” that accompanies an editable field is not helpful if visitors don’t know what limit is being enforced. State the number of characters or words allowed, perhaps “178 of 200 characters allowed,” or if the maximum has been exceeded, “Limit 200 characters.” Be aware that problems with character limits might drive visitors off the site, especially if the form has to be completed within a set amount of time.
Recommendations:
- Make open comment boxes live up to their name.
- Use the same font treatment for word/character limit specifications as you do for field labels.
- Compose a detailed prototype response to each question the form asks and use the word/character count from that response to dictate the size of the editable field. Again, visitors should be able to review their response without scrolling.
7. Document all password requirements in the appropriate field label. Specify the correct use of numerals, capital letters, and symbols or special characters. Don’t frustrate prospective customers by keeping them guessing.
Recommendations:
- Include explanatory language with any symbols/special characters used, as in “/ (the forward slash).”
- Note if applicable that passwords cannot be retained beyond a stated time period and/or cannot be reused.
8. Use a randomly generated math problem as your captcha. Don’t use busy graphical images or indistinct audio files as your default bot-catcher; visitors with poor eyesight or hearing can find these elements extremely difficult to process and leave the site as a consequence. Instead, confirm that visitors to your site are human by having them answer simple math problems that are generated at random (for instance, “4 + 5 = ?”).
Recommendations:
- Don’t distort the appearance of captchas. It can be difficult to tell the difference between a lowercase g vs. the numeral 8 vs. an ampersand, or between a capital I vs. a lowercase l vs. the numeral 1.
- Align captcha characters vertically.
- Don’t position them on top of one another.
- Don’t display captcha characters or objects against a distracting background like leaves, doors, brick walls, or random roadway imagery.
- Include a read-aloud option.
- Confirm that audio captchas have been recorded at an acceptable volume, are enunciated clearly, and don’t contain static or other background noise.
9. Enable smooth navigation in both directions. Depending on how the form is constructed, Back or Previous buttons might not work, and “Page has expired” notices can cost your visitors time and aggravation. Structure the form so that visitors can complete each section independently of the others.
Recommendations:
- Create a navigation tab or accordion structure.
- Use check marks to denote completed sections or tabs.
- Include a review page (see next item).
10. Think about next steps. Bear in mind that your form isn’t just a vehicle for purchases or subscriptions. Your task is to guide users toward a relationship, not leave them feeling stuck in a form.
Recommendations:
- Provide a review page where visitors can edit each section of the form separately before making their final submission.
- Link back to your home page from the form, the thank-you page, and any accompanying pages. Specify at least one way besides the form for visitors to contact your business (such as its mailing address or telephone number).
- Include a post-submission “Thank you for contacting us” page. Visitors like to know that you’ve received their information safely. They also appreciate being thanked for their time.
- Consider requesting only a name and opt-in email address on first contact and letting the customer supply additional information once the relationship has been established. Visitors might not want to complete a long contact form in one sitting.
Say hello to your BFF
Your organization’s online contact form is a quiet but powerful tool for building customer relationships. But like any other tool, it’s only as useful as you make it. Visitors to your site shouldn’t have to grumble their way through a poorly written form until they either get it right or give up. For good or ill, the form reflects your professionalism, so don’t let it become your enemy. Make it your best friend instead, and if you find operational gaps, plug them. Your market share will thank you.
Blue Cloak Editorial 