Search form

An improved Webform user interface for Drupal

At Acquia, we spent a lot of time improving the Webform module, one of the top 10 most popular Drupal modules, as well as the Form Builder module, a companion module that provides an improved user interface for the Webform module. The Webform module and the Form Builder module allow people to create custom forms such as contact forms, online surveys and more.

Both modules are maintained by Nate 'quicksketch' Haug, one of the top Drupal contributors. Like anything Nate does, the modules are amazingly powerful and have great code quality. We wanted to add support for creating custom forms to Drupal Gardens and believed that the Webform and Form Builder modules were the right way to go. No need to reinvent the wheel.

Before making Webform and Form Builder available as part of Drupal Gardens, we wanted to try and see if we could make Webforms easier to use, without making it less powerful. We spent about 200 hours to explore various different design and interaction models. We used both paper prototypes and working prototypes to conduct usability tests, and used these to drive further optimizations. After we felt good about the direction, we ran it by quicksketch. With quicksketch's guidance, we helped upgrade both modules from Drupal 6 to Drupal 7, and implemented the new user interface on top of that. The new drag-and-drop interface puts some things in different locations on the page and has a number of different interaction patterns compared to the old user interface. To do so, we wrote a couple of modules that add our user interface on top of the Webform and Form Builder modules. It is layered like a stack: Webform → Form Builder → Alternate UI.

We're contributing everything back to the community -- some things we've already contributed back, other things we're in the process to. We're also helping to back port some changes to Drupal 6, even though we don't need them for Drupal Gardens. With these contributions, everyone in the community can benefit.

The new user interface is an incredible achievement that a lot of people deserve recognition for, including quicksketch who spent many years of getting Webform and Form Builder modules to where we were able to use them as a starting point.

I'm pretty excited about this user interface, and would love your feedback and suggestions. What do you think?

Update on January 10th, 2011: the Webform Alternate UI module is now available on drupal.org. This module provides an alternate user interface for the Webform module, allowing you to create and edit forms from within an easy-to-use form building tool.

Plain text

Filtered HTML

Use [acphone_sales], [acphone_sales_text], [acphone_support],
[acphone_international], [acphone_devcloud], [acphone_extra1] and
[acphone_extra2] as placeholders for Acquia phone numbers. Add class
"acquia-phones-link" to wrapper element to make number a link.

To post pieces of code, surround them with <code>...</code> tags. For PHP code, you can use <?php ... ?>, which will also colour it based on syntax.