[TYPO3-core] Prototype new Form Wizard

[Patrick Broens]

Hey all,

I'm currently working on a new version of the form wizard for the 
Mailform in the BE. Ingo asked me to share the current status with you, 
so you can give your opinion about it.

This is what I want to achieve at the end:
* The Form Wizard should be very usable for editors. No cryptic field in 
the BE working with | and *. No wizard that is hard to understand.

* The form in the BE should already look like how it is shown in the FE. 
Like rtehtmlarea an administrator should have the possibility to add its 
own stylesheet.

* All configuration must be available in the wizard. Right now the 
wizard only gives the possibility to enter the fields, not the 
emailaddress of the receiver etc.

* Storage of the configuration should be more standardized. This could 
be achieved by saving the configuration as XML. This way it's also 
possible to extend the wizard and Form cObject easier.

* The Form cObject and wizard must be more configurable. Although I'm 
talking about the wizard right now, I have a lot of ideas for the Form 
cObject as well, but this is for later. But I've already taken some 
things in the wizard, like an extendible dropdown for validation options 
of the fields, which an administrator can extend with his own preferred 
methods. You can also think about the way mandatory fields are shown to 
the user, by star, red words, before or after the field etc.

* Much more, see the wiki for instance [3], which I will update soon.

What has been done right now:
Till now I've only worked at the javascript part of the wizard. 
Everything is done with drag-drop-sorting with the help of Prototype and 
Scriptaculous. The code has to be cleaned a lot, and there is no 
possibility right now to add the fields from XML, read from the 
database, or to parse XML out of the added fields to save in the 
database. This part needs some code change, which I'm very aware of. 
Also the setting for mandatory fields is not shown, it is simply not in 
there currently.

This is just a mockup, with working drag-drop and sorting and changing 
some of the element properties. It has only been tested in Firefox, so 
don't try this in IE or any other browser, because I'm sure you will get 
errors. No styling has been done, only some column layout.

The idea for the HTML markup is taken from the article 'Fancy Form 
Design using CSS' by Cameron Adams [1]. The functionality of the 
interface is kind of similar to Jotform [2], but this one produces very 
bad HTML, does not have the possibility to have fieldsets in fieldsets 
and lacks much more (slow!), but you more get an idea of how this will 
work at the end (styling, icons etc.)

How to try this?
Unzip the files into fileadmin, or any other preferred folder. Maybe you 
have to change the path to the typo3/contribute folder. Go to 
http://yourdomain/fileadmin/wizard_forms.html and start dragging the 
elements into the form. When elements are in the form you can rearrange 
them by dragging them to another position. To change the label or 
legend, click on the text and change it (inline editing, but remember, 
no styling :-) so you will still see the input field. To change the 
element properties, click somewhere near the element, and go the element 
properties at the bottom-right. Some of these features are not working yet.

Patrick

[1] http://www.sitepoint.com/article/fancy-form-design-css/
[2] http://www.jotform.com/
[3] http://wiki.typo3.org/index.php/Form_Wizard_for_TYPO3_4.2
-------------- next part --------------
A non-text attachment was scrubbed...
Name: wizard_forms.zip
Type: application/octet-stream
Size: 7985 bytes
Desc: not available
Url : http://lists.netfielders.de/pipermail/typo3-team-core/attachments/20071010/fb8bb273/attachment.obj