7 Steps to Useable Forms

Ever the dutiful husband, I used to veg on the couch with my pregnant wife as we watched the most relaxing show in television history: "The Joy of Painting" hosted by the late Bob Ross on PBS. The ease with which he could knock off a landscape painting in twenty minutes made this the perfect Saturday morning fare for people not in a hurry to be anywhere. Every painting, if memory serves, had at least one happy little cloud in it. Each week Bob would say, "I feel a happy little cloud coming on, don’t you?" We sure did.

Now, shift to the harsher reality of the Internet. Think of your Website as one of Bob’s landscape paintings. You’ve got a great navigation scheme in the foreground, and a wealth of valuable and well-written content in the background. Pretty. But what about your site’s forms? Are they "happy little forms", or are they obstacles that drive away potential customers because they’re confusing, obtrusive, lengthy and unresponsive?

Follow these 7 steps to make your forms – and your users – happy:

1) Get to the Point

You may be asking for too much information. Users are reluctant to volunteer information, especially if what you’re asking for seems irrelevant. For example, if you have a newsletter sign-up form, users will usually feel comfortable enough to provide their email address, but probably not their street address, age, and gender. If you do ask for extra information, clearly indicate why you’re asking for it and what you intend to do with it.

Don’t force users to scroll down to the first input field. I’ve seen forms whose input fields are buried under a scroll or two of introductory text. If you really need a short novel to help your visitor understand the form, consider placing it below all the input fields. An anchor link at the top of the form can take a visitor to the text as needed.

2) Provide Field Focus

This easy "nice-to-have" puts the cursor directly into the first input field (first_name) when the form is displayed. Use the BODY onLoad event, you can save your visitors a click of the mouse:

   <BODY onLoad="document.forms[0].first_name.focus();">

3) Add Help Information

Sure, fields labeled "First Name" and "Last Name" don’t need much of an introduction, but less obvious and more obscure fields might. Also, it wouldn’t hurt to provide some direction in situations where formatting is an issue. For example, for a date field you might prompt the user with the desired date format:

   <INPUT ...      onFocus="window.status='Enter date in MM/DD/YY format'"      onBlur="window.status=''">

The onFocus and onBlur attributes in your <INPUT> tag will display and remove, respectively, your helpful hints in the browser’s status bar.

Another and probably more visible method of providing field-level help information is to "pre-fill" the value of the INPUT or TEXTAREA element:

   <INPUT ... value="- Help info goes here -"      onClick="document.forms[0].first_name.value='';">

When the visitor clicks into the INPUT box, your default value disappears and the visitor is ready to type.

4) Use Tables for Alignment

Another way to increase the usability of a form is to align the form’s elements in a two-column non-bordered table — the labels in the first column with the input boxes, selects, and checkboxes etc. in the second column.

5) Control Input Field Size

Provide visual clues in terms of expected response from users by varying the width of the input fields. For example, for a "middle initial" field, you would replace the default wide input box with a much smaller one by adding the SIZE attribute:

   <INPUT TYPE=TEXT NAME=middleinitial SIZE=1 MAXLENGTH=1>

Add the MAXLENGTH attribute if you want some control over the amount of text that can be entered into the box.

For textareas (larger multi-line input boxes) use the ROWS and COLS attributes to control the size of the display:

   <TEXTAREA NAME=comments ROWS=3 COLS=40></TEXTAREA>

Be sure to test these settings in various browsers. IE and Netscape render them differently.

6) Provide a Clear Confirmation Message

What does the visitor see after the form is submitted? At a minimum you should clearly confirm that the form has been received – send them to a receipt message display on a Web page. You should also tell them what happens next – "Your feedback will be answered within two business days", or "Your order will be processed within 72 hours". While you’re at it, provide clear and prominent navigation to guide them to other logical destinations.

Depending on the purpose of the form, sending an email confirmation can also be a real service to the submitter. In your email, restate your confirmation message along with the data that the visitor submitted. For example, for an order form, include in the email the product, price and shipping information that the customer has submitted.

7) Beyond Happy Little Forms

