Suggestions for a JavaScript form builder?

Question

I'm looking to integrate a form builder into a site I'm using, but I'm hoping to find a library that has some or most of the functionality I'm looking for.

I'm looking for a library that will give me a nice GUI for building the form, and a JSON (or XML, or similar) output that I can play with in the django backend. I'm planning to use django to output the finished form.

I tried running this through Google, but that only yields companies who make a business out of creating and hosting the forms online. But nothing in the form of a library.

Any suggestions?

Answer 1

Maybe this is not the right answer, but take a look anyway, it's awesome : you put some very clear and simple to read code on a Java - server and you get a full AJAX /Javascript form. Just take a look at the demo here.
I swear it's really, really awesome.

Olivier

Answer 2

I don't think there is anything exactly like what you want out there; probably the closest would be a rich text editor such as FCKEditor or TinyMCE. These libraries are a bit like the UI you used to write your question in StackOverflow, except that they have toolbar buttons for the different FORM elements (or if they don't, you can easily add them yourselves).

A user faced with one of these editors (assuming you'd configured it to have buttons for FORM elements) would be able to lay out a form with basically no technical knowledge.

However, if a rich text editor doesn't work for you, then you're basically stuck with using something like the jQuery UI library (I'm thinking mainly of the Draggable sub-library) to build your own solution.

Answer 3

There was a google Summer Of Code project last year that built a drag and drop form editor using the Dojo Javascript toolkit. Its not !00% complete in terms of the functionality I'm guessing you would want.

It does dump a javascript object representing the form which you can convert to JSON to send over the wire.

Depending on your javascript skillset it should give you a headstart on the problem.

The demo is here: http://jbalogh.dojotoolkit.org/dojo-svn/release/dojo/soc/test.html

Blog posts by the person working on it: http://www.dojotoolkit.org/blog/jbalogh

Answer 4

It depends on if you're ready to program it yourself. How dynamic do you want it? A simple form builder shouldn't be too hard to program using GWT, Dojo or your-favorite-js-library if you want to go that route. I'd recommend GWT because it's really fun, simple to use and takes care of the incompatibilities between browsers.

Here are some thoughts for possible inputs to each form/question:

• Single line (for names etc)
• RichTextArea (similar to FCKEditor)
• Calendar date/time
• Multiple choices (checkbox)
• Single choices (list selector)

Each input needs a corresponding question, or a label. These need to be handled in your Model in Django, and represented as such in the forms view (and the editor).

I recommend you check out how to embed a GWT application into existing templates/html and how you can communicate between django and GWT using json

Hope this helps,

Answer 5

If you dont mind spending a bit of cash you can look at:

Machforms : http://www.appnitro.com/

The form builder itself is entirely client side JS, so you would just need to post the output (which is JSON) to django instead of their php script.

Answer 6

I would recommend the awesome ExtJS framework to build such kind of application. Here's an example.

ext/formbuilder

Add a form panel, then drop a textbox and so on...dead simple. Ext JS 2.2 and 3.0 (not yet ready) are LGPL and GPL licensed, you have also commercial subscriptions available, I think it worth to have a look at it.