.svg){kind=small}
Whether you're gathering job applications, event registrations, or using them for B2B lead generation, you're going to need web forms. They're essential for collecting contact details, customer feedback, and even payments.
But you'll know from experience that some forms are better than others. Some of these forms are complex, confusing, and challenging to use. The web form experience can win or lose job candidates, promising leads, and revenue.
But with these six best practices in mind, you can guarantee that your web forms are user-friendly experiences that boost conversions and contribute to your bottom line.
Web forms have been an essential part of the web experience since the "Web 1.0" days, as they should be the easiest way for a user to send their information to a business. But user experience design has come a long way since the 90s, and customer expectations are higher every year. If any part of your form is difficult to use, 67% of customers will just abandon it entirely.
If collecting this information is important to you, then you’ll want to make the experience as smooth as possible for users. This is just as important for eCommerce stores collecting vital customer data for payment processing as it is for creative endeavours such as illustrator portfolios websites collecting contact information to send out regular updates.
A single-column layout is considered best practice because it's an effective way to keep the design simple. It removes confusing, elaborate formats from your decision-making process and makes it easier for users to navigate the form.
Users can quickly skim through a single-column form and see what's needed, rather than having to scan multiple columns to find the little input field for a three-digit security number.
It's well-known that users will scan a web page in a "Z" formation, starting from the top-left, moving to the top-right, then skimming to the bottom-left and bottom-right. A multi-column layout leaves so much information outside this "Z" line. But in a single-column layout, almost all the information needed can be skimmed in the users' peripheral vision.
Finally, you can easily adapt single-column layouts to mobile screens. And with 59% of internet traffic coming from smartphones, you need to do everything you can to make your forms work on those small displays.
Three important concepts to keep in mind when designing a web form are its flow, the order of the questions, and the grouping of the questions.
When designing a web form, you should consider the "flow" or "pace" of the experience. Some sections will be easier or harder than others, and you should keep that in mind when arranging them. (Filling in a credit card should be easy, but if the user has to go to another room to get their card details, it's a friction point.) If the user is signed in or has provided information before, auto-filling some fields is a great way to make the experience more seamless.
When designing a web form, it's important to think about the order of the fields in terms of what makes the most sense for the user. Often it is helpful to start with the easiest information, like name and contact details, then work down to specifics like payment info or product add-ons. The more fields a user fills out, the more they feel invested and compelled to finish the whole form.
If your form is more than a few short fields, you should think about how you're grouping information.
Obviously, contact information like names and emails should go in one group and payment info in another, but consider grouping input methods together where possible. In a complex transaction like buying domain names, users will appreciate being able to speed through a section of simple multiple-choice questions after having to type in their info on the section before. Grouping together input types can help the "pace" of this experience, which prevents the user from getting bored or tired.
Consider breaking it up across several pages if your form is very long. This keeps the user focused on the task at hand and reduces the "cognitive load" of looking at many fields simultaneously. If you give the user a clear progress indicator like "Page 2 of 4" or a progress bar, you can give them a clear idea of how much longer they have left. By breaking up the form into separate pages, you can also analyze the performance of each page and optimize your form more quickly.
In web design, it's important to give the user visual cues as to where they are on the site and what they're doing. That might mean including the page title as a header or localization touches like an OnlyDomains .au domain to assure Australian users they're on the right version of a globally-available site.
For web forms, this means clearly labeling the form itself, its sections, and the individual fields. Avoid abbreviations like "DOB" and clearly label the field "Date of birth." In a B2B context, avoid industry jargon wherever possible.
This also goes for your Call to Action (CTA) button. A clearly-labeled CTA button that stands out on its own could get 232% more clicks than a cluttered landing page. You'll see better performance if that CTA link has clear, action-oriented text like "Claim my free trial" rather than "Submit." This label will act as another cue that the user is doing the right thing by filling out this form and not another one.
By clearly marking which fields are optional, you can save the user time filling out unnecessary information. While it's common to mark fields with an asterisk, this could conceivably mean the field is either optional or mandatory. For that reason, optional fields should be clearly marked "optional." This makes the form clearer for everyone, including visually-impaired users whose screen-reader tool can read the word "optional" to them.
Errors are one of the most common issues people have with web forms, and handling them well is essential to usability.
Common errors include required fields not being filled in, being filled incorrectly, users inputting the wrong date formats, or misspelling information. Less common issues include problems handling special characters like dashes and accented letters or an inability to copy/paste due to strict website security settings.
Clear error messages are essential in helping users understand when they have made a mistake in a form and guiding them on how to fix it. The messages save users time and frustration, improve form conversion rates, and lead to a better experience overall. Error messages should have clear descriptions to help users understand exactly why their input is invalid and what they need to change.
Another thing to consider is the placement of error messages. One error message at the top of a form—or worse, a long list of them at the top—barely helps the user understand what's going wrong and where. This is why you should inline error messages within the form.
By positioning the error messages next to the input field which triggered the error, you can clearly indicate what went wrong and how. Inline errors can be set off as soon as the field receives an incorrect input so that the user can amend the error immediately.
If this form is to help a user apply for a job or register domain names, there's a lot of information that they need to get right the first time. You can put users at ease and stop them from doubling back to review the fields with a good confirmation process.
A "validation summary" at the end of a complex web form can allow users to confirm that the information they've entered is all correct and easily amend anything that looks wrong. If you've broken your form into smaller pages, this is the first time the user sees a summary of the whole document. This is an important (but often-overlooked) step in the submission process since incorrect information can lead to delays and other issues that hurt the user experience.
Once a user has submitted the form, they should land on a dedicated screen that confirms you've received the form. As well as confirming receipt of the form, you should take this chance to remind the user what action will be taken next.
If it's a customer service query, tell them when they can expect a response. If they've ordered a product, tell them they can find a receipt in their email inbox. This reassurance helps set expectations for the user and shows them that their information has been received and actioned. This helps create a sense of trust between the user and your business, strengthening your brand and helping to drive future business.
You should consider sending the user an automatic follow-up email once the form is submitted. This could include a summary of what was submitted and when. It can also be the first in a series of automatic emails. In addition, you can install an email finder tool to collect the email addresses of your potential customers. For the purpose of sending notifications of new offers, news or etc.
If the web form was setting up a trial or purchase of your coworking space management software, these could be onboarding emails with helpful tips about enhancing their space. If it's for a delivery, they could update the customer on a tracked delivery. These emails are a great opportunity to go the extra mile and keep your customer information they'll find useful.
When building a web form, it's important to consider layout, the grouping of the questions, labelling of fields and buttons, error messages, and a process for confirming the information was received. If your business follows these best practices, and can optimize your web forms further, you’ll enjoy improved user experience as well as higher completion rates.
Daniel is the in-house SEO guru in OnlyDomains, a leading web hosting company based in Napier, New Zealand that helps entrepreneurs and business owners achieve online branding success with OnlyDomains .nz registrations. He has been an SEO expert for 15 years, and still enjoys helping, creating engaging websites and interesting content. If not at the computer, he is mostly outside in nature with the family. For more conversion & SEO insights you can read his blog here.
Zuko is the most powerful form analytics platform available on the market. Find out how to improve your form and checkout conversion by taking a product tour.
PRODUCT TOUR
