Skip to content
English
Customer portal Sign in
Visit our website
  • There are no suggestions because the search field is empty.

Form Builder

How to design and customise tasks, checklists, and forms within IA Governance

The Form builder is used to design and customise tasks, checklists, and forms within IA Governance. It has a drag-and-drop interface for creating forms with a wide range of components. This allows users to build simple or complex forms without needing any programming knowledge.

The Form builder is divided into two main areas: 1) the Component palette, and 2) the Form canvas.

1) Component palette

This contains the field types users can add to forms. The palette is organised into categories such as Basic, Advanced, and Layout. Under Basic, for example, you will find common fields such as text fields, text areas, numbers, checkboxes, select boxes, radio buttons, and buttons.

Users either drag a field from the palette into the canvas or click to add it.

At the top of the palette is a Search field(s) bar that lets users quickly find a specific component.

 

2) Form canvas

This is where forms takes shape. This area shows all the fields you have added, in the order that users will see them. Each field displays as it would to the end user. You can click on a field in the canvas to open its settings and customise it. You can also drag fields up or down to rearrange their order.

 

1. Adding Fields

To add a new field, open the component palette on the left of the editor. Drag the desired field type into the form canvas on the right.

As soon as you drop the field onto the canvas, a Settings dialogue opens for that component.

This dialogue allows you to configure the details of the field before it is added to the form. The options you see will vary depending on the type of component you chose. For example, a text field will include settings for label, placeholder text, and validation rules, while a select component will include options for adding and ordering the choices available to users.

Once you’ve completed the settings, click Save to add the field to the form canvas.

2. Editing fields

To edit a field, hover your mouse over the field. In the top right corner, you will see the Component settings menu. Click the Edit button to reopen the settings dialogue for that field.

 

3. Moving fields

You can change the order of fields by dragging and dropping them within the form canvas.

 

4. Deleting fields

To delete a field from the form, hover your mouse over the field you want to remove. In the top right corner, the Component settings menu will appear. Click the Delete button to remove the field.

 

The field is immediately removed from the form. This action cannot be undone, unless you cancel to save the whole form.

 

 

Important note: Once a field has been deleted, even if you later add a new field with the same settings, it may be treated as a different field by the system. This can impact reporting on completed forms, as the new field may appear as a duplicate rather than a continuation of the original field. For this reason, delete fields only when you are certain they are not required.

 

5. Duplicating fields

To duplicate a field, hover your mouse over the field. In the Component settings menu, in the top right corner, click the Copy button. This creates a copy of the component in memory.

 

Next, hover your mouse over the field that will be directly above where you want the duplicate to appear. Hover over the field to open the Component settings menu in the top right corner, and click the Paste button. The copied field will then be inserted directly below.

 

6. Component settings

Every form is made up of components, such as text fields, dropdowns, checkboxes, or date pickers. Each component has settings that control how it looks, how it behaves, and how the data it collects is handled. While the exact settings vary depending on the type of component, many settings are shared across different components. To make them easier to work with, the settings are organised into categories: Display, Data, Validation, Conditional, and Layout.

In the Component settings dialogue, there is a Hide preview button. This hides the live preview of the field so you can see more of the settings on the screen. This is especially useful for setting the more complex settings.

Display settings

Display settings control how the component appears on the form. The settings are:

  • Label – The name shown to users, usually displayed above the field.
  • Label position – Choose where the label is displayed.
  • Placeholder – Text shown inside the field until the user enters their own input.
  • Description – Additional instructions or context displayed below the field.
  • Tooltip – A small piece of help text that appears when the user hovers over the information icon.
  • Prefix / Suffix – Symbols or text added before or after the input, for example, a currency sign ($) or a percentage symbol (%).

Data settings

