Rules For Designing Great Web Forms

Forms design something every web designer should be learn the master techniques of forms, because input forms are every where on the web just like search engine input to more complex order forms, for example you have eCommerce website, then you must have forms to collect information about customers just like name, email, mobile number, billing address, payments method and shipping address and so on. it's doesn't matter the principles are same, but problem comes out when most of the professional designer make same mistakes while designing forms, there are some basic things if you follow you will be able to design pretty good and user friendly forms. In this guide we will learn the basics of the designing web forms. Since we are working on a online shopping project, we have found something really interesting to share with you, so that's why we here with the awesome guide on how to design user friendly forms.

If you are running an eCommerce websites you must care about user friendly forms, there are lot of things which you need to care about but we will discuss basics of the forms, which help a user to fill out the form very easy and quickly without any trouble.

We have converted the guide into the following parts

1. Group the forms in the correct way
2. Use of the correct input types
3. Make sure have helper text
4. Highlight the required inputs
5. Tell the users about inputs format
6. Missing or an error feedback
7. Responsive and mobile friendly inputs

Group the forms input in the correct way

Today as the web designing growing very quickly, There are many different ways to organize the forms but ensure that the basic rules should be followed, first thing you should keep in mind when designing forms, divide the forms in to groups, for example personal information, payment information, and billing fields. Most of the eCommerce website also offer separate billing address so then the sequence will be look like this, Personal Information, Credit Fields, shipping and billing. Let's take a look at the unorganized forms in the image below.

In the example above we have some related fields but the fields are not well organized, it's very hard to scan for a lay man, so we have another example, grab it from image below, the image below will show you the great example of grouped form fields and you will found it very easy to understand.

Now check out the example above, it's the same form but the related inputs are grouped. This is much easier to understand for simple user, even they don't have the how know of online form filling and really makes more sense than the unorganized form, also it's very easy for a lay man to read and fill the the form, it does take more vertically space but having related fields organized is very important part of forms. Note that don't display the inputs or fields that are not really needed. So let's move on our next part of this tutorial, Submit Button (Call to action button).

Submit button (Call to action button) in forms usually the button that will submit that form, either submit simple form or create account whatever is this, the important thing is that need to be standout and describe the purpose of that form. Just take look at example below to understand the how to standout the button. Here is you can see the button is not really clear.

Now take a look at the example below and compare it to button above, you will find it really useful and button is really standout and make really big difference.

As a concept it can help you think about making user friendly forms effectively. The combination of layout, color and overarching principles will help take your designs to the next level, we hope it will help you to learn something useful, With mistakes such as those listed above, you just have to memorize the rules so that when you are about to use them, you’ll catch yourself in the act and know for certain that you’ve written or design the right one.

In our up coming tutorial we will learn about helper text and why should we use helper text. So stay tuned and don't forget to share your feedback, it will help us to improve our content quality. Peace and blessing, Happy Blogging..!!

Ishtiaq Ahmad on December 19, 2015