Create a simple electronic form that allows users to fill out and then submit their information by email.
In this tutorial, you will create the following Travel Authorization form. It contains two sections: one that collects the client's personal information and another that requests information about the trip and the cost of the trip. It includes sections, form items – such as fields, check boxes, and radio buttons – and constraints.
First you will layout the sections of the form, to give a quick visual for the user as to what types of information is required by inserting titles and lines. Secondly, you will insert fields, radio groups, check boxes, popup lists, and a submit button. Some of these items will have constraints applied and the appropriate help messages to assist the user in filling out the form correctly. Once the user fills out the form and clicks the submit button, the data entered by the user is captured and emailed to a specified address. When you finish working through this tutorial, the form will look like this:
Understanding the workspace
Before you create a form, it is important to understand how the Forms Designer is organized.
Creating a new form
To begin designing a form, you need to open a blank IBM
® form. The New IBM
Form Wizard will help you create the new form.
Setting up layout tools
The Designer has a number of built in tools to help with the alignment of items on a form, such as rulers and grids. This section of the tutorial shows how to turn grids, rulers and "snap to"
tools on and off.
To begin designing the tutorial form, you will use titles to help organize the data on the form.
Adding small text fields
The size of the text field visually tells users the amount of information that they are required to enter. Using small text fields informs users that only minimal input, such as one or two letters, is required.
In the next steps you will align all the labels and then all the fields using an align toolbar tool.
Adding a dropdown list
Next, you will create a dropdown list to present choices to the user. This list is a single row in height until selected, at which point a list of choices "drops down"
for the user is displayed.
Adding calendars allows the user to type in a date manually or to pick a date from a drop down calendar.
Setting a field with restrictions
When creating fields, you will often want to specify the kind of information that the user can type into the field. For example, you might want a field to accept only numerical values or set the field so that the user must fill it out.
Adding a value that changes based on user input
Forms can perform calculations for users, known as actions
. These functions makes it faster and easier for users to fill in forms that require calculations.
Adding a radio list
Radio lists are used to present an entire set of mutually exclusive choices. The radio lists are grouped together and only one button from the group can be selected at a time.
Adding a check box
Check boxes can be used individually or as part of a list. When part of a list, check boxes give the user the option of selecting multiple items.
Adding a multiple line text field
Multiple line text fields are fields that have scroll bars. This lets the user enter multiple lines of text.
Adding a submit button
Once the user fills in the form, they need to submit it. You will add a Submit
button so the user can submit the form. Once the user presses the Submit
button, the form is submitted to the specified email address. The form will remain open to the user after the submit button is pressed.
This tutorial demonstrated how to create a simple form using the Forms Designer.