How to Lay Out Form Input Fields

Your goal as a web publisher is maximize the number of (legitimate) respondents to your forms. A first step towards this goal is to lay out your forms in a way that is intuitive to users, makes forms faster to fill in, and minimizes form validation errors.

It follows four points you should consider when designing a web form:

  • choose the most appropriate input field widget for the situation
  • group fields together within logical sections
  • place multi-line text input fields (textarea in HTML) towards the bottom of the form
  • group optional fields together at the bottom of the form

The first point is discussed in details in FormSmarts documentation.

The second point commends, for example, that when you ask people about their contact details, you group all relevant fields (first name, last name, email,…) together. We found that most form designers tend to do that right. The form builder will in the future allow users to define different logical (and visual) sections within web forms.

Multi-line text input fields obviously tend to take longer to fill in than other input fields. They require more effort, thinking and typing, so place them after other fields. Visitors will be less inclined to abandon the form altogether if they have already spent time completing the first part of the form.

The last point is about grouping optional fields together at the bottom of the form. This allows people to quickly review the remaining questions, and skip the fields they don’t want to fill in or don’t apply to them. This may of course conflict with grouping fields within logical sections. In that case, place optional fields at the end of each logical section.

We’ve now enabled comments, and we warmly welcome your thoughts and feedback about this post. if you’re reading this by email, just click on the title to post a reply.

4 Responses to “How to Lay Out Form Input Fields”

You don’t say much about how one can reduce form validation errors…

Posted by: Janet | Jun 30th, 2008 3:18 pm

Correct. We briefly discussed this before. That’s an important topic, and we’ll come back to it in another post.

FormSmarts Posted by: FormSmarts | Jun 30th, 2008 7:26 pm

How to add the same form as this one (“Leave a Reply”) at the bottom of my blog? Thanks

Posted by: Frederic Monfils | Jul 3rd, 2008 8:32 am

we’ll soon allow users to opt to have the URL where the form was posted from included in the notification email. You’ll then be able to insert a form into your blog template, and get visitor feedback by email. Later, we’ve also planned to allow users to “re-post” form submissions to your blog automatically.

FormSmarts Posted by: FormSmarts | Jul 3rd, 2008 9:03 am

Leave a Reply

About the Form Builder Blog

The Online Form Builder Blog is published by FormSmarts, a web form service providing all you need to create a form and publish it online in minutes. FormSmarts makes it easy to build a form and embed it on your site. You can then get form submissions by email or store them on FormSmarts and download an Excel report. Learn more about the many other benefits of FormSmarts.