Recently I have searched a foms editor – wizard” in web mode. I looked for it on internet, believing many projects should greatly deal with this problem (I don’t like to develop something if it already exist). After many tests I have come to the conclusion that it does not exist (or that it is not well “referenced”…).
Also I have taken advantage of my holidays to do this “little” project.

After my research I signal you the following sites which seem quite good but do not fit my objectives (tey were not in opensource).

JotForm : I like the presentation

Wufoo : Seems interessant but an inscription is compulsory.

The goal

It is really simple !

Demonstration rbl_forms

• To permit to construct a html form in 100% web mode (without codeing)
• Not to force to use a library as (jQuery, prototype, dojo,..) in the generated code
• To offer the basics controls (compulsory area, size…)
• To be easily adaptable (it is at you to tell me if this goal has been succesfully reached)
• Not to use table
• To save in XML size
• To generate a page in pure html

Tools used

jQuery : I love it more and more, it’s lib !

jQuery UI : the logical extension to work in web mode.

t_fotm : For the validation part of the form.

The functionalities

To make easier the visual creation of the form the use of the “drag & drop” is very important to register areas of the form or to move them.

There is three levels of personnalisation ( Form, Column, Element ). Theses differents pannels permit to specify with precision the size and the presentation of the form.

The form pannel

This dialog box permit to specify the following informations (they are activated by cliking on the item “Edition Form” on the left pannel) :

• The name : form name attribut
• The file : to save
• The title : Display in the form (fieldset legend)
• The action : form action attribut (url or other)
• The method : POST or GET
• The size : Appear in the style properti (width, height)
• The layout : unused actually
• The CSS : This gives the principal style of the “form”

In the case of a cration of a new form you must not forgive of modify the “file” area to specify the names of the saving files.

Les colonnes

I accept the definition of many column for the construction of theses elements because I don’t want to have too vertically form. I limit it to three column at this day.
You can edit the proprieties of the column by selecting (by a simple click) the line “column 1″ of grenn/yellow color then by clicking on the item “Edition” of the left pannel.

Description of the pannel :

• Name of the column : unused
• Size : (width, height) can be define by resizing the column or by directly keyboarding the values.
• The layout : it is a CSS clss which permit to specify the type of presentation in the column.
• The CSS : other CSS class (at this day undefined but implented)

The item “supression” in the left menu permit to cancel/delete a column with the whole areas.

The areas

You can add areas in a column of the form by a simple “drag & drop” from the left menu. Also appear a dialog box which invit you to specify some informations (theses data change with the type of area).

• ID : for information (readonly
• Nom : attribut name
• Label : Input information (title / label)
• AccessKey : keyboard shortcut
• Format : standard input mask (email, date, money, …) for input control
• Freemask : you can use this to define other format / mask
  • 9 : A digit char 0-9
  • # : An optionnal digit char
  • A : An alpha char in uppercase
  • a : An optionnal alpha char in uppercase
  • M : An alpha char (upper or lower)
  • m : An optionnal alpha char
  • N : An alphanumiric char
  • n : An optionnal alphanumeric char
  • V : A coma or point
  • v : An optionnal coma or point
  • S : A sign + or –
  • s : A optionnal sign
  • T : A char
  • t : A optionnal char
• Regex. : a regexp for more complicated control
• Size :
• Table associted : personal use in other project
• max length :
• autoskip : sklip to the next zone if all char is entered
• CSS : style html (class)
• Required
• ReadOnly
• Aide : Help message

Sample form

Sample generated form

In the next versions

I would like add many other functionnalities in the next version of this tool.
Je souhaite ajouter plusieurs fonctionnalités dans les prochaines versions de cet outil.

• CSS : Define new CSS styles (form, colonnes, input)
• Translation : Add other language
• Add more complex controles : Captcha, Tabs, …
• Can select other datepicker and forms controles
• Add other load/save script in JSP, ASP, Perl…
• And more….

Do npt hesitate to contact me if you wish to help me in this developement or if you have add a functionality or correct a bug.

Download

rbl_forms last version

So I search specifics sites which propose to me an icon library (I wanted a sober interface, easy to use and free images).

The result of my research show to me three very interesting sites :

This site propose an easy research on his image bank and display the size and the licence conditions of each object.
An advanced research option permit to filter precisely the size or the wanted licence.

The interface is also very sober and easy to use. A research option by a “cloud tags” is avaible.
I regret that the licence and the size of the image can not be seen at once.

I find it less practical to use but however interesting. And it always permit to have a widest choice of images.

If it happens, it would be the biggest buying on the net. Indeed, to counter Google (who gives the impression to bother it), Microsoft announce a buying proposition of Yahoo for 45 milliard dollars.

I remember you that Yahoo exist since 1994 and the two (ex) student of Stanford (David Filo and Jerry Yang)can be very proud of their project ans of his valorization.

http://news.yahoo.com/s/ap/20080201/ap_on_hi_te/microsoft_yahoo

After three “releases candidates” the final version of the excellent XWiki software is avaible to download.

Xwiki is a Wiki Open Source multilingual, entirely written in Java. It offers all the services of a well securisated Wiki and permit an easy developping of the specifique functions (very useful to integrate this in existing applications). This sort of tools permit to develop quickly an entreprise Intranet by adding quite easyly specifique functions.

This new version offers better performans, New users, groups and rights management UI (I didn’t like the previous one), many pluggins anb many other things to see at this link. ici.

In my opinion I find the first contact very simple and quick. I particulary like the panel interface, the flux reader “Xwiki Watch” which is really very powerful and the exportation in RTF or PDF format.

If you don’t already know this tool I invite you to discover it quicky.

the official announcement
the download page.
xwiki.com.

When I surfed on the net, I discovered the site browsershots.org . This site makes screenshots of your web design in different browsers. It is a free open-source online service. With a subscription you can get a priority processing and so you can reduce the waiting delay (30 min without sunscription).

Borwsershots.org do this on 3 OS (Windows, Linux, Mac) and propose a large choice of browsers. I especially like the old browsers versions and the possibility to download all screenshots in 1 zipped file.

http://www.browsershots.org/