The multiline mode element is a repeatable data row that enables the collection on multi rowed data (such as collecting an order of products, sizes and quantities).
This element is essentially a container into which the for owner can drag input elements such as a textbox, a numeric textbox, a textarea and so on.
Let’s get started and add a multiline mode element to a form!
as an example I will be creating a “parents and children” email form with which I can collect information about parents (name and role) and their children (name, age, sex and favorite color). Since I expect the parent to fill in the information I plan to add the input elements for this data in the regular way (simply drag and drop on to the design area).
However, since I do not know how many children each parent has and I want him/her to have the opportunity to enter data about all their children I will put the children’s input fields inside a multiline mode element. This way the parent filling in the form could press on the “add” button to insert another row (and enter data on another child) or press “remove” to delete a row.
Step by step:
1- enter the form builder to create a new form
2- drag and drop elements on to the design area:
– label –for the title
– a container which will contain the parents information (I will be using the regular container for graphic purposes only it has no functional purpose here)
– a multiline mode element
– a submit button.
3- Change the title label to: “parents and children”.
4- drag 2 labels (parent name and role) and textbox (for collecting the parent’s name) in to the top container), and a listbox (containing the values: Mom and Dad).
5- drag input fields in to the multiline mode element : 4 labels for the fiels captions (child name, child age, sex and Favorite color), 3 textboxes and 1 listbox containing the Sex values: Male and Feamle.
6-Make the MultiLine element bigger to better fit the elements in it:
first select and widen the *external border and after that the inner one. You can also drag the “add” button out of the outer border to prevent it being duplicated per each row.
*Notice that the multiline has 2 borders – an outer border and an inner border. The Outer border shows the real size of the multiline container while the inner border shows the size of the data row container.
Don’t forget to give each input element a caption (name same as the label next to it and a tab index number)
7- Design the form as you wish (color backgrounds, containers, choose font sizes etc…)
8- Save the form.
9- Use the “preview” option to test the form and enter 2 rows in the multiline element.
10- Enter the data management tool to view the data entered.
notice that only the parents information will appear in the table rows.
in order to view the children’s data entered in the multiline mode element you will need to press on the “+” button situated in the second column.
Read more about the multi line mode.