Forms are a valuable tool for collecting info about your customers. They can be used as a way for them to contact you, pay for your products or services, or book appointments. However, not all forms are created equal. Some are more effective than others.
Keep reading to learn five guidelines you should follow when designing forms for your website.
1. Keep It Simple
The most important thing to remember about designing effective website forms is that the simpler it is, the more likely users will be to fill it out. If people see endless fields and tons of instructions, they may decide it’s not worth the hassle and click away.
Determine which fields are truly necessary, condense info as much as possible while still maintaining clarity, and minimize visual clutter to make the form less overwhelming. Consolidate fields when possible — “First Name” and “Last Name” can become “Full Name”, and the fields for street address, city, state, and zip code can be combined into one “Full Address” field.
If the form is still on the longer side, consider splitting it up into smaller pages. For example, you can ask for contact info on the first page, shipping info on the next page, and billing info on the last page. Just make sure you include a progress bar so that users can gauge how much of the form is left and how long it will take to complete.
2. Make It Easy
Along the same lines as keeping things simple, it’s also important to make things quick and easy for the user. Frustration and confusion make it much more likely that users will abandon the form, costing you a new lead or customer.
To avoid this, make sure you include clear formatting requirements on applicable fields so users don’t have to go back and fix their entries. For example, the placeholder text for the “Date of Birth” field could be “MM/DD/YYYY” to indicate that the month should go first, then the date, and then the year. For username and password creation fields, list all the requirements regarding length and the types of characters allowed. Additionally, make it clear which fields are required for submission by marking them with an asterisk or other visual cue.
If possible, enable features like autofill, autocomplete, and “sticky contacts” to automatically fill in stored info like names, phone numbers, and addresses. These tools significantly reduce the amount of time needed to fill out a form and require much less effort on the user’s part.
Finally, design your error handling to limit frustration. Avoid listing errors at the top of the page — inline error messages make it easier to see which fields need attention. The error message should provide clear instructions on how to fix the input info and make it as easy as possible for the user to make the necessary corrections.
3. Put Form Fields in the Right Order
Another thing to consider is the order in which you put the fields. Typically, it’s best to put the easier stuff (like name, phone number, and email address) at the beginning and save the more difficult information (credit card number, expiration date, and security code) for the end.
This way, even if users have to go searching for the necessary info, they’ll still want to come back and finish the form they started. If the more difficult fields are at the beginning, they might get intimidated and decide it’s not worth the effort.
Form fields should also follow a logical order and be grouped together in a way that makes sense. For example, all the billing fields should be together. If you separate the address into multiple fields, they should follow the order of how you’d recite the address: street address, city, state, zip code, and country.
4. Consider Field Type
Make sure the type of field matches the info you’re seeking. For example, don’t use a short-answer box for longer comments, since the user won’t be able to see everything they’ve entered. If the form builder you’re using has built-in options for dates and numbers, use those instead of standard text boxes to cut down on errors.
Another thing to consider is that users want as few clicks as possible. This means that radio boxes typically perform better than drop-down menus, which require extra steps. At the same time, if your list of options to choose from is long, opting for a drop-down is a good way to cut down on visual clutter. Experiment with both options to see which one gives you better results.
5. Don’t Forget Mobile
Finally, don’t forget to format the mobile version of your form, as well. Make sure it reads well on a smaller screen and that the pop-up keyboard doesn’t cover up any necessary info. Typically, it’s best to avoid multiple columns on mobile, since it’s hard to fit two things side-by-side within the constraints of a phone screen.
Expert Web Design by PDM
At Performance Driven Marketing, we’re experts in all things web design. We’re committed to creating websites that are as beautiful as they are effective and helping our clients achieve greater success. Contact us today for a free consultation and learn more about how we can bring your business to the next level.
