# Form

## Form Designer

### Design mode

![](https://content.gitbook.com/content/fJv3Io6iQbwXzLWZITfi/blobs/kUIuS5E2KY5GxHgyc5FI/form_designer.png)

### ASP.NET editor

Click **.NET** in 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 server-side development.

{% hint style="info" %}
As of WorkflowGen version 7.19.0, all `default.aspx` files are saved with the `Page Async` property set to `true` (e.g. `<%@ Page Async="true" ... %>`). This allows asynchronous ASP.NET web form development (see the [Using Asynchronous Methods in ASP.NET 4.5](https://docs.microsoft.com/en-us/aspnet/web-forms/overview/performance-and-caching/using-asynchronous-methods-in-aspnet-45) Microsoft article for more information).
{% endhint %}

![](https://content.gitbook.com/content/fJv3Io6iQbwXzLWZITfi/blobs/dvbC6d1SfRlnfIg5Ylso/form-designer-net.png)

### JavaScript editor

Click **JS** in the toolbar to open the JavaScript 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 JavaScript client-side development.

![](https://content.gitbook.com/content/fJv3Io6iQbwXzLWZITfi/blobs/UHGEp3O30yf3qjMcekW3/js-editor.png)

### Advanced features

#### Server-side editing mode

Check **Enable server-side editing mode** on the **General** tab in the **Form configuration** panel to activate this mode, which allows form designers to modify the content of the form's C# `runat` server tag (e.g. `<script runat="server"`) and JavaScript script tag (e.g. `<script jseditor="true">`) directly in the generated `default.aspx` file on the server (usually located in the `\wfapps\webforms[PROCESSNAME]\V[VERSION]` folder) using Visual Studio Professional or Visual Studio Code.&#x20;

{% hint style="info" %}
The .NET and JavaScript editors are disabled when server-side editing mode is enabled.
{% endhint %}

{% hint style="warning" %}
You must save the form on the WorkflowGen **Form** screen every time you make changes to a script's code in the `default.aspx` file in order to keep the form's HTML script tags (`FORM_HTML`) up to date. This is mandatory before you can export the XPDL process definition for deployment on another server.
{% endhint %}

#### 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.

{% hint style="info" %}
When adding a custom control (e.g. a button to handle form submission), you must register the control ID as a postback control in the `Page_Load` event's `ScriptManager` object. For example:

```csharp
protected void Page_Load(object sender, EventArgs e)
{
    base.Page_Load(sender, e);    
    
    // Register the custom button to the script manager for postback management in AJAX mode
    if (ScriptManager.GetCurrent(this) != null) {
        ScriptManager.GetCurrent(this).RegisterPostBackControl(ACTION1_BUTTON1);
    }
}
```

{% endhint %}

## Toolbar

### Design mode

|                                                       **Icon**                                                      | **Name**                         | **Description**                                                                                                                                                                                                                                                                                                                                      |
| :-----------------------------------------------------------------------------------------------------------------: | -------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|    ![](https://content.gitbook.com/content/fJv3Io6iQbwXzLWZITfi/blobs/BENE2zHZfvfPImBZxryu/formeditor-new-a.png)    | New form                         | Creates a new form or replaces the current form                                                                                                                                                                                                                                                                                                      |
|    ![](https://content.gitbook.com/content/fJv3Io6iQbwXzLWZITfi/blobs/oVRTlA2iZhX3LrKt107h/formeditor-save-a.png)   | Save the form                    | Saves the current form (you can also press **`Ctrl+S`** to save)                                                                                                                                                                                                                                                                                     |
|   ![](https://content.gitbook.com/content/fJv3Io6iQbwXzLWZITfi/blobs/pMFKbClqQUoNdBRZVDT5/formeditor-print-a.png)   | Print the form                   | Prints the current form                                                                                                                                                                                                                                                                                                                              |
| ![](https://content.gitbook.com/content/fJv3Io6iQbwXzLWZITfi/blobs/DtsHL63mKwE3f2Pp5fpY/formeditor-save-tool-a.png) | Save a section or field as tool  | Saves the selected section or field as a custom tool                                                                                                                                                                                                                                                                                                 |
| ![](https://content.gitbook.com/content/fJv3Io6iQbwXzLWZITfi/blobs/J0r8sbwlSN1Sq3zgXdnC/formeditor-duplicate-a.png) | 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.                                                                                                                                                                                            |
|    ![](https://content.gitbook.com/content/fJv3Io6iQbwXzLWZITfi/blobs/LselDBAMRikyaQh8QT4T/formeditor-del-a.png)    | Delete a section or field        | Deletes the selected section or field from the form                                                                                                                                                                                                                                                                                                  |
|    ![](https://content.gitbook.com/content/fJv3Io6iQbwXzLWZITfi/blobs/iFvCGdfNkoXW3ATMEPl5/formeditor-conf-a.png)   | Form configuration               | Opens the **Form configuration** window                                                                                                                                                                                                                                                                                                              |
|       ![](https://content.gitbook.com/content/fJv3Io6iQbwXzLWZITfi/blobs/kRiSAJwDDSRPlTAdeyR0/workflow-a.png)       | Workflow view                    | Displays the interactive workflow view                                                                                                                                                                                                                                                                                                               |
|          ![](https://content.gitbook.com/content/fJv3Io6iQbwXzLWZITfi/blobs/PeT0dWLMoePWFJwUubKp/undo.png)          | 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.                                                                                                                                                                                                                                       |
|         ![](https://content.gitbook.com/content/fJv3Io6iQbwXzLWZITfi/blobs/F1fUGTu5hoSyatpuoThy/plus-s.png)         | 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.workflowgen.com/admin/8.3/form-appearance-and-management#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.workflowgen.com/admin/8.3/form-appearance-and-management#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.workflowgen.com/admin/8.3/form-appearance-and-management#field-data-mapping))                              |
|                                                       **.NET**                                                      | ASP.NET                          | Switch to the ASP.NET code editor                                                                                                                                                                                                                                                                                                                    |
|                                                        **JS**                                                       | JavaScript                       | Switch to the JavaScript code editor                                                                                                                                                                                                                                                                                                                 |

### ASP.NET editor

|                                                      **Icon**                                                     | **Name**          | **Description**                                  |
| :---------------------------------------------------------------------------------------------------------------: | ----------------- | ------------------------------------------------ |
|   ![](https://content.gitbook.com/content/fJv3Io6iQbwXzLWZITfi/blobs/BENE2zHZfvfPImBZxryu/formeditor-new-a.png)   | New               | Clears the ASP.NET code                          |
|   ![](https://content.gitbook.com/content/fJv3Io6iQbwXzLWZITfi/blobs/oVRTlA2iZhX3LrKt107h/formeditor-save-a.png)  | Save              | Saves the ASP.NET code                           |
| ![](https://content.gitbook.com/content/fJv3Io6iQbwXzLWZITfi/blobs/Qp2b66AqBfTECGy3CkVb/formeditor-comment-a.png) | Comment/Uncomment | Adds or removes `//` before the selected line(s) |
|                                                     **Design**                                                    | Form Designer     | Switch to the Form Designer                      |
|                                                       **JS**                                                      | JavaScript        | Switch to the JavaScript code editor             |

### JavaScript editor

|                                                      **Icon**                                                     | **Name**          | **Description**                                  |
| :---------------------------------------------------------------------------------------------------------------: | ----------------- | ------------------------------------------------ |
|   ![](https://content.gitbook.com/content/fJv3Io6iQbwXzLWZITfi/blobs/BENE2zHZfvfPImBZxryu/formeditor-new-a.png)   | New               | Clears the JavaScript code                       |
|   ![](https://content.gitbook.com/content/fJv3Io6iQbwXzLWZITfi/blobs/oVRTlA2iZhX3LrKt107h/formeditor-save-a.png)  | Save              | Saves the JavaScript code                        |
| ![](https://content.gitbook.com/content/fJv3Io6iQbwXzLWZITfi/blobs/Qp2b66AqBfTECGy3CkVb/formeditor-comment-a.png) | Comment/Uncomment | Adds or removes `//` before the selected line(s) |
|                                                     **Design**                                                    | Form Designer     | Switch to the Form Designer                      |
|                                                      **.NET**                                                     | ASP.NET           | Switch to the ASP.NET code editor                |

## 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.

<div align="left"><img src="https://content.gitbook.com/content/fJv3Io6iQbwXzLWZITfi/blobs/ixAG7uBSRXGUoP2jxuIn/form_configuration_624x467.png" alt=""></div>

<div align="left"><img src="https://content.gitbook.com/content/fJv3Io6iQbwXzLWZITfi/blobs/XljznJVulUhT24eIbeYy/form_configuration_web_references_624x467.png" alt=""></div>

### General tab

| **Name**                                          | **Description**                                                                                                                                                                                                                                                                                                                                                                                                                                                          |
| ------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| **Web forms**                                     |                                                                                                                                                                                                                                                                                                                                                                                                                                                                          |
| Enable server-side editing mode                   | See [Server-side editing mode](#server-side-editing-mode)                                                                                                                                                                                                                                                                                                                                                                                                                |
| Enable AJAX mode                                  | See [AJAX mode](#ajax-mode)                                                                                                                                                                                                                                                                                                                                                                                                                                              |
| **Header**                                        |                                                                                                                                                                                                                                                                                                                                                                                                                                                                          |
| Title                                             | The title of the form                                                                                                                                                                                                                                                                                                                                                                                                                                                    |
| Width                                             | <p>The width of the form header</p><p></p><p>Numeric value with or without the unit of measure (<code>px</code>, <code>pt</code>, <code>in</code>, <code>cm</code>, <code>mm</code>, <code>pc</code>, <code>em</code>, <code>ex</code>, <code>%</code>), e.g. <code>720px</code></p>                                                                                                                                                                                     |
| Height                                            | <p>The height of the form header</p><p></p><p>Numeric value with or without the unit of measure (<code>px</code>, <code>pt</code>, <code>in</code>, <code>cm</code>, <code>mm</code>, <code>pc</code>, <code>em</code>, <code>ex</code>, <code>%</code>), e.g. <code>38px</code></p>                                                                                                                                                                                     |
| Image alignment                                   | <p>The alignment for the header image:</p><ul><li><strong>Right</strong>: The image will be aligned to the right.</li><li><strong>Left</strong>: The image will be aligned to the left.</li><li><strong>None</strong>: No alignment.</li></ul>                                                                                                                                                                                                                           |
| 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                                      | <p>Sets if and how the image will be repeated:</p><ul><li><strong>No-repeat</strong>: the image will not be repeated</li><li><strong>Repeat</strong>: the image will be repeated both vertically and horizontally (this is the default setting)</li><li><strong>Repeat x</strong>: the image will be repeated only horizontally</li><li><strong>Repeat y</strong>: the image will be repeated only vertically</li></ul>                                                  |
| **Sections**                                      |                                                                                                                                                                                                                                                                                                                                                                                                                                                                          |
| Width                                             | <p>The width for all sections</p><p></p><p>Numeric value with or without the unit of measure (<code>px</code>, <code>pt</code>, <code>in</code>, <code>cm</code>, <code>mm</code>, <code>pc</code>, <code>em</code>, <code>ex</code>, <code>%</code>), e.g. <code>720px</code></p>                                                                                                                                                                                       |
| Adjust width automatically                        | Check to apply adjusted width to all sections                                                                                                                                                                                                                                                                                                                                                                                                                            |
| **Labels**                                        |                                                                                                                                                                                                                                                                                                                                                                                                                                                                          |
| Alignment                                         | <p>The alignment for all field labels:</p><ul><li><strong>Right</strong>: the label will be aligned to the right of the field</li><li><strong>Left</strong>: the label will be aligned to the left of the field</li><li><strong>Top</strong>: the label will be aligned on top of the field</li></ul>                                                                                                                                                                    |
| Width                                             | <p>The width for all field labels</p><p></p><p>Numeric value with or without the unit of measure (<code>px</code>, <code>pt</code>, <code>in</code>, <code>cm</code>, <code>mm</code>, <code>pc</code>, <code>em</code>, <code>ex</code>, <code>%</code>), e.g. <code>150px</code></p>                                                                                                                                                                                   |
| 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                                             | <p>The width of the form footer</p><p></p><p>Numeric value with or without the unit of measure (<code>px</code>, <code>pt</code>, <code>in</code>, <code>cm</code>, <code>mm</code>, <code>pc</code>, <code>em</code>, <code>ex</code>, <code>%</code>), e.g. <code>720px</code></p>                                                                                                                                                                                     |
| Height                                            | <p>The height of the form header</p><p></p><p>Numeric value with or without the unit of measure (<code>px</code>, <code>pt</code>, <code>in</code>, <code>cm</code>, <code>mm</code>, <code>pc</code>, <code>em</code>, <code>ex</code>, <code>%</code>), e.g. <code>22px</code></p>                                                                                                                                                                                     |
| Image alignment                                   | <p>The alignment for the footer image:</p><ul><li><strong>Right</strong>: the image will be aligned to the right side</li><li><strong>Left</strong>: the image will be aligned to the left side</li><li><strong>None</strong>: no alignment</li></ul>                                                                                                                                                                                                                    |
| 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                                      | <p>Sets if and how the image will be repeated:</p><ul><li><strong>No repeat</strong>: the image will not be repeated</li><li><strong>Repeat</strong>: the image will be repeated both vertically and horizontally (this is the default setting)</li><li><strong>Repeat-x</strong>: the image will be repeated only horizontally</li><li><strong>Repeat-y</strong>: the image will be repeated only vertically</li></ul>                                                  |
| **Security**                                      |                                                                                                                                                                                                                                                                                                                                                                                                                                                                          |
| Enable XML Signature                              | <p>Check to enable the use of XML signature in the form data</p><p></p><p>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.</p> |
| **Misc.**                                         |                                                                                                                                                                                                                                                                                                                                                                                                                                                                          |
| Display a confirmation message for quick deletion | Check to prompt a confirmation message prior to deletion                                                                                                                                                                                                                                                                                                                                                                                                                 |

### Web references tab

| **Name**                                   | **Description**                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            |
| ------------------------------------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| Include jQuery API and jQuery UI libraries | <p>Check this option to include the <strong>jQuery</strong> and <strong>jQuery UI</strong> libraries in runtime mode (form execution); by default, these libraries are available in design mode</p><p></p><p>Available versions:</p><ul><li>v1.7.2 & v1.8.20</li><li>v1.10.2 & v1.10.3</li><li>v3.5.1 & v1.12.1 (default)</li></ul>                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        |
| Free text                                  | <p>Custom web references to be included in the HTML head that will be available in both design and run-time modes. Only <code>\<script></code>, <code>\<meta></code>, <code>\<link></code>, and <code>\<style></code> tags are supported. When you enter a tag, the free text editor automatically inserts its closing tag.</p><p></p><p>📌 <strong>Example:</strong></p><p><code>\<link rel="stylesheet" type="text/css" href="mystyle.css" /></code></p><p><code>\<style type="text/css"></code></p><p><code>body {background-color:yellow}</code></p><p><code>p {color:blue}</code></p><p><code>\</style></code></p><p><code>\<meta name="description" content="my content" /></code></p><p><code>\<script type="text/javascript"></code></p><p><code>alert("Hello World!");</code></p><p><code>\</script></code></p><p><code>\<script type="text/javascript" src="myscript.js"></code></p><p><code>\</script></code></p><p><br>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. <br><br>Press <strong><code>Ctrl+Space</code></strong>to display a drop-down menu that lists the available variables and keywords.</p> |

### Translations tab

| **Name**          | **Description**                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       |
| ----------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| Select a language | <p>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.</p><p></p><p>✏️ <strong>Note:</strong> 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 <strong>English (United States)</strong> to create a form, then in this instance the selections <strong>English (United States)</strong> and <strong>English</strong> would be one and the same.</p> |
| 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**.                                                                                                                                                                                                                                                                                                                                                                                                                                                  |