Form rendering form-rendering

Selecting the form rendering template selecting-the-form-rendering-template

The form settings enable you to select the template used to generate the pages. To access them, click the Properties button in the form detail toolbar, and select the Rendering tab. There are a number of templates (style sheets) available by default.

The bottom section of the editor enables you to view a rendering of the selected template.

The zoom feature lets you edit the selected template.

You can modify or override these templates. To do this, click the Page layout… link and personalize the information.

You can:

The Headers/Footers tab lets you change the information displayed in the headers and footers of each form page using this template.

Each line of the Page headers and Page footers section corresponds to a line in the HTML page. Click Add to create a new line.

Select an existing line and click the Detail button to personalize it.

You can change the content of the line, add borders, and change the font attributes via the relevant tabs. Click OK to confirm these changes.

The Position fields let you define the position of elements in the page header and footer.

Customizing form rendering customizing-form-rendering

Changing the layout of elements changing-the-layout-of-elements

You can overload the style sheet for each element of the form (input fields, images, radio buttons, etc.).

To do this, use the Advanced tab.

It enables you to define the following properties:

Defining headers and footers defining-headers-and-footers

Fields are sequenced in a tree structure whose root has the same name as the page. Select it to modify the name.

The title of the window must be entered in the Page tab of the form property window. You can also add a set content to the page header and footer (this information will be shown on every page). This content is entered in the matching sections of the Texts tab, as shown below:

Adding elements to HTML header adding-elements-to-html-header

You can enter additional elements to be inserted into the HTML header of a form page. To do this, enter the elements in the Header tab of the relevant page.

This lets you reference an icon that will be displayed in the page’s title bar, for example.

Defining control settings defining-control-settings

When the user fills in the form, a check is automatically carried out on certain fields depending on their format or configuration. This lets you make certain fields mandatory (refer to Defining mandatory fields) or check the format of the data entered (refer to Checking data format). Checks are carried out during page approval (by clicking a link or button which enables an output transition).

Defining mandatory fields defining-mandatory-fields

To make certain fields mandatory, select this option when creating the field.

If the user approves this page without having entered the field, the following message will be displayed:

You can personalize this message by clicking the Personalize this message link.

If the user approves this page without having entered the field, the following message will be displayed:

Checking data format checking-data-format

For form checks whose values are stored in an existing field of the database, the rules for the storage field will be applied.

For form checks whose values are stored in a variable, approval rules depend on the format of the variable.

For example, if you create a Number check to store the client number, as shown below:

The user must enter an integer in the form field.

Defining fields conditional display defining-fields-conditional-display

You can configure the display of fields on the page to be displayed based on the values chosen by the user. This can apply to one field or a group of fields (when they are grouped in a container).

For each element of the page, the Visibility section lets you define the display conditions.

Conditions can concern the value of database fields or variables.

In the field selection window, you can choose from the following data:

For more on this, refer to the use case available here: Displaying different options depending on the selected values.

You can also condition the display of form pages using the Test object. For more on this, refer to this page.

Importing elements from an existing form importing-elements-from-an-existing-form

It’s possible to import fields or containers from other Web forms. This lets you create a library of re-usable blocks which will be inserted into forms, such as the address block, the newsletter subscription area, etc.

To import an element into a form, apply the following steps: