Optimize Your Website's Forms to Maximize Response
Forms are where the rubber meets the road for most websites. Until a visitor fills out a form, they are just passing through. Forms are where you capture leads, add people to your community, accept requests, and so forth.
As the heart of the primary action on most websites, forms deserve more than casual attention. The should be designed not just for attractiveness, but for effectiveness.
If a visitor gets to your form and doesn’t complete it, you’ve lost the contact. So creating forms that people are least likely to abandon is critical.
The importance of form design has led to a lot of research being done on the topic. Here are the top recommendations that emerge user testing, including both response-rate analysis and eye-tracking studies.
- Have as few fields as possible. If you’re trying to get people to sign up for your email list, you’ll get the most sign-ups if you ask for nothing but their email address.
- Consider label placement. Putting labels to the left of the entry fields uses vertical space more efficiently, but it doesn’t work well on phones, and studies suggest that putting labels above the fields is easier for people to scan. In-field labels are also worth considering, but they have their downsides.
- Don’t require a phone number unless you absolutely need it. People hate unsolicited phone calls even more than email spam, and this makes them hesitant to provide this information.
- Make sure the form works well on mobile devices. In addition to layout issues, it is important that email fields be properly coded to bring up the "email" keyboard on a phone, which provides the @ sign without switching modes. (The key is using type="email" instead of type="text".)
- Don’t use a captcha. People hate the "guess what these letters are" game. There are better ways of reducing spam; we recommend using a "honeypot," which is a field that is hidden from normal visitors but is inviting for a spam-bot to fill in.
- Capture additional information in hidden fields. You can, for example, record what pages the visitor viewed on your site before arriving at the form, how they reached your website, and where they are located.
Resources for further reading
- 5 Research-Based Tips for a Better Contact Form (UX Movement)
- Why Infield Top-Aligned Form Labels are Quickest to Scan (UX Movement)
- Designing Usable Web Forms – Empirical Evaluation of Web Form Improvement Guidelines (ACM SIGCHI)
- Which Types of Form Fields Lower Landing Page Conversions? (Hubspot)
- Mobile Form Design Strategies (UX Booth)
- Mobile Input (presentation by Luke Wroblewski)
- Placeholders in Form Fields are Harmful (Nielsen Norman Group)
- Tracking the Source of Your Website Leads (Webvanta)
(With apologies for the layout of the comment form below: we need to take our own advice and redesign our forms to not use left-aligned labels!)