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

In many projects of web developement I had to make the forms more dynamic to integreate easily many syntax tests. After many research on the web and tests I chose a DHTML tools Form-Validation by DhtmlGoodies.

Somes functions of this tools were absent. So to integrate them I had to modificate this tool.

• autoSkip : skip to the next zone when we enter the maximall number of charactere.
• Display error message : You can define an error zone to display this message.
• Added Checkboxs and radio butons
• Two displays errors levels "zone" and "line"
• Add callback function to offer the possibility of executing javascript code during validation or invalidation of a zone or all forms.
• Format of the numerical's zones

Use

• Add t_form.css and t_form.js files to your page

   <link rel="stylesheet" type="text/css" media="all"  href="css/t_form.css" />
   <script language="JavaScript" type="text/javascript" src="js/t_form.js"></script>
  

• Define message's zone (option)

  __setZoneMessage('__your_id_zone__');
  ...
  <span id="__your_id_zone__"></span>
  

• add dhtmlform="1" attibute to form tag (to set this tolls ON of this form)
• Add callback's functions (option)

  setCallBackElt('valideElt','invalideElt') ;
  function valideElt(no,elt) {
     alert('valide ' + elt + ' ' + no) ;
  }
  function invalideElt(no,elt) {
     alert('invalide ' + elt + ' ' + no) ;
  }
  

• Modify your forms to add news attributes

  attribut	values	Description
  required	0/1	1 if this zone is required
  autoSkip	0/1	1 to skip automaticly to the next zone when the maxlength of char are entered
  mask	email numeric decimal money money2 dd-mm-yyyy yyyy-mm-dd yyyymmdd yyyy-mm	association of a regular expression to control this zone. Moreover, money, money2 add decimal mask add a zone formating
  freemask	9 : Numeric mandatory # : Numeric not m S : signe (+-) mandatory s : signe (+-) not m A : Aplha uppercase mandatory a : Aplha uppercase not m M : Aplha mandatory m : Aplha not m V : decimale point (. ,) mandatory v : decimale point (. ,) not m T : one char mandatory t : one char not m	Construct dynamicly a regular expression sample : #####9v## 999AN999 Sample <input name="age" id="age" freemask="9A9" type="text" autoSkip="1" required="1" size="3" maxlength="3">

download

t_form.zip

Sample forms