Productivity Portfolio

At some point, we all have uses for forms. They are one of the easiest and efficient ways to collect information for reuse. Going through my inbox, I can see several examples where information requests would be better handled by forms.

• Request for volunteers to work an event
• Feedback to an online seminar
• Request for organizational info

I suspect that each person sending me the email may have thought about an online form, but dismissed the idea. The usual reasons for dismissal include:

• I don't know how to create a form
• It takes too long to build a form
• I need a website

I can understand that dilemma. It wasn't too long ago I wrestled with Outlook email forms and complex conditional forms. The experiences left me cringing anytime someone mentioned the word "form". The brilliance of Wufoo is anyone can create a good working form in under 10 minutes. (Maybe 8 minutes if you don't start asking yourself what "Wufoo" means.)

You don't need HTML or CSS experience. You just need to be able to drag an drop predefined form elements and change their labels. And depending on your needs, you may not even need a website or a checkbook. Yes, there is even a plan that allows free forms.

Creating a Web Form

Much of Wufoo’s appeal for me was the simplicity. They present the user with an easy to use system that sections your screen into two parts. On the left, you can choose from a series of pre-defined form elements. Think of these elements as standard building blocks and ones you're most likely to include on a form. For example, fields such as address, phone, and price to name a few.

On the opposite side is your current form. Since the service uses AJAX you can see the changes you make. You don't have to save your form and refresh the browser. Although adding a new form element will drop it to the bottom of the form, you can drag and drop the form field to a new location.

Click to enlarge

Although form items are predefined, you can edit each field's properties. These properties are based on the field type. For example, you can specify the field label and whether it is a required field. In some cases you may wish to add text to help the person filling out the web form.

To gain access to the field properties, you click the specific form item on the right. The left side will change and show the field properties associated with that item. As you can see in the screen snap below, the form item on the right highlights so you can tell it has focus. In addition, the left side clearly identifies the form element by number and displays a field marker.

Click to enlarge

I know some people may be disappointed that the field labels appear above the fields. You may be used to web form designers that allow you to place labels to the side and left or right justify the text. Recent research into label placement indicates that the method used by Wufoo is easier for the human eye.

Once you finish your form, you can click the Save Form button. Rather than getting a sterile system message, you are greeted with a friendly informational panel. While some may think the text too cutesy it leaves no doubt about what you can do next.

Click to enlarge

Putting the WuFoo Form Online

As anyone who has created online forms knows, sometimes the easiest part is the form creation. Getting the form to display properly is another matter. In fact, this is where some of the other online form building services failed for me. Their code didn't display properly with elements falling off the screen. To be fair, I only tested using a website I'm building for a community project. I didn't do a full blown test akin to a testing lab. I had an immediate need for a good solution.

With Wufoo, I had three options to display my form. The only requirement was the user needs an iframe capable browser.

1. I could copy a code snippet that would embed the form in my web page. This would retrieve my form from their server and display it on my page.

2. I could copy all the form and CSS code and create the entire form on my web page.

3. I could send an email with a link to the form to a group of people.

I chose options 1 and 3 since it served several audiences. Now, this isn't to say everything was perfect as I hit two hiccups. The first issue was one tester said the form didn't render properly in Netscape 6. In looking through the support documentation, the company officially supports IE, Firefox and Safari. The bigger issue I met was aesthetics and the content management system I used. The CMS wanted a title and the Wufoo form had a title. This resulted in two titles.

While researching if I could suppress the title, I spotted a forum question about the CMS I was using. In my response, I mentioned the issue of duplicate titles. First thing Monday morning, I had a reply from Kevin Hale with a suggested fix using a CSS rule. While I'm not a CSS maven, I'm sure there are plenty of people elated to know you can do such customization.

Using the Web Form Data

One of the main reasons to use a form is so you can organize the responses. It does little good if you can't view the information. What's nice about Wufoo is you there are several ways to view your responses before exporting the info. One way is to view records from the Form Manager. This page shows your form and responses, but has some other features such as being able to see addresses on an embedded Yahoo! map. You can also add comments about a specific entry.

Another essential item that any online form service needs is an ability to export data. You don't want the vendor to have a data lock on your information. As with all the other features in Wufoo, exporting was easy. You can export your records as either a CSV file or Excel 2003 file.

After playing around with several services this past week, I must say this one is a keeper and I'm certain it will solve my needs. It's exceedingly easy to build and deploy forms. It may not handle all the form types you need such as complex conditional forms with branching logic, but it will hit the majority. The only thing you're left guessing is what the frig is a Wufoo? Better yet, open an account and build a form asking people to guess what the name means.

URL: http://www.wufoo.com/
5 Minute Wufoo Demo 

Related Web forms Article:

Google forms tutorial