How to work with the Form Creator – get to know the work area

The form builder has a really simple layout – it is essentially divided into 3 functional sections:

1- Three top menus
A) General Toolbar
B) Element Toolbar
C) Design Toolbar
These 3 top menus contain form element (such as textbox, email element,radio button,listbox etc), style options (such as background colors, fornt sizes) and  important general options such as save and publish.

2- Settings on Right side
D) Form Design Area
E) Property Grid – Form Settings
F) Property Grid – Element Settings
G) Secondary Side Toolbar
The right side in mainly dedicated to settings. Form settings consist of general settings which apply to the entire form (such as form name, form width and height, post submit url etc). Form settings consist of the settings applied in the element itself (such as element background color, element tab index, if it is mandatory etc).
The secondary toolbar, which also appears on the right side has nothing to do with the settings. this toolbar it is an optional  toolbar which contains a mix of options from all 3 topbar menus and is active when the user creates a long form and cannot see the top menus due to scrolling down.

3- Main work area
H) form creator work area
This is the white (by default) area in the center of the form creator. You can place the elements on it freely or use a grid to snap elements to. (snap grid options are on the element toolbar-B)
creatorworkarea

Once you enter the form creator you can immediately start creating your form by dragging and dropping elements from the “element toolbar” (B) on to the design area (H).
Each element you drag on to the design work area may be placed wherever you wish – the design is flexible.

Whenever you select an element a red border will appear around it and its settings will appear on the right side (F). Using these settings you can change the element’s style (such as the background color) its tab index number, whether it is mandatory and so forth.

See the complete “element settings” list.

Stay tuned for the next post which will cover the essential settings needed when creating your form.

Advertisements