Designing a form for your service requires very 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}
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.
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.
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 (Step 1 - Contact information), and select “Create“ → “Insert element at the bottom”.
Since the first step in our form is asking for contact information, you’ll add a text box for the users' first and last name. Select “Single line text input” from the dropdown.
Under “Field Label”, type “First name”. Next, click on the “French” tab, and enter the French equivalent text as well.
There are several 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.
Click “Add a new step”, and provide the required information, as you did in step 4.
For this example, we will create a new step called “Project description”.
Provide English and French text for this step, and then click “Add Step”.Next, add a new element.
Right-click on “Step 2 - Project description”, and select “Create“ → “Insert element at the bottom”Next, add a dropdown list to indicate the priority of your project by selecting “Drop-down List” from the form element list.
Provide the required information (“Project priority”) on each “Language” tab, and when that is complete, click the “Options” tab.For “Option Source”, select “Manual”
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.