Designing a Form with FormBuilder Admin UI

Designing a form for your service requires only basic knowledge of how to use the FormBuilder Admin UI.
The only prerequisite is for you to be connected to the TC network, have a service ID, and for you to have been assigned permissions in the MTOA Platform to access that service ID.

For demonstration purposes, we will use the service ID “123”.

Begin by accessing the FormBuilder dashboard for your service:
http://tcappstest/Saf-Sec-Sur/13/MAF-MCF-ADMIN/eng/FormBuilder/{Your Service ID}

Figure 1.0 - The initial FormBuilder dashboard
Click “Create a form” to begin assembling your form. Alternatively, if you have been provided with a pre-made form or form template, you can import it using the “Import a form” button.
On the initial “Create a form” page, provide the English and French names of your form (these can be changed later), as well as a unique acronym for your form (this cannot be changed later).
This acronym will be used in the URL of your service application.

Figure 2.0 - Specifying the initial details required for creating a new form
When you have filled out this form, click “Create form”.
On the next page, you are required to provide details for the first step in your form.
All forms must have at least 1 step.
For this example, we will design Step 1 to collect contact information.

Under “Step Name (English)“, type “Contact information”. Click the “French” tab, and under “Step Name (French)“ type “Coordonnées“.
Ensure that you provide English and French text for all fields that you want to use (this can be changed later), and click “Add Step”.
Step 1 has now been created, but it is currently empty.
To begin adding form elements to your form, right click on the first entry (In this example, the first entry is “Step 1 - Contact information”), and select “Create“ → “Insert element at the bottom”.
Since the first step in our form will be used for collecting contact information, you’ll add text boxes for the users' first and last name.
Select “Single line text input” from the “Element Type” dropdown.

After selecting from the dropdown, you will see options for customizing the element that you’ve chosen. Under “Field Label”, type “First name“. Next, click on the “French” tab, and type “Prénom“.

You will notice that there are several other tabs which allow you to further customize your single line text input field:
- Settings: Allows you to override some browser defaults, like the width of the field or the style
- Options: Allows you to set a minimum and maximum length for the field
- Validation: Allows you to indicate if the field is required and customize the validation messages that the user will see

Note that each different type of form element will have different options in each tab to choose from. Settings in each tab default to the most common settings, so it might not be necessary to change them for most cases.

When you have finished customizing the new form element, click “Save and Close“.
Repeat steps 5 and 6 to add a “Last name” field to your form, again using the “Single line text input“ element type.
Next, we will add a second step to the form.
For this example, we will create a new step called “Project description”.
Click “Add a new step”, and provide the required English and French text labels, as you did in step 4.
In this case, the text would be: “Project description“ and “Description du projet“.
Finally, click “Add Step”.
Now we will add a new element to this step.
Right-click on “Step 2 - Project description”, and select “Create“ → “Insert element at the bottom”.
Since we want to add a dropdown list that can be used to indicate the priority of your project, select “Drop-down List” from the form element list.

Provide the required information (“Project priority”, and “Priorité du projet“) on each “English” and “French” language tab, and when that is complete, click the “Options” tab.
1. For “Option Source”, select “Manual”
2. Click “Add an option”, then enter text for the “English”, “French” and “Value” fields.
  Repeat this process to add a few more options to the dropdown.
  Your page should now look something like this:
  
  Click “Save and Close”.
Repeat step 9 to add a new form element and select “Numeric input”.
Provide English and French text to request the estimated amount of effort in days.
Your form should now look something like this:

Click “Save and Close”.
Click “Save changes“. Your form is now ready to present to users and accept service requests.
See the next section for viewing and using your form.