The project

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

Be Sociable, Share!