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.

Fast forward 25 person-weeks, and we've now rolled out our improved user interface as part of the latest Drupal Gardens release. To see how it looks, take a look at the video below or create a free Drupal Gardens website if you prefer.

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.

Comments

Irakli (not verified):

Looks great! Thank you Nate and Acquia!

December 29, 2010
fschaap (not verified):

It's fantastic that this level of slick UI is starting to show up in Drupal without compromising or dumbing down the modularity or complexity of the modules/functionality it is applied to.

A next step would be to develop an equally modular but accessible Drupal UI (or UX) language (pattern) that describes best practices for different kinds of user interaction and the widgets/behaviors (affordances) that enable them.

Think: default regions/blocks for actions, parameters, data, previews, etc. Make stuff for different functionalities (webforms and Views come to mind especially) appear in recognizable places with recognizable actions.

December 29, 2010
James Elliott (not verified):

We created two new elements as part of our UI, horizontal_tabs and vertical_accordion. The elements were split off from our work on Webforms and Form Builder into a separate module because we plan on using the interaction in more places in the Drupal Gardens UI. As we develop more interaction patterns as elements like this they are going to be added to that same module.

It lives on drupal.org at http://drupal.org/project/ux_elements.

December 29, 2010
fschaap (not verified):

That had not popped up on my radar. Very cool! Kudos.

December 30, 2010
Anonymous (not verified):

No need to reinvent the wheel but no need to duplicate it either. Would have liked to see an integration of Form Builder with CCK instead of Webform, and make CCK as easy to use as Webform.

CCK and Webform seem like an unnecessary duplication of effort.

CCK has a heavy interface and backend, while Webform has a more streamlined approach...

December 29, 2010
EdgarPE (not verified):

Actually, Webform and CCK are two different things, with different goals. CCK forms collect content tightly integrated and presented on the website, wile Webform is a simple form builder, which allows site the site to collect arbitrary data form visitors for later processing outside of the websites scope. Bottom line is CCK's integration and presentation of the data makes it more heavy on backend and interface.
By CCK integration I mean everything the node system offers, for example commenting, access control and permission system, voting. revision handling and so on.

January 3, 2011
mherchel (not verified):

It's beautiful!

December 29, 2010
Jeff Geerling (not verified):

I was just helping a friend with his Gardens website yesterday; he and I both love the new Webform interface, and have only one complaint: the preset lists for popup menus are gone. It would be great to not have to enter in all 50 states one by one :-)

But the UI is slick... Only room for little improvements here and there. I have only tested it in Safari and Chrome. Hopefully it works great in IE as well!

December 29, 2010
James Elliott (not verified):

We weren't able to get all of the settings and components into our first release but we have plans to add more components in the coming weeks. Part of that plan is to add groupings of fields as a single component. Such as an address group that has a street, city, state, zip textfield with appropriate labels for even quicker form generation.

December 29, 2010
just-passin-thru (not verified):

This is amazing work! Once again, drupal is head and shoulders above the competition.

Any thought about adding this type of interface to field in core?

December 29, 2010
EclipseGc (not verified):

Yeah, I had 99% of this working back at Drupalcon DC in Drupal 6, but had a really hard time drumming up help to overcome the few nagging bugs in the system. Oh well... :-(

But it's REALLY great to see it finally working and I can't wait to see it go back to the community!

December 29, 2010
David Rothstein (not verified):

Are you referring to http://drupal.org/node/468176? That code was the basis of the Form Builder-Webform integration that we worked on. It was removed from the Webform module itself a while ago, but we took that code and revived it as part of Form Builder itself.

Obviously we added a lot of features and bug fixes on top of it, but your original code definitely did not go to waste :)

There is also a working Drupal 6 version of that patch, which quicksketch just committed yesterday. If you install the new "Form builder Webform UI" submodule in Drupal 6, the basic interface should be working there. See http://drupal.org/node/954884 for the history and further details.

December 29, 2010
EclipseGc (not verified):

YAY, that does make me happy to know that I could at least give you something to build from. Hopefully it was at least moderately helpful. I eventually got bogged down in form_builder bugs and didn't have the time to hunt it all down.

December 29, 2010
Dave Cole (not verified):

This new UI is an exciting step for Webform module. Nice work. I'm wondering if you've had a chance to consider an alternate approach to submission data storage for high-volume forms?