Data settings define how values are handled and stored.

  • Multiple values – Introduces an Add Another button below the field and allows the user to add or remove multiple rows of a component.
  • Default value – A pre-filled value that appears when the form is loaded. This differs from Placeholder, whereby the default value is treated as real input, meaning the form will submit this value if not changed by the user.
  • Truncate multiple spaces – Remove extra spaces from user input on submit to keep data clean.
  • Custom default value – Use an expression or script to generate a default value dynamically. See Form builder – Advanced settings for more information.
  • Calculated value – Define a formula to automatically populate the field based on other inputs. See Form builder – Advanced settings for more information.
  • Allow manual override of calculated value – Lets the user type their own input even if the field has a calculated value.

Validation settings

Validation settings ensure the data collected meets your requirements.

  • Required – Forces the user to complete the field before submitting the form.
  • Minimum / Maximum length – Defines the allowed length of input.
  • Error label – The name shown in error messages if the field is invalid.
  • Custom error message – A message displayed when validation fails, replacing the system default.
  • Custom errors – Advanced option to define multiple custom error conditions. See Form builder – Advanced settings for more information.

Conditional settings

Conditional settings control whether a component is shown or hidden, based on the user’s input in another field. This makes forms more dynamic and easier for users to complete. The following fields are available to configure conditionals:

  • This component should display – Choose whether the field should be shown (TRUE) or hidden (FALSE) when the condition is met.
  • When – Select the field whose value will control the condition.
  • Has the value – Enter the value that triggers the condition.

Component-specific settings – Text field

