Want to get Lullabot article, videocast, and podcast announcements delivered right to your in-box?
Let us know your email address (we won't share it) and we'll let you know when anything exciting happens.
The Future of Form Building in Drupal (it's here!)
December 3, 2008
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.
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
Comments on this post will automatically be closed three months from the original post date.
Twitter
Mailing list
RSS Feed
Comments
Hell Yes
I love it, I love it, I love it.
Any idea when this will be
Any idea when this will be ready for production use?
Read my mind
After drilling through and building custom forms for the past week all I can say is THANK YOU!!!! Keep up the great work!
Absolutely amazing! This
Absolutely amazing! This module will speed form building up. Thanks for contributing. Will this be part of D7's core? +1 for the idea.
Umm...
Thank you thank you thank you! I feel like I spend so much time constructing my forms, and I think you just saved me ALOT of time! Way to contribute!
Can't drag fields into field set
On your demo page, I created a fieldset, and it says to drag a field into it. Is there a special technique for doing that? I tried dragging both existing fields and a new one from the sidebar, but neither one worked.
Possible but difficult currently
You should be able to drag fields into fieldsets. I'm aware that it's difficult to do, try aiming the cursor near the top of the fieldset, just below the label for the fieldset. The problem is caused by the fieldset changing sizes when the placeholder is removed. Of course a permanent solution is needed, but I haven't gotten to this issue.
Dragging fields into fieldsets
Hi Nate,
Great module!! For me, just reading your comment above - to drag the fields near the top left of the fieldset - made adding fields to the fieldset quite easy. I am not sure that the module needs to be changed, so much as having this additional instruction added. Mike
Works better if you disable
Works better if you disable 'collapsible' on the fieldset
Cool.
I wish I had this for my day to day work. We are thinking of using Drupal for a survey website, and this might be awesome for that! Thanks!
Impressive!
This is quite an impressive piece of work! It's great to see new ideas being pushed forward in Drupal and being implemented so nicely.
I'm interested to hear thoughts on how this will be leveraged or integrated with CCK. I could see using this method to create basic cck field widgets (and/or field groups) as well as providing a similar interface for building up content types (unless this would completely replace that.)
Based on your writeup, it seems the intention is that CCK would implement Form Builder support and you would be able to edit or add any cck field widget through this interface. Is that correct?
Great work and thanks for sharing it with us!
Intended to Replace CCK's Builder
Yep, this is intended to replace the current CCK method for configuring fields. CCK would implement the form_builder hooks for the node form then tell form builder how to edit all the CCK fields in the form. There's still a lot of work to be done to make form_builder suitable for CCK, but the demo is in fact nothing but an implementation of all the form_builder hooks in a separate "form_builder_example.module".
That's huge...
You realize this improvement will make CCK understandable to normal people.
AWESOME!
This will be one of the nicest things going, once it's stable/integrated. Drupal has so much potential, but one of the only things holding it back is how hard it is for the 'average' or even slightly above average user to truly customize things like forms.
I totally agree, to the
I totally agree, to the average user Drupal is a usability nightmare, we don't see it because we use Drupal every day and we've gotten used to Drupalisms.
Simple problems get over looked, like the "Read more" link been hidden between other links so users don't realise an article has more content.
Thanks for the explanation,
Thanks for the explanation, looking forward to seeing this evolve in that direction!
Thank for this! It's tools
Thank for this!
It's tools like these that make me want to make sweet love to your Drupal lobe!
WOW
WOW WOW WOW
Uhm WOW
Yeah WOW
This is incredible! This will save so much time and get some things that I tend to forget when putting forms together. Thank you Nate. Without a doubt this is featured module when we film next DrupalMAO.
.... wow
A small little tear has just feel from my eye. I thank you from the bottom of my heart.
I love you
I don't say this to anybody. But I really, really do love you lullabot!
awesome
big thank you...i would pay for something like this! lullabot grooves (ok, rocks too!)
wow, feels like wufoo for drupal!
this is amazing, thank you so much for this incredible interface and tools
You guys totally stole my
You guys totally stole my idea!
http://groups.drupal.org/node/13127
This is really, really impressive.
Welcome to the world of tomorrow!
Raising the Bar
Great to see the bar raised some more. I'll definitely play with this module, and make sure to tap into it where it would help. Thanks guys!
2006 Summer of Code: Form Builder project
I am glad this finally got done. We tried to get this done for CivicSpaceOnDemand back in Summer 2006.
http://groups.drupal.org/soc-ajax-form-builder
Cheers,
Kieran
This is utterly sextastic. I
This is utterly sextastic. I love you guys.
O'Reilly is right
From http://www.oreillynet.com/pub/au/3482?CMP=NLC-orm_author_news&ATT=DecHTM...
off the hook
Unreal.. thanks for this awesome contribution!
Looks great for prototyping
It looks like this would help cut down on normal FAPI development as well. Instead of tweak and upload, you could design and test the layout of the entire form, and then export the array for easy pasting into your module. If it's done properly, I could see this as being a great way to teach the FAPI.
Are you planning on t()'ing all of the text elements in a form? I know that doesn't happen in Webform or CCK, but it would be really nice if this module made it easy to build a form once and easily translate it.
--Andrew
Auto-translating, t()ing
That hadn't occurred to me when I did the export script. Seems like that would be a natural thing to do for a true FAPI exporter. The current demo was mostly just to show that it's really making that FAPI array.
Nate, Really looking forward
Nate,
Really looking forward to digging into this next week. You totally rock!!
Your best contributed work ever - Rock Solid
Thanks for filling the single biggest void in Drupal's framework. You guys have shown your best contributed effort ever with form builder. It's functional, customizable, simple enough for beginners, and robust enough for experts, not to mention a way slick UI.
Job very well done. I think this is a significant milestone for the Drupal community, as well as, critics. You guys continue to develop and share some of the best (of the best) work open-source, Drupal, or otherwise.
Your efforts and results are exceptionally impressive and equally appreciated. Great job Lullabot.
Cool!
Very cool, Nate! You should try to attend the Fields in Core Sprint (http://buytaert.net/fields-in-drupal-core-code-sprint) so we can brainstorm about how this might change CCK.
I totally agree, Nate should
I totally agree, Nate should be at the Field's In Core Sprint. This would make Drupal 7 the killer release.
Great Work
I tried demonstration - found it very cool.
Hope it is improve very much for using on production in next couple of months.
This is too great!!! A dream
This is too great!!! A dream comes true!
Very impressive indeed!
Thanks so much for this super slick piece of art. Saves a lot of time and a the UI would be and example of what the admin interface should look like in D7 (not to mention the node edit form).
So amazing
This is so great... thank you, I love you!
Yay!
Finally!
I'm always annoyed when creating a Webform that it doesn't have the same type of fields available as CCK. This'll make everything work the same way.
Looking forward to this module!!!
I've tried the demonstration
I've tried the demonstration and can say that it is fantastic! Thanks! My question is about will be there posibilities like in CCK to create options dinamically with php, and what about creating multistep forms, depandant dropdowns etc? Will this module cover these problems?
Impressive !!!
Really impressive !!!
I can't believe that nobody did it before.
Congrats!
Spreading Hungary
I just want you to know that I posted a short info in my blog (in Hungarian), which is aggregated by drupal.hu.
http://thamas.hu/20081204/fogd-es-vidd-urlapkeszito-drupalban or
http://drupal.hu/node/5620
(I've tried to send a trackback but it doesn't seem to work...)
Thanks for this fantastic module!
HOLY CROW. This is really
HOLY CROW.
This is really really awesome. Keep pushing at the envelope - sometimes (like this time) it'll move in a wonderful direction.
Un-be-lievable
An amazing week for productivity modules.
First I discover Cobalt (Drupal/Quicksilver integration) and now this!!!
THANKS 'bots!
Thank you, Nate. The staff
Thank you, Nate. The staff around here are going to be so happy when this gets implemented.
Awesome!
This is great! Going to help make Drupal a much more user friendly experience which I think is what it needs in order to gain more less-technical users. I can't wait until this is fully implemented! Hope the other form building modules jump on the band wagon quick!
Awesome! People needed this.
Funny, two nights ago someone asked why the Wedform module doesn't have an interface like this! What timing.
Looks good, I go play with demo now.
get to work
seriously... do you guys ever work? lol
I'm jumping on the awesome bandwagon
jQuery UI
Looks fantastic (and might finally get you off the hook for maintaining webform :)
So, you are building on top of jQueryUI. Does that mean you are going to push to get it into D7? Do you think it is ready (or will be ready in the D7 timeframe)? There was a big debate on this topic over at g.d.o/javascript, but there was no consensus.
Pro partial-jQueryUI
I'd like what I consider the "crucial" parts of jQuery UI added: Draggables, Droppables, and Sortables. Some others might be okay, but really these three form the true "core" of jQuery UI in my opinion. Most other things are actually finished products, like the date or color pickers.
The Drupal.org core issue is here: http://drupal.org/node/315035
Next logical step, awesome execution
This is the next logical step – this has been talked about for quite some time now.
However, nobody really began working on this or actively started promoting it. You/Lullabot did.
And the execution is just … awesome! Everything is simple. You never see too much information – which cannot be said of the rest of Drupal.
Thank you.
You've just given Drupal another edge over its competitors. Joomla for example will never be able to do this with this level of integration (i.e. integration with the data and modules present on the web site). Joomla does have form builder extensions, but they just generate HTML. They don't see a point in using something like the Forms API, but you proved once more why it allows us to do great things :)
Wow!
It is very usefull addon for a drupal. Very... Usefull...
Thanks for the work!
I could not get the demo to
I could not get the demo to work properly in IE7.
Seemed to work fine in FF3.
Otherwise.... AWESOME!!!!!!
I'm pretty sure....
... i just wet my pants a little.
Great module. It'll save countless people countless hours.
Much appreciated.
I'm working on a module to
I'm working on a module to automatically generate tables or divs for input form elements, to allow multiple fields on the same line. It does this by setting the #weight field of the element using one of several schemes to denote row/column.
I would be very interested in seeing if your editor can be adapted to allow WYSIWYG editing of the tables.
Mail me privately if you'd like to see the code and documentation as it exists so far. Here's some more info on a related post:
http://groups.drupal.org/node/17036
Drupal 6 version
Great work! Will there be a D6 version released?
great stuff! will fill in a
great stuff! will fill in a a huge gap and save people so many hours. this stuff is really critical for drupal to reach the next level so that designer and developers can quickly deal with the mundane and focus on more unique things. much appreciated
- bollywood gal
about new form field
Cool stuff.Hope to see this in drupal 7.This will place drupal in differnt category of CMS.
Best work.
wow
so I guess I'm building nate a statue hm?
or should I just build a statue of the entire lullabot team?
either way, looks like I have some statue-building to do
thx for the immense gasp u made me pull ;)
<3
Awesome
Lullabot is rocking! This will save developers a lot of work.
I am amazed about the UX design, it is easy, beautiful and understandable. Can these eyes have a look at Drupal 7 UX before we go beta, please?
It will be perfect when...
This will become perfect when they add the functionality to manipulate how the components will be presented at the interface. To allow, for example, include a textbox next to the other.
about form fields
I think it is currently for drupal 5 and not for drupal 6.The project pages shows all the releases.
Web Form
Hi,
How do we go about getting a blog on the SharePoint community portal ?
Thanks
does it work with webform now, or later?
so does this work with webform now to create non-module based forms, i.e. for end-users rather than module writers to create forms and add them to their site, like contact forms, etc.?
Good Point
I'd like to know whether formbuilder could be used for creating something like a contact form?
Jon
just amazing
just amazing module man. Good job. I hope that this module be the future to drupal.
Wow, you guys awesome. well
Wow, you guys awesome. well done!!!
please release for drupal 6 version of form builder
hi
i need this module for drupal6 version
its very urgent for me
It's open source right?
Perhaps you could contribute? You can make demands like that for commercial software but you have to wait for open source. :)
CCK node reference?
Looked at the demo and was very impressed. The forms theming section of drupal currently is really only available to developer types. This will be a great improvement. However I did not see any capability for adding a CCK node reference to the form. I did see the Taxonomy addition. Unless I missed something I am assuming this will be added in the future? Great work!
Database / CMS driven fields?
Hi,
Looks great & really easy to use!
Just wondered whether there are any plans for making the contents of drop down lists driven by databases or content management systems?
WOW!!!!!
Seriously, this is utterly amazing!!! GREAT WORK!!!!
I'd LOVE, LOVE, LOVE to see this integrated into the Core CCK UI somehow -- hopefully/possibly/maybe in D7?
Then again, I fear that all the cool stuff on the cusp of getting into core could end up getting stalled because of D7UX. Incidentally, it's a great idea to be discussing the the ideas they are bringing up -- but I'd hate to see good progress in other areas get delayed because of D7UX.
Drupal is really growing up, bigtime... these are good problems to have.
cool
This module is very cool but I can't find a D6 version.
looking forward for it
really looking forward for it, hope it comes in Drupal 7 core.
Any idea when this will be
Any idea when this will be ready for prodction use?
Lullabot is rocking! This
Lullabot is rocking! This will save developers a lot of work.
I am amazed about the UX design, it is easy, beautiful and understandable. Can these eyes have a look at Drupal 7 UX before we go beta, please?
Then again, I fear that all
Then again, I fear that all the cool stuff on the cusp of getting into core could end up getting stalled because of D7UX.
thanx for cool
thanx for cool stuff...future of Drupal
i think newbies and beginners can also use them easily
ashima
Cool Stuff
thanx for cool stuff...future of Drupal
i think newbies and beginners can also use them easily
ashima