December 29, 2010
Chris Brookins (not verified):

Good feedback about re-exposing a way to paste in many items from a list at once. It did confuse some people to have 2 ways to do it in in our tests, but we can do better and re-show it. Of course it is hidden only in the Gardens UX, the module still supports both ways.

December 29, 2010
EclipseGc (not verified):

Chris,

Webform actually supports custom form components, why not just build a custom state component? (and I would imagine a number of other non-generic tools that most people could use).

Just saying :-)

December 29, 2010
Anonymous (not verified):

Awesome. The UI of Webforms often prevents me from using it; no longer an issue.

December 29, 2010
Larry Garfield (not verified):

Oh wow. That's seriously slick.

I actually think that sort of UI pattern would work very well for Panels/Context/Butler, too. Definitely something to keep an eye on, as handling complex configuration UI is a serious challenge in Drupal. :-)

Hot stuff!

December 29, 2010
Chris Brookins (not verified):

Larry, good idea. We also want to get this UI pattern working for CCK some day. :)

December 30, 2010
Anonymous (not verified):

These two features are badly needed: validation via regular expressions, and conditional form fields.

December 29, 2010
patcon (not verified):

AMAZING! Maybe in the future the content type creation UI will be as smooth and awesome as this. So excited by all the progress lately! haha GO DRUPAL!

December 29, 2010
eigentor (not verified):

I believed the original intention of Form builder was to provide it for both Webform and CCK.

Would the thing have to be mostly rebuilt to be also usable for CCK (aka Fields ;)) or can a lot of the code be reused for that goal?

December 29, 2010
Anonymous (not verified):

Yeah, in the past I've always been really confused by the functional overlap between Webform and CCK.

For example- build a registration form for a conference asking familiar questions such as contact info, membership info, dietary restrictions, travel info, and course info. I could have used either approach with different pros and cons. I ended up with a CCK based approach because it implemented better with Views, and gave a better back-end interface to sorting through the registrations.

So yeah, I'm quite surprised to see all this energy go into Webform. When is it a better option? For the Wordpress/blogger type crowd?

December 30, 2010
EclipseGc (not verified):

If you don't need to be displaying the information you're collecting back to users (just to an admin) then webform is a clearly better solution. Once you need the ability to mash data you're collecting into something else, webform is sort of "out", but from a "hey I need a contact form" perspective, there's no better tool.

Included in this is the fact that creating nodes from user data is not usually what you actually want, and if you have a need for many different forms, you almost certainly don't want to create a new content type for each of those form needs.

December 30, 2010
kamgd (not verified):

I am relatively new to Drupal and have been working with Webform among other things. Is this version available for use outside of Drupal Gardens? If so, where can I download the module from? I am testing with Drupal 7 RC4.

Thanks!

December 30, 2010
David Rothstein (not verified):

Yes, this is available for use outside of Drupal Gardens - it is GPL software. As of today, we've posted it as a module on drupal.org: http://drupal.org/project/webform_alt_ui

(Previously we only had posted the patches against other modules, not the main part of our code.)

The above is the place to start, although as described there you will still need some patches against other modules (for the time being), in order to reproduce the same experience that is currently on Drupal Gardens.

January 11, 2011
Murtaza Chang (not verified):

Great!
A simpler version of wufoo.com, Thats what I always wanted in drupal. Did you guys saw wufoo's UI before or its just coincidence that it resembles with its UI?

December 30, 2010
Geshan Manandhar (not verified):

its amazing, the video rocks.

December 30, 2010
Martin Baker (not verified):

I've yet to use webform but this UI is very impressive.

January 3, 2011
werner glinka (not verified):

This looks great. I use Webform often and this will make it much more pleasant to implement. There is one big thing that is still missing for front-end types like me (and often requested by clients): smooth integration with a lightbox. The ability to go through the whole form submission process including verification and CAPTCHA via AJAX in a lightbox would be fantastic.

January 7, 2011
Dries:

The Webform Alternate UI module is now available on drupal.org at http://drupal.org/project/webform_alt_ui. 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. Details in my blog post above.

January 12, 2011

Add new comment

© 1999-2014 Dries Buytaert Creative Commons Attribution-NonCommercial-ShareAlike 3.0 License.
Drupal is a Registered Trademark of Dries Buytaert.