Forms are a vital part of any business or institution website. A way to capture relevant information easily, and most important – immediately capitalizing on a visitor’s desire for wanting to know more. While creating a form in a content management system is generally easy, it’s essential to understand the importance of strategically planning a form so that you can aid visitors along the way and maximize form completions and ultimately site conversions. Let’s explore some usability best practices and form design examples.
Keep Forms Simple
Yes, web forms can utilize more than just text boxes. Radio buttons, checkboxes and numerical fields are all available, but should be used only when absolutely necessary.
The most basic form is used for collecting email addresses for a mailing list. All of the information you may need is a first name and email address.
There may initially be a temptation to ask for more – first name, last name, phone number, etc. But is that information relevant to the specific form you are building? If the answer is no, then leave it off. It is proven that forms that include unneeded data frustrate the user, often the number one reason for form abandonment. Remember that once you capture the most basic information, in this case their email address, you can earn their trust down the road and potentially earn more information from them over time.
Make Sure Your Form is Responsive
Simple, clean forms with readable fonts do well on both desktop and mobile. While on your desktop site the form may be two columns for layout purposes, it should always scale to a single column design for phones and tablets. Forms kept to one page always will do better, but in cases of more lengthy forms, make sure to use a progress bar to be able to clearly identify what page the visitor may be on and how to go backwards to a previous page, which is also crucial for accessibility.
Keep Form Accessibility in Mind
Speaking of, ADA conformance should be forefront of every new element on a website, and forms are no exception. WCAG 2.1 includes specific form guidelines, such as, the ability to tab between fields and the placement of form labels should appear above or below the text field, not within the field. Also, color contrast matters; error messaging needs to meet 4.5 to 1 ratio for small text and 3 to 1 ratio for large text. Additionally, call to action (CTA) buttons must have contrasting colors for legibility. Fortunately, these guidelines help with accessibility for all users whether they have disabilities or not.
You can learn other nuances within the WCAG 2.1 guidelines or reach out to a member of the quality assurance team at ZAG with any questions.
Keep Form Input Streamlined
Most forms mark the fields that are required with an asterisk. There are some arguments to not have optional fields at all, referencing back to keeping the form as streamlined as possible. If you do choose to include optional fields, research shows that it may be better to offer a broad statement that all fields are required unless otherwise marked, then include the optional label in the form.
Keep Forms Secure
All submitted form information should be kept in a secure database and answers only routed to company emails. If any PII (Personal Identifying Information) or account information is needed, the server in which the form is hosted should be protected with encryption. This goes beyond the site SSL and provides further protection for this sensitive information.
As you can see, even the most basic form needs some thought behind it to ensure it is successful. With 27% of visitors abandoning forms, ensuring that your form has optimal usability can support site usability and often conversions. Contact ZAG Interactive to learn about our experience and expertise in helping you create the best form for your website.