8 ways to take the pain out of Drupal's admin forms

Aug 31, 2013

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.

Autocomplete Deluxe, Chosen

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.

Multi-select Module

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.

Options Element

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.

Webform Alternative UI

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

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.

Comments