Jason’s postings and stuff

If you’ve stumbled across Wufoo’s blog, you’ll notice they’ve done extensive research into online form usability, given it is their core competency. ExtJS has its own CSS for forms, but it is possible to implement some of the Wufoo form suggestions.

It’s easy to put the form labels above the field inputs:

new Ext.form.FormPanel({
            ...
            labelAlign: 'top',
            layoutConfig:{labelSeparator:''},
            items:[...],
            buttons:[...]
          })

If you’d like to bold the label, the following CSS can be included in a stylesheet loaded after the ExtJS stylesheet.

.x-form-item-label {
  font-weight: bold;
  font-size: 0.9em;
}

Finally, multiple columns are a challenge in ExtJS anyway, so it is pleasing to see they aren’t recommended from a usability stand point for users.

Also, there’s a nice plugin that appears to allow for help text under a field.