Creating Successful Contact Forms

January 18, 2016

Categorized: Development
Tagged: , , ,

Creating successful contact forms is important. On your website, a contact form is often a primary means of getting in touch with you. For most people, this means money! Money is good — don’t throw it away with poor contact forms. Here’s a really good analogy from Marcin Treder on Design Modo:

Let’s compare the online to the offline world. This always puts things into a familiar perspective. Let me make a simple analogy: form validation is the equivalent of having a conversation with a salesman right before a purchase – when everything is still on a knife’s edge. If the salesman is impolite and refuses to provide any assistance, you’ll certainly leave the shop without completing your purchase. If the salesman is professional, polite and helpful – you’ll reach for your wallet.

Technically Successful Forms

  • Make it clear something has happened when the user takes action such as submission: success and failure messages are important.
  • Do not lose most* (see next point) of the user’s data on page refresh or use of the back/forward button (e.g., textarea summaries of their request and input fields for their name).
  • Do not save sensitive data on page refresh or use of the back/forward button (e.g., passwords and credit cards).
  • Avoid the use of CAPTCHAs and front end spam prevention. It’s hard enough getting people to fill out your contact forms; presenting them with a strange, difficult to read image or a clicking “game” is a great way to turn people off. Prevent spam silently on the back-end; don’t annoy your users.
  • Perform input validation on the front end and without a page refresh whenever possible. If you know a field is required and the customer attempts to submit the form without that field, don’t let them submit and force a page load. Show the error instantaneously.
  • Avoid being too strict on input validation. It’s ridiculously annoying when a form field rejects a number with dashes or requires it to have parenthesis. Just make sure it’s a phone number, however people input it, and that’s sufficient. If differing formats causes you issues somewhere else down the line (e.g., when inputting/importing data to an external customer database) make the technical solution happen on the back-end and invisibly to the customer.
  • If you include a clear/reset button, make sure it’s completely separated from and strongly distinguished from your submit button. Someone who accidentally clears your form is only going to fill it out again if they absolutely have to.
  • Make sure the user can navigate through your form by using the tab key.

Forms for the Human

  • Use the right language. Specific language is better — use what’s appropriate for your contact form. For example: “Request Consultation” instead of “Submit” or “Schedule Appointment” instead of “Go.” Make it clear to the user what they’re getting in return for submitting your form, don’t leave them wondering or uncertain (a moment of hesitation can turn into a missed conversion).
  • Keep it short and simple in most cases. Short, simple forms are easier/faster to fill out than forms that have 20 different questions. Only ask for information you absolutely need.
  • Auto-fill information wherever possible. Does the user have to be logged in to use a particular form? If so, you might have data such as their username, e-mail, preferred nickname, and so on. Make your form pull this information from their account, with a brief message such as, “We’ve taken some information from your profile for your convenience. Please review the information for accuracy.” This minimizes the user’s workload in filling out your form.
  • Remind the user why you want their data, reassure them about confidentiality, and link to your privacy policy somewhere on the form. Whether you do this near the beginning or just prior to form submission is situational (the end is probably preferable most of the time). Wherever you put it, a small link to your policy with text informing the user why their data is needed and reassuring them about confidentiality is a great way to alleviate last-minute concerns someone may have about reaching out.
  • Think carefully about your default choices. If you’re making something for customers in a particular geographic area, those areas should appear at the top of the list. If you’re selecting something for the customer, make really sure it’s a default option most customers want selected. Making customers feel “impressed upon” with silly defaults, or as if they don’t have a choice with a too-restrictive range of defaults, is a good way to encourage form abandonment.
  • Similarly, think carefully about what you require. If you don’t absolutely need a phone number but want to allow customers who prefer phone discussions to provide their number, don’t require the field and make it very clear the number is optional. You risk losing conversions from people who balk at providing a number.
  • Include a direct e-mail link. Many people are wary of embedded contact forms. Maybe they’ve submitted many before, only to receive no response? In these cases, it’s important to provide a direct e-mail alternative. This is also useful if the user experiences trouble submitting their form. It’s probably best to stick the e-mail link at the end of the form — this reduces the chance of someone seeing the form, clicking on the email link, and abandoning the email or encountering technical problems.

Special Cases

Long, Content Heavy Forms

Some forms are, by necessity, long and content-heavy. It’s usually not possible to avoid this type of form when it comes to government websites, for example.

  • Use headers to separate meaningful sections of the form. Give the somewhat large (not huge, mind you) margins up top so people have a little “breather” between sections, and so that they don’t see everything at once and freak out about everything they have to fill out.
  • Use form pagination to separate out even larger sections, if possible. Some form builders make this easier than others. A self-coded form might be tough to multi-page, depending on your skill level, but it is an option.
  • Make sure that the labels/inputs are all aligned one way or the other so that it’s easy to scan the form. It’s harder to fill out a form when you have to bounce from left, right, left, right to fill out the forms. Giving them all the same alignment straight down the page allows someone to always look in the same place for the next input box rather than back and forth and back and forth — and they can skim over the whole of the form much more easily than otherwise.

More Resources