The Future of Form Building in Drupal (it's here!)

Today Lullabot released an exciting new project into the Drupal community. It's the Form builder module: an AJAX, Drag and Drop interface for constructing forms in Drupal. We hope that it will become the defacto standard in building forms in Drupal, replacing our inconsistent form-building tools that are spread across CCK, Webform, Profile, and other modules.
















The interface for Form Builder.

Drag and drop and AJAXy, but degrades too! No need for JavaScript required.

Overview

The Form builder project reads and modifies Form API arrays. Using a well-known data-structure that most Drupal developers are familiar with should make for low barrier to entry for utilizing the new module.

The project uses a AJAX-based interface for updating form elements. As you modify properties such as "Title" or "Description", Form builder makes requests in the background to update the element through Drupal's internal FAPI system. The user gets a live preview of their changes without saving the form. This approach means that no additional JavaScript needs to be written by implementing modules, since the rendering is done in PHP and then sent to the client as needed.

Demo

Enough talk, go try out the demo and see it in action.

Implementing Form Builder

The Form builder is intended to only build forms. You can't actually use the forms you've built through the interface unless another module implements the hooks provided by Form Builder to save the changes. In short, the implementing modules need to learn how to read FAPI arrays and determine what those changes mean.

Take the node form for example. We have several modules that all modify this form:

  • Taxonomy: Adds options for vocabularies/free tagging.
  • Menu: Adds options for placement in the menu system.
  • CCK: Adds all kinds of customized fields.

When a Form Builder interface for the node form is presented, Form Builder takes the entire form and presents it for editing. Each module that modifies the Form will say "hey, I'm responsible for X elements in this form". Each element that is claimed by a module then becomes editable. Elements that are not claimed cannot be changed.

After the editing of the form is finished, the new FAPI array is sent back to each of the modules that claimed elements. Each module module looks at the new array and updates its own settings as necessary to permanently save the changes.

This opens up all kinds of possibilities for editing forms. Instead of navigating to 6 different places to configure the node form, you've got a one-stop place where you can turn on and off or configure any field on the node-form (as long as the providing module identifies itself to Form builder).

Contributing

This module is still very new, so we don't recommend using implementations on any production site. The APIs are still very fresh, undocumented, and due to change. However, we'd love some help shaping the future of Drupal and there is a lot of work to be done implementing support for different modules. Check out the Form builder project page for more information on participating.

Form Builder Project: http://drupal.org/project/form_builder
Form Builder Demo: http://quicksketch.org/demos/form-builder-example

Published in:

Get in touch with us

Tell us about your project or drop us a line. We'd love to hear from you!