# Form
## Form Designer
### Design mode
### ASP.NET editor
Click the **.NET** icon at the far right of the toolbar to open the ASP.NET code editor, which can be used to define server-side procedures, events, and global variables to handle any specific custom tasks. This feature is mainly intended for ASP.NET developers.
### AJAX mode
If you're using the form designer, you can enable AJAX mode by checking **Enable AJAX mode** on the **General** tab of the form configuration panel.
If you're using Visual Studio to develop a custom ASPX form in AJAX mode, do the following:
1. In the `
```
2. Since standard `FileUpload` controls are not supported inside the `UpdatePanel`, use our custom `WorkflowFileUpload` user control for your attachment needs.
3. Add the following line in the page constructor to prevent an issue that can occur when updating a row in a GridView:
```
this.UseClientSideOptimization = false;
```
You will see no difference at runtime, since all this does is prevent a postback when clicking the **Update** button and the validation fails. The `UpdatePanel` already prevents postback.
4. Register the postback triggers either in the `Page_Load` event or directly in the ASPX page.
## Toolbar
### Design mode
| Icon | Name | Description |
| :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------: | -------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|  | New form | Creates a new form or replaces the current form |
|  | Save the form | Saves the current form (you can also press **`Ctrl+S`** to save) |
|  | Print the form | Prints the current form |
|  | Save a section or field as tool | Saves the selected section or field as a custom tool |
|  | Duplicate a section or field | Makes a copy of the selected section or field and inserts it in the form. The duplicate section or field will appear below the selected section or field. |
|  | Delete a section or field | Deletes the selected section or field from the form |
|  | Form configuration | Opens the **Form configuration** window |
|  | Workflow view | Displays the interactive workflow view |
|  | Undo/redo | Undoes or redoes the most recent changes made to the form |
| **Styles** | Select a style | List of default and custom styles; select an item to change the style of the current form. |
| **Tools** | Select a tool | List of default and custom tools; select an item in order to add the tool to the form using the Insert button. |
|  | Insert the selected tool | Inserts the selected tool in the form |
| **Id** | Edit ID | Edit section and field identifiers |
| **Tooltip** | Edit tooltip | Edit section and field tooltips |
| **Format** | Edit format | Edit section and field format |
| **Appearance** | Edit appearance | Edit the appearance of headers, footers, labels, sections, and fields (see [Appearance](https://docs.advantys.com/workflowgen-administration-module-reference-guide/7.12.0-8/form-appearance-behavior-and-mapping#appearance)) |
| **Behavior** | Edit field and section behavior | Displays the interactive view of the workflow, activates the **Required**, **Read-only**, and **Hidden** clickable options for each form field, and sets the behavior of sections and form fields for each action (see [Field & section behavior](https://docs.advantys.com/workflowgen-administration-module-reference-guide/7.12.0-8/form-appearance-behavior-and-mapping#field-and-section-behavior)) |
| **Mapping** | Edit field’s action data mapping | Displays the interactive view of the workflow, activates clickable options **Retrieve the value** and **Send the value** for each form field and defines the data input and output for each action (see [Field data mapping](https://docs.advantys.com/workflowgen-administration-module-reference-guide/7.12.0-8/form-appearance-behavior-and-mapping#field-data-mapping)) |
| **.NET** | ASP.NET | Switch to the ASP.NET code editor |
### ASP.NET editor
| Icon | Name | Description |
| :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------: | ----------------- | ------------------------------------------------ |
|  | New | Clears the ASP.NET code |
|  | Save | Saves the ASP.NET code |
|  | Comment/Uncomment | Adds or removes `//` before the selected line(s) |
| **Design** | Form Designer | Switch to the Form Designer |
## Form configuration
A form created with the built-in form designer has one header, one or several sections, one or several fields per section, a **Submit** button, an optional **Save as a draft** button, and one footer.
### General tab
| Name | Description |
| ------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| **Header** | |
| Title | The title of the form |
| Width | The width of the form header
Numeric value with or without the unit of measure (px, pt, in, cm, mm, pc, em, ex, %), e.g. 720px
|
| Height | The height of the form header
Numeric value with or without the unit of measure (px, pt, in, cm, mm, pc, em, ex, %), e.g. 38px
|
| Image alignment | The alignment for the header image:
- Right: The image will be aligned to the right.
- Left: The image will be aligned to the left.
- None: No alignment.
|
| Image URL | The URL of the image to be shown |
| Image width | The width of the image |
| Image height | The height of the image |
| Image repeat | Sets if and how the image will be repeated:
- No-repeat: the image will not be repeated
- Repeat: the image will be repeated both vertically and horizontally (this is the default setting)
- Repeat x: the image will be repeated only horizontally
- Repeat y: the image will be repeated only vertically
|
| **Sections** | |
| Width | The width for all sections
Numeric value with or without the unit of measure (px, pt, in, cm, mm, pc, em, ex, %), e.g. 720px
|
| Adjust width automatically | Check to apply adjusted width to all sections |
| **Labels** | |
| Alignment | The alignment for all field labels:
- Right: the label will be aligned to the right of the field
- Left: the label will be aligned to the left of the field
- Top: the label will be aligned on top of the field
|
| Width | The width for all field labels
Numeric value with or without the unit of measure (px, pt, in, cm, mm, pc, em, ex, %), e.g. 150px
|
| Apply the width | Check to apply the width to all field labels |
| **Buttons** | |
| Submit label | The label for the submit button |
| Save-as-draft label | The label for the save as draft button |
| Enable save-as-draft | Check to enable and display the save as draft button |
| **Footer** | |
| Width | The width of the form footer
Numeric value with or without the unit of measure (px, pt, in, cm, mm, pc, em, ex, %), e.g. 720px
|
| Height | The height of the form header
Numeric value with or without the unit of measure (px, pt, in, cm, mm, pc, em, ex, %), e.g. 22px
|
| Image alignment | The alignment for the footer image:
- Right: the image will be aligned to the right side
- Left: the image will be aligned to the left side
- None: no alignment
|
| Image URL | The URL of the image to be shown |
| Image width | The width of the image |
| Image height | The height of the image |
| Image repeat | Sets if and how the image will be repeated:
- No repeat: the image will not be repeated
- Repeat: the image will be repeated both vertically and horizontally (this is the default setting)
- Repeat-x: the image will be repeated only horizontally
- Repeat-y: the image will be repeated only vertically
|
| **Security** | |
| Enable XML Signature | Check to enable the use of XML signature in the form data
Digital signatures are used to certify that a document has not been modified by the system or by someone who gained unauthorized access to the system. The XML signature is a W3C standard that defines the syntax and processing rules for creating and representing digital signatures. This is a method of associating a key with referenced data to insure the integrity of this data.
|
| **Misc.** | |
| Display a confirmation message for quick deletion | Check to prompt a confirmation message prior to deletion |
| Enable AJAX mode | Enable AJAX mode |
### Web references tab
| **Name** | Description |
| ------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| Include jQuery API and jQuery UI libraries | Check to include the jQuery API (v 1.7.2) and jQuery UI (v 1.8.20) libraries in the run-time mode (execution of the form); by default, these libraries are available in design mode |
| Free text | Custom web references to be included in the HTML head that will be available in both design and run-time modes. Only \
\
To fold a code block, click the down arrow next to the line number, which will insert a double-arrow icon in place of the code. To unfold the code block, click the right arrow.
Press Ctrl+Spaceto display a drop-down menu that lists the available variables and keywords.
|
### Translations tab
| Name | Description |
| ----------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| Select a language | The Form Designer allows you to translate form labels and error messages to the languages available in WorkflowGen. Select a language for translation from the languages available in the drop-down list.
Note: Generic language selections such as English, French, Spanish, etc., correspond to the version of the language that the administrator initially used to create a form. For example, if the administrator used English (United States) to create a form, then in this instance the selections English (United States) and English would be one and the same.
|
| Free text | Write translated text that corresponds to the selected language. If a field is left empty, then the language will defer in the following order: **Country-specific language > Generic language > Default language**. |
