10 ways to make your online contact form grumble-proof
Correct stray mistakes and hone this valuable customer service tool to perfection. Your balance sheet will appreciate it.
By Patricia (Sclater) Wheeler, Oct. 5, 2018.
How many error messages have left you grumbling at a company’s online contact form recently? Have you had to rekey 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 lately, 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. Not all contact forms are created equal, and boilerplate forms in particular have their pitfalls. 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 get in touch with you, the more likely you are to make that first sale and cultivate a lasting client relationship. Below are 10 ways to change the online form 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 make this problem worse. Following are several good practices for minimizing eyestrain and maximizing readability:
—Set minimum limits for font and field sizes, keeping in mind that visitors shouldn’t have to scroll. Scrolling can make it difficult for visitors to edit their work rapidly. That matters, especially when response times are limited.
—Choose font colors carefully. Black and white, although readable, might not be available in your company’s branded palette. If they aren’t, we favor:
(a) Bolding a brand-compliant color
(b) Treating that font style as the default for your form
(c) Adjusting the background color for contrast as needed
You might also consider using black text, a white background, and a border color from the company’s branded palette.
Recommendations: Avoid italics; distinguishing between an italicized b and h written lowercase can be a challenge. Also, steer clear of Courier New. It tends to make letter combinations look gray instead of black, and the spacing between characters, although correct, appears excessive.
2. Put apartment and suite numbers in the same field as street addresses. Asking the visitor to enter 8 in an apartment or suite number field without specifying Apt. 8 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 clients. Cross-border transactions are especially vulnerable to scenarios like this because different countries have different address conventions.
It’s wise to include at least five lines in the street address field.
Recommendation: If you want to keep the original fields, edit the suite/apartment microcopy to read something like “(specify Suite or Apartment in box).” The idea is not to leave the number without a descriptor.
3. Ask visitors to input unique address information only once. Don’t require them to rekey their contact details elsewhere on the form. Needless manual repetition increases the likelihood of error.
It’s best to include a “Use same address” checkbox with fields that display second or subsequent addresses. If the box is checked, the script should clone and hide the initial version of the address so that visitors can’t type there by mistake.
Recommendation: Create an address book. Visitors should be able to specify shipping, billing, and gift recipient addresses at a minimum.
4. Make formatting allowances for organizations outside the United States. Don’t assume that form data is being sent to or from U.S. companies. Here are two suggestions for smoothing the way to international transactions:
—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.
—Don’t list the United States at the top of a drop-down menu. Instead, display all countries alphabetically.
Recommendation: Use a seven- to nine-character alphanumeric postal code as a prototype for sizing the appropriate editable field.
5. Show visitors 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. Below are some tips for optimal presentation:
—Don’t break the telephone number into multiple fields.
—Accompany the telephone field with a statement specifying the format to be used. For example, “Format as 000-000-0000. Do not use parentheses or internal spaces.”
—Treat telephone numbers as optional rather than required.
—Explain how prospective customers should populate the telephone field if they would rather not disclose their direct-dial information on the form.
—Consider providing optional fields for country codes, or even create a standalone field for international telephone numbers.
Recommendation: If leaving the U.S. telephone field blank is not an option, script the field to accept 000-000-0000 as a workaround. Do likewise with international phone numbers.
6. Specify character and word limits. Don’t keep visitors guessing. A number like “-178” that accompanies an editable field is not helpful if visitors don’t know what limit is being enforced. It’s better to say “178 of 200 characters,” or if the maximum has been exceeded, “Limit 200 characters. Please delete 178 characters.” Make note of word limits in the same way.
Similarly, make open comment boxes live up to their name. Don’t restrict them to 500 characters or less. That requirement can strike fear into the hearts of those who don’t inhabit the Twitterverse or make their living as editors. Not everyone writes with the precision demanded by highly restrictive character or word limits.
Recommendations: Use the same font treatment for word/character limit specifications as you do for field titles. Compose a detailed and nontruncated response to the question you’re asking. Run a character count and format the size of your editable field on that basis. Again, visitors should be able to read the complete response without scrolling.
7. Document all password restrictions next to the appropriate field. Common limitations involve the use of numbers, capital letters, and special characters. (Be aware that the most secure passwords tend to require at least one of each.)
Recommendation: Accompany words with symbols when your explanatory content refers to special characters, as in “/ (the forward slash).”
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. Instead, confirm that visitors to your site are human by having them answer simple math problems that are randomly generated (for instance, “4 + 5 = ?”).
Recommendation: If your organization insists on catching bots via randomized alphanumeric sequences, make the letters and numbers easily discernible to visitors. For instance:
—Don’t distort them.
—Don’t slant them.
—Don’t position them on top of one another.
—Don’t display them against a distracting background like leaves, doors, or brick walls.
—Include a read-aloud option for the visually impaired.
—Confirm that audio captchas are free of static or other background noise.
—Don’t worry about loss of functionality. Because captcha characters appear in (or as) images, bots won’t be able to interpret them. But your visitors will.
9. Enable smooth navigation in both directions. “Page has expired” notices can cost your visitors time and aggravation, especially if they have to rekey large amounts of data (and again, raise the risk of error). Strengthen the navigation process as follows:
—Structure the form so that visitors can complete each section independently of the rest.
—Create a navigation tab or section rollup structure for ease of use.
—Include a review page (see next section).
Recommendation: Add a checkbox to the tab or rollup title bar to indicate that the relevant section has been completed, and tell visitors what the checkbox signifies.
10. Think about next steps. Bear in mind that your form isn’t just a vehicle for answering questions or sending newsletters, invitations, or coupons. It’s also a touch point for nurturing customer relationships. Hence, the following practices make good business sense:
—Specify at least one alternate means of contact (for example, the company’s mailing address or telephone number).
—Provide a review page on which visitors can edit each separate section of the form before making their final submission. The more chances visitors have to confirm the accuracy of their information, the better.
—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, location, and opt-in email address as the first step in the process and letting the customer supply additional information once the relationship has been established. Visitors might not want to complete a long form in one sitting.
Recommendation: Link back to the company’s home page from the form, the thank-you page, and any accompanying subpages. This motivates prospective customers to learn more about your services. It also keeps them from feeling stuck.
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 boilerplate form until they either get it right or give up. For good or ill, the form reflects your company’s 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.
Featured image courtesy of Pexels.