Form Generator
Please note that the form generator is a separate feature that should be additionally purchased. Contact your imperia sales person for further information.
imperia's form generator provides an easy way to create HTML forms by simply Drag&Drop. It consists of an EDIT-mode controller with all the available form fields and a drop zone where you can Drag&Drop the ones you desire.
This chapter gives information on how to work with the form generator. The available form fields in the controller may differ as they can be defined freely by your template developer.
The EDIT-mode Controller#
The EDIT-mode controller is the box that contains all the available form fields that you can use. Depending on the settings, done by your template developer, these fields may vary. Select the ones you want to use in your document and than simply use your mouse to Drag&Drop them into the drop zone.
On the image above you can see a controller with the most commonly used form fields. Every field has a heading with the name of the corresponding field/button.
The controller is visible only when you are in Edit mode. Once you go to any of the other modes (preview, save, etc.) the controller is no longer displayed and you can only see the drop zone with the fields you have selected.
The EDIT-mode Controller's Position#
The position of the EDIT-mode controller on your screen depends on what was set in the template.
There are three available options for the position of the EDIT-mode controller:
Fixed Position#
If this option is set, you see the controller on your screen at all times and it is positioned above the drop zone.
Pop-up#
If this option is set, you only see the drop zone on your screen as the controller is hidden. To call it click inside the drop zone.
Slider#
Note
This option is not supported by all browsers.
If this option is set, the controller is placed on the far right side of the web page. You only see the left part of the controller. To call it, simply click on its visible part.
The Drop Zone#
The drop zone is simply the place that you are allowed to put the available form fields. It can be any HTML container, which is defined by your template developer. If in doubt contact him or her for more information.
Working with the Form Generator#
imperia's form generator is extremely easy and intuitive to work with. All the actions such as adding, removing and changing the order of form fields and buttons is done via Drag&Drop. The following section gives you information on how to add or remove a field and how to configure the attributes. Please, read also Attributes to get a better understanding about the available fields and their attributes.
Adding a Field#
To add a form field click on the desired one in the EDIT-mode controller and Drag&Drop it inside the drop zone.
You may add as many fields as you desire.
Removing a Field#
To remove a form field, you have already inserted, click on it inside the drop zone and Drag&Drop it outside of the zone.
Changing the Order of Fields#
The order of the inserted form fields within a drop zone is also done by Drag&Drop. Select the field you wish to move, click on it and Drag&Drop it to the desired place.
Configuring Attributes#
Once you have inserted form fields/buttons within the drop zone you can edit the available attributes. To do that click on the desired field. An Options dialog box opens:
On the picture above you can see the Options dialog box. Each dialog contains a heading with the name of the corresponding form field and the icon that is used to exit the dialog without saving the changes.
Below the heading you can see the available attributes that may be changed. To change one of the attributes, type the content in the text field next to the attribute's name. The ID attribute is automatically filled by imperia, but you may edit that at any time.
After you have made the desired changes click the Save on the bottom right of the dialog.
Making a Field Required#
If you wish to make a certain field mandatory, activate the Required checkbox below the attributes.
Adding a New Select Option#
To add a new select option to radio buttons, select and checkboxes click on the desired form field to open the “Options” dialog. You see the sign next to the “Control label” attribute. Clicking on will add a new field below the existing ones. Type the value and the control label and save your changes via the Save button.
Deleting a Select Option#
To delete a select option from the radio buttons, select and checkboxes click on the desired form field to open the “Options” dialog. You see an “X” sign next to the “plus” sign. Clicking on the “X” sign will delete the corresponding select option. Click Save to save your changes.
Available Fields#
By default, the available fields are the most commonly used HTML form fields, such as text field, textarea, e-mail, radio buttons, submit button, etc. These may differ on your system as they can be changed by your template developer. This section will cover the default settings of the form generator.
Every form field has a label. For more information on how to configure the attributes of a field see Attributes.
Text
A single-line text field. The available attributes that you can change are label, placeholder, help text, name, value and id. You can also make the field required.
Textarea
A multiple line textarea. The available attributes that you can change are label, placeholder, name, value and id. You can also make the field required.
A form field for an e-mail address. The available attributes that you can change are label, placeholder, name, value and id. You can also make the field required.
Checkboxes
Checkboxes allow you to choose none or several options from a limited list. The available attributes that you can change are label, name, value and control label. You can also make the field required.
Radio Buttons
Radio buttons allow you to select one of several options from a limited list. The available attributes that you can change are label, name, value and control label. You can also make the field required.
Select
This form field allows you to create a drop down menu with different options to select from. The available attributes that you can change are label, name, value, control label and id. You can also make the field required.
Submit Button
A submit button is used to send information to the server. The available attributes that you can change are name, value and id.
Attributes#
Label
The label attribute allows you to change the “Field label” of the form field.
Placeholder
The placeholder is a short hint of what is expected to be the content of a field. The hint is displayed while the field is empty and disappears when a user starts typing.
Note
This option is not supported by older browser versions that don't support HTML5.
Help text
The help text attribute is available only to the Text form field. It is displayed on the right of the text field and it is intended to give some hint to a user what information needs to be inputted.
Name
Specifies the name of an element.
Important
This attribute is mandatory for the radio buttons. If the name is not set, a user will be able to select more than one radio button.
Value
The attribute value presets content for a form field. If a user does not fill the field, the content of the value option will be sent to the server.
The value attribute for the Submit button will change the text on the button.
ID
Specifies a unique ID for the element. imperia generates an ID automatically, which you may change if you need to.
Control label
The control label is available to the radio buttons and the checkboxes. This is the text that will be displayed next to the button/checkbox.
Required
By checking the “required” checkbox you specify that the field must be filled. An asterisk will appear next to the field label. The submit button does not have that option.