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.
Posted by FormSmarts on
Jun 29, 2008 at 10:05 am in HTML form.
Permalink
· Comment
Tags: form builder, form design, howto, input field, web forms
4 Responses to “How to Lay Out Form Input Fields”
You don’t say much about how one can reduce form validation errors…
Correct. We briefly discussed this before. That’s an important topic, and we’ll come back to it in another post.
Posted by: How to add the same form as this one (“Leave a Reply”) at the bottom of my blog? Thanks
Frederic,
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.
Leave a Reply
About the Form Builder Blog
Categories
- booking (1)
- collaboration (6)
- event registration (3)
- file upload (2)
- form builder (52)
- form handler (9)
- form spam (5)
- HTML form (11)
- mobile form (1)
- online form (9)
- payment form (13)