A user interacts with your site, awesome. A user fills out your form, even better. That’s the goal right? Because having the user fill out a form improves conversion rates. In this article I will in-form you (get it!) about best practices for website forms in terms of layout, validation and accessibility.
Layout
Form layout is crucial to the user’s experience in efficiently filling it out. When designing and developing the form remember to keep in mind structure, labeling, placeholder text and action buttons.
Structure
Forms should be presented in a single column layout to prevent the user from interpreting the fields inconsistently. Having more than one column interrupts the vertical momentum the user gets while moving down the form. Use logical sequencing in a way that makes sense to the user and have them fill out the most common fields first. For example, the user should be filling out their name, before they fill out their credit card information.
On larger forms, group like-things into sections. For example, section 1 has “Customer Information”, which asks for the name and address, and section 2 has “Credit Card Information”, asking for that magical credit card number and all that comes with it. In smaller forms, if you have a first name input and last name input, keep them in the same line. You could also combine the “First name” and “Last name” fields to become “Full name” to minimize the number of fields. Fields like city, state, and zip can be presented in the…
