Form Creation: Avoid Frustration for You and Your Customers
If you’ve ever had to fill out a form online, you’ve probably run into some of the problems that arise with them. When you don’t put care and consideration into creating a form, they can easily become frustrating for both the customer filling them out and the company receiving them. There are many ways to simplify the process, from label awareness to simple design considerations. Setting up your form right in the first place will keep a customer from getting scared away when first visiting the page or while filling out the form.
Give Yourself Some Space
One of the huge advantages to online forms is that they are not limited to the size of the paper they are printed on. Increased padding and space between sections can make the form easier to read and fill out. Separating sections distinctly with background colours or borders can make it easy for a customer to skim the document and double check individual sections.
Seperating your fields into sections simplifies a form.
Labels
Labels can make or break a form’s functionality – literally, in some cases. Keep labels as simple as possible for easy skimming, and make sure they are clear and concise. Placing labels within a larger titled section can shorten them: for example, skip writing “Your” in front of every single contact information label by putting the entire section under a “Personal Information” header. You can also make labels more functional than simple text. If you assign a “for” property to a label, you can assign a matching id to the corresponding input field. This makes the label clickable and automatically places the typing cursor in the text field, increasing the area a customer can click to start typing. Neat! You can make this feature even more obvious by adding label{cursor: pointer} to your css. For checkbox or radio fields, labels can also increase clickability and ease-of-use. Wrap your entire checkbox field and text description in a label to make the entire area clickable. Adding a “for” label and matching id to your form fields also allows blind or sighted customers using a screen reader to easily identify form fields.
Clickable labels increase usability.
Tab Order
Depending on how you’ve set up your layout, tabbing through a form might not produce the desired results. Tabbing can make form completion very quick, for those used to using it. To assign a custom tab order to your form, use the tabindex property on your input fields. The default tab order of a form is the order they have been placed within the html. To aid a customer tabbing through a form, instead set your fields to tab from left to right, in reading order. Start your tabindex at one for the first field, and work your way down!
Keep the height and number of fields down to keep your customer on the page.
Minimize Form Fields and Required Fields
Nothing is more daunting than an online form with a tiny scrollbar and dozens of fields. To keep your customer on the page, minimize the number of fields wherever possible. If the information is not absolutely required or not immediately useful – skip it! Generic email contact forms should be reduced to Name, Email, Message, and an optional phone number. Keeping the number of required fields down will also help a customer feel more comfortable filling out the form, especially if they are only asking a simple question about the product and don’t want to fill out their entire address to do so.
Responsive Fields
Another advantage of online forms is the ability to control what options are shown to the customer. You can minimize your form fields and reduce confusion by hiding options that are not available to the customer. For example, if you have a Yes/No question asking if the customer currently owns a car, you can hide the fields asking about the vehicle if they select no, and show them when they select yes. This can be done using a simple jQuery onchange statement.
Concise, simple, and clean are the rules to follow for form design.
A Clean Form is a Happy Form
Combining the tips above with traditional design rules will give a good first impression to a customer visiting your form. It will also increase their ability to fill out your form quickly and easily. Combine these tips with proper client-side validation and you’ll end up with a form that both your customers and your company find simple to use and understand.
