Posts Tagged ‘form design’
Introducing Form Layouts
We’re pleased to now support two form layouts.
Question (a.k.a. field name) and input field aligned horizontally (default):
|
Question and input field aligned vertically:
|
Which Layout Should You Use?
Most people find web forms designed with the first layout clearer and easier to read. That’s why we use it by default whenever you create a form.
The best layout to use depends on the length of the questions asked on the form.
- When a form is made of short questions like name or email address, prefer the first layout. This what you should use, for example, for contact forms.
- When the form contains longer questions like Why do you want to work for us?, you should rather use the second layout. It turns out that you should use the second layout for most complex forms like web surveys and job application forms.
How to Change the Layout of a Form
You can change the layout of a form in the form details page. Note that if you’re using a form widget embedded into your site, you must update the HTML code on your site whenever you switch layout.
This is simply because the layout affects the size of the form. Forms accessed by their FormSmarts.com URL don’t have this restriction.
Any Feedback About Form Layouts?
We welcome your feedback about this feature.
Posted on August 14th, 2008 in HTML form.
2 Comments »
Tags: form design, usability, widget
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 on June 29th, 2008 in HTML form.
4 Comments »
Tags: form builder, form design, howto, input field, web forms
Ever Wished You Could Reorder Fields?
The set of form-making operations supported by FormSmarts form builder was up to now almost complete, allowing to:
- create a form
- delete a form
- edit form properties (name, title, return URL, form filling instructions, recipient email account)
- add a form input field
- delete a field
- edit field properties (name, description, field type, input widget, optional/required)
The last unsupported operation was to allow users to easily change the order in which fields appear on a form. This is often needed to:
- group fields logically
- group optional fields together at the bottom of a form
- insert a field in a existing form
- move fields around to increase the visual appeal of a form
Reordering fields manually is tedious, as it involves deleting and re-creating fields.
No more. Reordering fields is now a trivial drag & drop: in the fields tab, drag the field you want to move, and drop it in the position you want.
As usual, we welcome your comments and suggestions about this feature.
Posted on June 20th, 2008 in form builder.
1 Comment »
Tags: form builder, form design, input field
Building Successful Web Forms, Part 1
Web forms play a key role for visitor (and customer) interaction on many
sites. However, many web designers don’t realize that there may be huge
differences in form abandonment ratio, depending on how well the form is
designed. In this post and follow ups, we’ll give you some tips to help
you make your web forms an effective communication channel.
Always provide form filling instructions.
Don’t assume that all of your visitors will understand how to submit a form without further explanation. Short and clear form filling instructions can reduce form abandonment, and increase the quality of the information collected.
- include a call to action phrase like “Please fill out this form to
contact XYZ” - indicate the purpose of the form and the recipient of the information collected
- if applicable, confirm that you will reply, and give an indication of the time frame
Select the correct data type for each input field.
Because of necessary form validation, choosing and incorrect data type may prevent a form user from submitting valid information. When this happens, it is likely to lead to form abandonment.
For example, if you specify that a form field can only contain a Number, it may not work for a phone number. 1233456789 will work, but not 123-345-6789. So use
the Phone type instead. In many cases, the form builder will
pre-select a type for you, but not always. Read
more about selecting an input field data type in the form builder documentation.
Choose the most appropriate input field widget.
Don’t restrict yourself to text boxes and drop-down lists. Take advantage of the full range of HTML form fields with radio buttons and checkboxes. Learn when to use each one.
Using a drop-down list for a yes/no question will slow down the form user, and increase the chances (s)he gives up. Use radio buttons instead. Read tips about choosing the best input field widget in the form builder documentation.
Brand your forms for instant visual recognition.
Always brand your web forms with your own logo. This helps visitors
recognize at first sight who they are about to send information to.
Posted on May 6th, 2008 in HTML form.
No Comments »
Tags: form builder, form design, howto, input field, web forms
FormSmarts Form Creator Now Supports All HTML Form Field Types
We are pleased to announce that FormSmarts now supports the full range of HTML form input fields. Users can now update their web forms and create new ones using Drop Down Lists, Radio Buttons, and Checkboxes.
We are in the process of updating relevant documentation on the site.
Update: see how to choose the correct form input field.
Posted on March 22nd, 2008 in form builder.
No Comments »
Tags: form design, upcoming
