8 ways to take the pain out of Drupal's admin forms
When you really look at it, most interactive web applications like Facebook, Hotmail, and even Google Docs are really just forms. You put in values, click submit, it interacts with a database, code runs, and you see results. Drupal is no exception. Some forms are longer than others—cough cough, modules page—but they are forms none-the-less. So naturally, by replacing Drupal's default form elements with newer, more modern alternatives, we can make a big impact on Drupal's user experience. If that's your goal, here are some options worth looking into:
Multi-select
By default, Drupal gives you three basic multi-select options: checkboxes, autocomplete, and select lists. These can get the job done, but each one has weaknesses. Here you can see each option, its pros/cons, and alternatives for improving the experience.
Default Widgets
Pros / Cons
Alternatives
Checkboxes
Pros:Basic. Intuitive. Great if there's only a couple terms.
Cons:Long lists take up too much space.
Multicolumn checkboxes radios [1], Styling to display checkboxes in multiple columns.
Autocomplete
Pros:Small profile. Search box is a common pattern.
Cons: It's too slow to act like instant search. For tagging, you cannot see all your available options. Comma-delimited autocomplete isn't a common pattern.
Multi-select List
Pros:Small profile. Can be used for long and short lists.
Cons: Command-click is unintuitive. Cannot see all selected terms at once. Small space to operate in. Unselecting terms is difficult. Difference between 'highlighted' and 'selected' is ambiguous.
Webforms
It may not come with Drupal core, but odds are that you have the Webform module installed on your site. With content-creators building forms and users filling them out, a few field improvements can go a long way.
Defaults
Pros / Cons
Alternatives
Key|Value
Pros:Makes it possible to define keys and values.
Cons:Pipe delimiting is awkward.
Select List / Radios
Pros:Appropriate for most uses.
Cons:Doesn't support open-ended options.
Select or other, Conditional Fields, Field Conditional State
Classic Webform UI
Pros:
Generally intuitive. Supports drag and drop sorting.
Cons:No preview. Requires clicking through to edit individual field options. Can only add one form element at a time.
See a demo video (Drupal Gardens)
The Options Element and Select or other modules provide developer tools you can use to improve the forms in other modules as well, so if you're a module developer, you may want to take advantage of that.
HTML 5 Forms
The web has charged ahead since the last release of Drupal, and HTML5 supports many new features that Drupal 6 and 7 still lack. Here are some notable modules you can use to incorporate these improvements.
Defaults
Pros / Cons
Alternatives
File Upload, Image Upload
Pros:Simple. Works as expected.
Cons: Doesn't support multiple uploads.
Multiupload Filefield Widget, Multiupload Imagefield Widget
Text fields
Pros:Simple. Works as expected.
Cons: Drupal's form API doesn't support HTML5 form fields or HTML5 element attributes.
The Elements module provides developer tools instead of widgets you can add through the UI, but it's still nice to have modern form elements easily available to developers. You can also try out one of the many options for HTML5 drag and drop file uploads and see if there's one that suits your needs.
With a handful of these features going into Drupal 8, and other good ones in the works, there's a lot of progress in this space. In the mean time, these modules will take you far.
What do you think? Did I miss any?
[1] Multi-column checkbox radios is only partially ported to Drupal 7.