This is a bonus for all the work you’ve done in steps 1-6 to optimize your forms. Tired of the same old look for INPUT and TEXTAREAs? Add some color, change borders and get crazy by applying a style sheet to your form elements.

   <style>     input, textarea, select {     font-family: Arial, sans serif;     font-size: 20pt;     color: #ffffff;     background-color: #000000;     border-width: medium;     border-style: ridge;     border-color: #00FF00;     }     </style>

As a Web professional, I don’t generally recommend this kind of tomfoolery, but if your site’s a fun thing where color and wackiness abound, go for it. Just don’t tell self-appointed usability sheriff Jakob Nielsen that you got this from me. I’ll never hear the end of it.

…and may happy little forms dot the skies of your Website!

Replay

Category: Patterns & Practices Time: 2001-09-07 Views: 1
Tags:

Related post

  • Multi step user registration form drupal 6 2011-10-06

    How to do Multi step user registration form in drupal 6 ? I am having an idea of doing multistep process using custom form. But i am bit confusing while doing the same case with "user registration". For example : Let us consider i am having 10 f

  • How to save the user submitted values of a multi-step user registration form? 2011-11-09

    I would like to create a multi-step user registration form in Drupal 6. The form_alter details are below function caubo_registration_form_alter(&$form, &$form_state, $form_id) { if ($form_id != "user_register") return; if (isset($form_st

  • How to save the user submitted values of a multi-step node editing form in database after last step submission in Drupal 7 2011-10-06

    In Drupal 7, i am trying to create a custom content type by creating my first module (not by admin UI). So i have defined my custom content type by using hook_node_info(). For my node editing form, i am using hook_form() and defined my custom node's

  • Remove extra sign-in step after enabling Forms Based Authentication 2012-06-16

    Now that I have enabled Forms Based Authentication (FBA) on my sharepoint site, there is an extra Sign-In page where I have to select what type of authentication I wish to use. I pretty much want users to only use FBA. Therefore this step is redundan

  • How do I pass the nid of the current node to the first step multistep modal form? 2014-06-01

    I am using the ctools plumbing to create a nodal form. This is what the relevant part of my code now looks like: /** * Implements hook_entity_view_alter(). */ function mymodule_entity_view_alter(&$build) { $nid = $build['body']['#object']->nid; //

  • Persisting database row ID between controller actions on a multi-step "create item" form 2015-02-24

    I have a form on an anonymous site which has 3 steps. A user submits each step individually, in sequence (1-2-3). BUT, step 1 creates a new table row, while steps 2 and 3 only update the existing row (from step 1), writing to different sets of fields

  • Create new record and add (lengthy) details in one step? (Accordion Forms) 2015-08-10

    I was hoping to solve this data entry problem with an accordion form, but now I'm not so sure if this is the right way to do it. I am concerned that information might get lost if I place the save button at the end of the form. If I place it within th

  • Do you need an exit or cancel button for a multi-step web-based form? 2015-10-06

    I have designed a 3-step form. The user will click a button that navigates to its own page without global elements to rely on getting back. If the user doesn't want to complete the form and wants to go back to where they have come from, should we jus

  • Extracting data in Tweepy in useable form (JSON) 2016-02-06

    I am using Tweepy to gather data on followers. I am able to print the returned data, but no matter what I try, I can't save the data to a file in a reuseable form. Below is the way that I got it to successfully export to a txt file, but when I call t

  • "Not downloading file in useable form" error when trying to make a Live USB stick on a Mac 2014-04-28

    I have downloaded ubuntu onto my Mac but when I click on the file I get message that The Following Disk images couldn't be opened.. Image ubuntu-14.04 reason no mountable file systems. What do I need to do. I am trying to produce a USB version to use

  • Drupal Form function called twice on 2nd page of multi step form 2012-04-05

    we have developed a form builder that generates an array that is then used to dynamically create a multi step form that increments with each step depending on which button is pressed (back forward etc). The problem is that when going onto the 2nd pag

  • Should user registration be tabbed or part of a multi-step form? 2012-05-21

    I am trying to find a good way to design my registration form. I have looked at the idea of having multiple steps for the form. Or using a tabular layout. Both of pros and cons. I am wondering which approach is easiest for the user. I want to make th

  • Acceptance tests for large multi-step online form 2012-12-20

    I have to extend/fix a large online form written by other developer. There is a lot of code, mixing PHP and JS. It's kind of write-only style of coding and I want to redo it completely, but currently I can't. It works like this: It is a wizard-style

  • Redirect to Continue Multi Step Form 2013-08-27

    I am building a form that can either begin on the home page or at the '/apply' url. I used this tutorial to build the multi-step form. The form works great if I start from '/apply' and begin at the very beginning of the form process. The form does no

  • Adding Page break to multi step form 2013-08-30

    I am having somewhat of a problem, I am trying to use ajax commands to go to the next case on my form. I dont really understand how to complete this and ive tried numerous ways without any success. Basically what im trying to do in my ajax callback l

  • Multistep ajax form, rebuild form and replace contents with the current step 2013-12-09

    I have a multistep form. In the first step i have an AJAX submit callback that updates my &$step in $form_state and should return the next step of the form in the same page (replace contents of the form with the form elements in the second step) e.g.

  • A Multi-step Form to display Database Data at the End 2014-11-21

    I'm fairly new to Drupal but I'm building a site using Drupal 7. Most of the stuff is pretty standard Drupal things, but one of the things my stakeholders want is a tool that does the following (and I'm not sure the best way to implement this using D

  • Adding action to each step of a multistep form 2015-02-28

    I'm trying to have a multistep form for user registration. I'm trying the Flexiform module. In the first step I ask for user mobile number, then using an action I want to send a random number to him. In the second step I'll ask him for the random num

  • Add captcha to last step of multi-step form 2015-05-07

    I have a multi_step form which contains four steps. I want to add captcha to last step of the form. --------------Solutions------------- use this code in your template.php, you need to know what the ID of the last form is, <?php function MYTHEME_form

iOS development

Android development

Python development

JAVA development

Development language

PHP development

Ruby development

search

Front-end development

Database

development tools

Open Platform

Javascript development

.NET development

cloud computing

server

Copyright (C) avrocks.com, All Rights Reserved.

processed in 0.742 (s). 13 q(s)