4

I am designing a website for a client and I'm faced with a challenge that I have not come across.

I have to create a contact form that has around 20 fields and I'm trying to figure out the best way to do it. All of the input fields are necessary to the company.

Having all of the inputs on the page is very overwhelming and I can see people not wanting to fill it out. I was wondering if anyone else has come across anything like this and how they handled the situation.

I thought of maybe creating a script that would just show one question at a time but I figured I would get some input on the topic first.

5

The following would be the approach that I take when designing a form (some more context about the use of this contact form would be greatly appreciated to help improve this answer).

Though you say that there are 20 required fields for this contact form I'd firstly pose two questions:

  1. Is there any contextual information / pre-population that you can leverage to help reduce the amount of inputs needed by a user?
  2. Do all those fields need to be answered at that particular point in time?

For the first point, this could involve leveraging location services to help answer fields that relate to geographic / geospatial information. This would also involve ensuring that these fields have been coded properly (e.g. HTML defining what type of field it is) to assist web browsers in pre-populating common input fields that a user has filled out before (e.g. First Name, Last Name, Address, Contact Number).

For the second point, I'd pose whether all of those fields need to be answered at that particular point in time. I would ask what information is essential to initially capture, and then what information could be captured at a later date. For example, I recently signed up to a new bank that had a complete online application process. Since signing up to a new bank involves the bank needing a lot of information, they designed the application process to capture the essential information needed to prove my identity. Once my identity was proved my bank account was open and I was able to login. Here is where they asked for additional information that was still needed, but not essential in the application process to prove my identity.

Once you have answered those first two questions, I would do the following things:

  1. Determine which fields can be logically grouped together
  2. Determine which fields can have pre-determined answers to help reduce free-text data input
  3. If the contact form is expands beyond one page, have an indicator for the user to show how much progress they have made and how much they have to go when filling out the form

Firstly by grouping fields into logical categories it can help reduce the cognitive load for a user filling out the information (see below). By grouping the fields into relevant categories a user is able to focus easier on the information that is needed for a particular category. It can also assist in providing context to the field needing to be completed.

mockup

download bmml source – Wireframes created with Balsamiq Mockups

Secondly look at which fields can have predetermined answers. By identifying which fields can have predetermined answers, it can help a user answer a question easier through the use of a radio button or a checkbox rather than text field entry (see below).

mockup

download bmml source

Hope this helps, any more questions please ask!

  • Amazing answer, thank you for going in depth. Your bank analogy was great and I think I will try implementing something like that along with grouping similar questions. – Mr.Smithyyy Jul 3 '15 at 13:14
  • Not a problem @Mr.Smithyyy hope the form design went well! – Clint Jul 8 '15 at 5:59
4

There are few ways to make long forms feel less lengthy

  1. group various fields together using things like spacing and visual separation (e.g. personal details, contact information,)

  2. Splitting the grouped fields into tabs or accordion so only one group can be seen at a time

  3. showing a progress bar or a step indicator to give the user an idea of their progress filling the forms

Also you might find this useful http://www.smashingmagazine.com/2011/11/08/extensive-guide-web-form-usability/

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.