Darren Mothersele

London based Drupal Web Developer
Facebook Twitter Drupal.org LinkedIn RSS Feed

Drupal UI Improvements: Sexy Tag Entry Widget via jQuery Progressive Enhancement

Many things in Drupal are not obvious to non-techie (and even techie) users. One of the common sources of confusion can be the complex node content add and edit forms. One problem I've found in particular is using a tagging vocabulary and expecting users to format tags correctly and use commas to separate. Some users do and some don't which litters the site with long concatenated sets of tags.

Here's the first version of a module to make a nicer tag entry widget for Drupal vocabularies. This is somewhat inspired by Wordpress' tag entry system. This module is for Drupal 6 and provides a new option called "Active Tags" on the vocabulary edit page. If you select a vocabulary to be of the "Tag" type, and turn on Active Tags you will find a new widget for entering tags appears on the node edit page. Here's a before and after shot...


The image above shows a standard story node entry form with two standard tag entry fields. Below is the improved version with a jQuery input box that builds the comma separated list behind the scenes out of sight...

You can download the module below. If you get stuck or can offer any improvements then please let me know. This module is not fully tested yet, so try it out on a test/dev site first.

EDIT: I've removed the download from this page as you can now download this from the Drupal.org module page.

If you want to try this

If you want to try this widget out - go here:

http://test1.darrenmothersele.com/

and you can download from d.o:

http://drupal.org/project/active_tags

Post new comment

The content of this field is kept private and will not be shown publicly.
  • Web page addresses and e-mail addresses turn into links automatically.
  • Allowed HTML tags: <a> <em> <strong> <cite> <code> <ul> <ol> <li> <dl> <dt> <dd>
  • Lines and paragraphs break automatically.
  • You may post code using <code>...</code> (generic) or <?php ... ?> (highlighted PHP) tags.

More information about formatting options

Recent comments

Latest Posts