Designing Web Forms

9483382_sWhile most of the displayed content in websites is considered as output, web designers should not forget how important the input form is for their projects. Input forms can be used in sign-up pages and contact forms. Mainly, these input forms enable the company or the owner of the website to interact with the target audience.

There are many simple practices that you can apply in order to make the web forms on your websites more inviting. Here is a quick overview of some of them.

Simplify large amounts of information

The same way that a huge group of text can intimidate the readers, an unending list of boxes to fill out can also be very daunting. One way to encourage the visitors to fill out such list of empty blocks is to break it down into manageable sizes. Doing so will make the visitors feel like they are completing steps.

Breaking down the list can be done in a number of ways. For example, it can be simply split into a few sections and arranged into several rows or columns. Clear headings and horizontal or vertical rules can be used to divide these sections. Also, a long list can be divided into separate web pages. This way, only a manageable amount of information is presented to the visitors at a time.

Provide clear labels

Once you have broken down any large amount of information into bite-size chunks, the next important task to remember is to provide short but clear labels for every piece of data you are asking for. By using plain and simple language, you can avoid making the visitors confused or frustrated.

One way to go about providing clear labels is to use only a single word for each piece of information. For example, you may use words such as name, phone, email, country, budget and time-frame.

On the other hand, you may also carefully describe each label so that there would be no room for misinterpretation. For example, instead of simple using the single word “time frame”, you may use “Your expected project completion date is…” Also, instead of using a plain text box, you may put up a calendar on which the visitors may easily click on a date.

Another way to simplify the process of filling up input forms is to strategically incorporate multiple choices among text boxes.

Include interactive elements

Interactive elements can make a simple web form fun to fill out. These elements can also be functional, and can be used to point out some errors to the visitors. One easy way to do this is to highlight empty fields with a different color such as yellow or red. Any color that is noticeable against the color of the background or the original color of the text boxes will stand out, and be more noticeable.

Another example is to provide helpful messages to the visitors as they fill out the input forms. As the visitors start to type inside a text box, a simple and unobtrusive message can be shown on the side to inform them on why that piece of information is needed.