Form Designer Panels
1. Main Toolbar - it contains buttons and dropdown menus for general actions, theme management, global settings, and control actions and settings.
In form mode (no selected controls) the toolbar contains following buttons and dropdown menus:
In selection mode (there are selected controls) the toolbar display following buttons for control actions and settings instead some of the described above:
2. Toolbox - it contains built-in total of 24 basic, composite and extra controls and widgets that help you create multifunctional forms. The controls and widgets (hereinafter: controls) are separated in 2 collapsible section depending on their type. The first section contains basic controls. The second one contains composite and extra controls. All controls are draggable and clickable.
3. Form Area - this is the place where you create a form. It contains a "Submit Button" control initially when you create a blank form.
To add another control on the form area you need to drag and drop it from the toolbox (2) on the left. You can also click on the any control originator in the toolbox and it will be added on the form area as each next control will be appended at the end of the list of controls just before the Submit button (the last one).
To select a control on the form area, please click on it. The Control setting (5) will be displayed.
To select multiple "Controls" use:
- hold "CTRL" and click mouse left button in order to select (or deselect) various consecutive (or inconsecutive) controls;
- hold "SHIFT" and click mouse left button in order to select various consecutive "Controls";
- hold "SHIFT" and key "A" and click mouse left button in order to select "Controls" from the same type (for example Text Box).
4. Form Settings - This panel contains settings allocated in 3 collapsible sections: General, Theme Classes and Theme/Inline Style.
General section contains settings for theme selection, options for redirecting when submitting the form, transition effects during the page navigation, highlight color for the control that is on focus, etc.
Theme Classes section contains setting to apply a theme class to the form. You can create a new class, to delete a class, to change the class of the form, etc.
Theme Style/Inline Style - this section contains settings which allow you to apply various CSS properties to the form. As the form is only one, there is no difference between Theme Style and Inline Style, except of that if you apply CSS settings to the form's class and you save the form's theme as a User Custom theme, yo will be able to apply that theme on another form via the Theme Selection dialog and to change the form class if it's necessary.
5. Control Settings - This panel contains settings allocated in various collapsible sections as following: General, Miscellaneous, Theme Classes, Control Theme/Inline Style,
Label Theme/Inline Style, Input Theme/Inline Style, Panel Theme/Inline Style, Setting Options, particular element's Theme/Inline Style.
The General section contains various most general settings as Unique name, Label/Question, Required, FitToWidth, Hover Text, size settings, etc.
The Miscellaneous section contains settings which are specific for particular controls.
The Theme Classes section contains settings to apply theme classes to the controls. You can create a new classes, to delete a classes, to change the classes of the controls, etc.
The Label Theme Style/Inline Style, Input Theme Style/Inline Style, Panel Theme Style/Inline Style, etc. - these sections contains settings which allow you to apply various CSS properties to elements of the controls.
The Setting Options section contains a setting which allows you to select whose element's settings to be rendered in the section below.