Designing a form for your service only requires basic knowledge of how to use the FormBuilder Admin UI.
The only prerequisite is for you to 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}
If you have been provided with a pre-made form or form template, you can import it using the “Import a form” button. Otherwise, click “Create a form” to continue.
On the initial “Create a form” page, provide the English and French names of your form (this 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 page that follows, you are required to provide details for the first step in your form.
All forms must have at least 1 step.
In this example, we will design the form to collect contact information on step 1.
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”.Now your form is 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”.
Now, select the type of element that you want to place on your form from the dropdown:
Since the first step in our form is asking for contact information, let’s add a text box for the users' first and last name. Select “Single line text input” from the dropdown.
There are several tabs which allow you to further customize your 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
All of the settings in each tab default to the most common settings, so it might not be necessary to change them for most cases.
(Additionally, each different type of element will have different options in each tab to choose from.)
When you are finished customizing the new form element, click “Save and Close“Repeat steps 5 and 6 to add more elements to your form.
Next, we will add a second step to the form.
Click “Add a new step”, and provide the required information, like you did in step 4.
For this example, we will create a new step called “Project description”.Add at least 1 new element to this new step.
Right-click on “Step 2 - Project description”, and select “Create“ → “Insert element at the bottom”Next, we are going to add a dropdown list to indicate the priority of our project.
Provide the required information on the “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 “Numeric input” element to contain the estimated amount of effort in days.
Your form should now look something like this:
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.