A text field is used to capture short, single-line input such as names, IDs, or short codes.

  • Input mask – Defines the pattern that user input must follow (e.g. a phone number format like ###-###-####)
  • Display mask – Controls how the input is shown after it is entered (e.g. displaying “1234567890” as “(123) 456-7890”). Unlike the input mask, which restricts what can be typed, the display mask only affects how the value looks.
  • Input mask placeholder char – Defines the placeholder symbol shown in the input field until the user enters a value (e.g. an underscore _ in ___-___-____).

Component-specific settings – Text area

A text area is used for longer, multi-line text such as comments, descriptions, or feedback.

  • Rows – Sets the initial height of the textbox in lines.
  • Auto expand – Check this option to automatically expand the textbox as the user types more content, removing the need for scroll bars.

Component-specific settings – Number

The number component is used to capture numeric input with options for formatting and precision.

  • Use thousands separator – Adds commas or spaces (based on local settings) to large numbers (e.g. 10,000).
  • Decimal places – Controls how many digits are allowed after the decimal point.
  • Require decimals – Check this option to always show decimals for this field.
  • Decimal symbol – Defines the symbol used for decimals.

Component-specific settings – Checkbox

Checkboxes allow users to make a single selection. It can be either checked (true) or unchecked (false).

  • Shortcut – Assigns a keyboard shortcut to quickly check or uncheck the box.

Component-specific settings – Select boxes

This component allows multiple options to be displayed, usually as checkboxes or a multi-select list.

  • Values – Create your own list of values for the Select box options. The Label is what displays to the user. The value is what is saved to the database and what conditionals use to evaluate.
  • Shortcut – Assigns keyboard shortcuts to options.
  • Options label position – Determines where the labels appear relative to the checkbox.
  • Inline layout – Displays options horizontally instead of vertically.
  • Min / Max checked number – Restricts how many options can be selected.
  • Min / Max checked error message – The custom error message is shown if the selection is outside the allowed range.

Component-specific settings – Select

The Select component provides a dropdown list for single or multiple choice.

Multiple values – Allows users to select more than one option from the dropdown.

Component-specific settings – Radio

Radio buttons let the user choose only one option from a list.

  • Shortcut – Assigns keyboard shortcuts to options.
  • Options label position – Sets the placement of option labels.
  • Inline layout – Displays radio buttons in a horizontal line instead of a vertical list.

 

Component-specific settings – Button

Buttons trigger actions such as submitting the form, resetting values, or performing custom actions.

  • Action – Defines what happens when the button is clicked.
  • Save on enter – Allows the form to be submitted when pressing Enter on the keyboard.
  • Theme – Controls the button’s style.
  • Size – Sets the button size.
  • Block button – Expands the button to take up the full width of the container.
  • Left / Right icon – Allows an icon to be displayed alongside the button label.
  • Disable on form invalid – Prevents the button from working if the form has validation errors.

Component-specific settings – Email / URL / Phone number

These fields are specialised text fields optimised for specific formats. They do not have unique settings.

Component-specific settings – Date/time

The Date/time component captures dates and times with rich configuration.

  • Display in timezone – Determines how the user will view the captured Date/time based on the type of Timezone value selected. The options are:
    • Of viewer – The value will display in the viewer’s local time zone, automatically adjusting according to the user’s location. Use this setting when the value should display in the user’s local time zone.
    • Of submission – Use this setting to maintain the submission’s original time zone. When the submission is viewed in a different time zone, an indicator will display within the field showing the original time zone.
    • Of location – When this value is set, a new dropdown will appear within the Date/time component settings, where a specific time zone is selected. Date/time data will display based on the time zone location specified within the settings. When a submission is viewed from a location other than the set location, an indicator showing the set time zone will appear next to the value. Use this setting when the value should display in a set time zone.
    • UTC – The values are displayed in UTC, ensuring a standardised reference point across all users and systems. This setting is ideal when uniformity is required, regardless of the viewer’s local time zone.
  • Use local settings – Adjusts date/time formatting to match the user’s local region.
  • Allow manual input – Let users type a date/time instead of selecting from the picker.
  • Format – Defines how the date/time is displayed (by default it is set to yyyy-MM-dd hh: mm.
  • Enable date input – Allows date selection.
  • Disable specific dates – Block certain dates from being selected by providing a date in the following format: (yyyy-MM-dd) or (yyyy-MM-dd - yyyy-MM-dd)
  • Custom disable dates – Allows you to set a custom list of block dates. See Form builder – Advanced settings for more information.
  • Disable weekends/weekdays – Prevents selection of weekends or specific weekdays.
  • Enable time input – Adds time selection in addition to the date.
  • Hour / Minute increment – Sets the step size for selecting time (e.g. every 5 minutes)
  • 12-hour time (AM/PM) – Switches between 24-hour and 12-hour time.
  • Default date – Prefills the field with a set date (e.g. today).
  • Use calendar to set min / max dates – Allows you to set a valid date range.

Component-specific settings – Content

The Content component is used to display information rather than collect data. It can include headings, instructions, or embedded media.

  • Heading – Format text as a heading (H1 – H6).
  • Font family – Choose the font to use.
  • Font size – Adjust the text size.
  • Font emphasis – Apply bold, italic, and underline.
  • Link – Insert a hyperlink.
  • Indent – Indent the text.
  • Insert media – Add images, videos, or other media.
  • Align – Align text left, centre, or right.

Component-specific settings – Columns

The columns component divides the form into multiple columns.

  • Column properties – Set width or styling for each column.
  • Auto-adjust columns – Allows columns to automatically resize to fit the available space.

Component-specific settings – Field set

A field sets related fields together visually and functionally.

  • Legend – The label that appears at the top of the group.

Component-specific settings – Panel

A panel is a container that groups fields and optionally adds visual styling.

  • Theme – Choose a colour theme for the panel.
  • Collapsible – Allows the panel to expand or collapse.
  • Initially collapsed – Sets whether the panel is collapsed when the form first loads.

Component-specific settings – Tabs

The Tabs component organises fields into separate tabs.

  • Tabs – Create and name each tab.
  • Vertical layout – Displays tabs vertically on the left instead of horizontally at the top.

 

 

Best Practice: Designing forms with the form builder is straightforward, but a few best practices can make your forms easier to use, easier to maintain, and more reliable for reporting.

  1. Keep labels short and clear

Use concise, plain language for field labels so users know exactly what information to provide.

  1. Use placeholders for guidance, not content

Placeholders should give an example of what to enter, but should never replace the actual label. Users may forget what the placeholder said once they start typing.

  1. Avoid unnecessary fields

Only collect information that you will use. The shorter the form, the higher the completion rate and the fewer errors you will see.

  1. Think ahead about reporting

Use consistent naming and structure for fields so it’s easier to analyze responses later.

Use the simplest component possible, as more complex components make reporting more difficult.