Form builder: field types

Summary In the form builder, form elements are grouped under controls. To add an element to a form, choose its control from the drop-down list under Controls, on the left of the form builder, then drag the element from the list below it and drop it onto the Canvas on the right. This module goes through each control's elements and what each one is for. It has eleven parts, one per control: Text Input, Selections (Dropdown), Date & Time, Logical, Slider, Read Only, Multimedia, Upload, Tables, Container and Custom.

Note. The form builder is the SD Form Builder page of an SD. Each element you drop onto the canvas has a row of small buttons at its top right, including move (crossed arrows), edit (a pencil) and Duplicate. When a control's list of elements has more than one page, Previous and Next under the list move between the pages.

Text Input

Summary The Text Input control has six elements: Text (Single line), Password, OTP (One Time Password), Text (Multiple lines) with no character limit, Code Editor, and HTML Editor for formatted writing.

Step 1

On the left of the form builder, open the drop-down list under Controls and choose Text Input. Its elements are listed below the drop-down.

Step 2

Drag Text (Single line), the first element in the list, and drop it onto the Canvas on the right.

Step 3

A simple text box appears on the canvas. Form users type text into it, limited to one line.

Step 4

Drag Password, the next element in the list, onto the canvas.

Step 5

A password box appears. It lets form users put in a password, for example when you want to protect part of the form with a password.

Step 6

The characters typed into the box are hidden for security. To see them, form users click the eye at the right end of the box.

Step 7

Drag OTP (One Time Password) onto the canvas.

Step 8

A one time password field appears, as a row of small boxes. Like Password, it can protect part of the form. A one time password also prevents some forms of identity theft, because a captured username and password pair can't be used a second time. Choose it when you want that extra security.

Step 9

Drag Text (Multiple lines) onto the canvas.

Step 10

A larger text box appears. Form users type text into it, as with Text (Single line), but there is no character limit.

Step 11

Drag Code Editor, the last element on the first page of the list, onto the canvas.

Step 12

A code editor appears: a box with numbered lines where you can edit code, with a Validate SQL button at its bottom right.

Step 13

Under the list, click Next to go to the second page of elements.

Step 14

Drag HTML Editor, the last element of the Text Input control, onto the canvas.

Step 15

A text box appears with an extensive HTML editor toolbar above it, with buttons for bold, italics, font size, headings, lists and more. Form users can format their writing with it.

Selections (Dropdown)

Summary The Selections (Dropdown) control has two elements. Dropdown (Single selection) lets the person pick one option, for questions where only one answer makes sense. Dropdown (Multiple selections) lets them pick one or more. You add each one's options in its edit window.

Step 16

Open the drop-down list under Controls and choose Selections (Dropdown).

Step 17

Drag Dropdown (Single selection), the first of the two elements, onto the canvas.

Step 18

A drop-down box appears. It lets form users select one item from a list of options.

Step 19

To add the options, click the element's edit button (the pencil), in the row of buttons at its top right.

Step 20

The Edit form field Single-Select Dropdown window opens. Scroll down to the table with the Label column, and click the + at the left end of its header row to add your options.

Step 21

When you are done, click Save & Close Single-Select Dropdown at the bottom right of the window.

Step 22

Click the drop-down box on the canvas: the options are listed under it. Form users select one of them. Use it to ask a question where only one answer can make sense.

Step 23

Drag Dropdown (Multiple selections), the second element, onto the canvas.

Step 24

A second drop-down box appears. From its list, form users can select one option or more.

Step 25

Click the new element's edit button (the pencil), at its top right.

Step 26

The Edit form field Multi-Select Dropdown window opens. Add the options with the + in the Label table, as before, then click Save & Close Multi-Select Dropdown at the bottom right.

Step 27

When form users click the drop-down box, the options are listed under it.

Step 28

They can select one option.

Step 29

Or they can select several: each option they choose shows in the box. Use it when several answers may apply.

Date & Time

Summary The Date & Time control has three elements: Date Picker for a single date, such as a date of birth or the date of an incident, Select Date Range for a date range, and Time Viewer for choosing a time.

Step 30

Open the drop-down list under Controls and choose Date & Time.

Step 31

Drag Date Picker, the first of the three elements, onto the canvas.

Step 32

A date box appears, reading Select a date ..., with a calendar icon at its right. Form users select a date with it: a calendar opens, with CLEAR, CANCEL and OK at the bottom.

Step 33

The date can be whatever the form asks for, such as today's date, the person's date of birth or the date of an incident.

Step 34

Drag Select Date Range, the date range selector, onto the canvas.

Step 35

A Start Date box and an End Date box appear, each with a calendar icon. Form users select a date range with them.

Step 36

Drag Time Viewer, the last element, onto the canvas.

Step 37

A time selector appears: a time, with a clock icon at its right.

Step 38

Form users click the time or the clock icon to open the time selector. They choose the hour, the minutes and AM or PM, then click OK.

Logical

Summary The Logical control has five elements: Switch for yes or no, Single checkbox, Multi Select Boxes for choosing one or more options, Radio Buttons for choosing one option, and Buttons (Button Select), which asks the same as a switch but looks different.

Step 39

Open the drop-down list under Controls and choose Logical.

Step 40

Drag Switch, the first element in the list, onto the canvas.

Step 41

A switch appears under a title. Form users slide it to either yes or no. Yes and no are the default, but you can edit the switch to say something else, such as "on" and "off".

Step 42

Drag Single checkbox onto the canvas.

Step 43

A single tick box appears beside a title. As with the switch, you can edit the title.

Step 44

Drag Multi Select Boxes onto the canvas.

Step 45

To add the options, click the element's edit button (the pencil), at its top right.

Step 46

The Edit form field Multi Select Boxes window opens. Scroll down to the table with the Label column and click the + at the left end of its header row to add each item. When you are done, click Save & Close Multi Select Boxes at the bottom right.

Step 47

The options appear on the canvas, each with a tick box. Form users can choose one or more of them.

Step 48

Drag Radio Buttons onto the canvas.

Step 49

A list of options appears, each with a round button beside it. Form users select one option.

Step 50

Drag Buttons (Button Select), the last element in the list, onto the canvas.

Step 51

A question appears with a Yes button and a No button. Button Select asks for, and receives, the same information as the Switch, but it looks different. Which of the two to use comes down to the preference of the form's author.

Slider

Summary The Slider control has three elements: Slide Bar with five points and Star Rating out of five, both good for surveys, and Color Picker.

Step 52

Open the drop-down list under Controls and choose Slider.

Step 53

Drag Slide Bar, the first element in the list, onto the canvas.

Step 54

A bar with a ball at its left end appears. Form users move the ball along the bar to 5 different points, from 1 to 5. It suits surveys where you want people to rate their experience.

Step 55

Drag Star Rating onto the canvas.

Step 56

A row of five stars appears. Form users rate something out of 5 stars, which also suits surveys.

Step 57

Drag Color Picker, the last element in the list, onto the canvas.

Step 58

A colour picker appears, with a colour area and a set of ready-made colours. It lets a form user change the colour of something on the form, such as text, a background, a line or a shape outline.

Read Only

Summary The Read Only control's elements display information rather than collect it: Label, HTML Viewer, PDF Reader, Display Text (Read Only), Vertical Spacer, and Banner, which is useful for a form's title and for dividing the form into sections.

Step 59

Open the drop-down list under Controls and choose Read Only.

Step 60

Drag Label, the first element in the list, onto the canvas.

Step 61

A label of text appears. To edit the text, hover over the element and click its edit button (the pencil), at its top right.

Step 62

Drag HTML Viewer onto the canvas.

Step 63

HTML Viewer lets you define the HTML it shows. To do so, hover over the element and click its edit button.

Step 64

The Edit form field HTML Viewer window opens. The toolbar above each text box holds the HTML options you can use to format your text, such as bold, italics, font size, headings and lists.

Step 65

Drag PDF Reader onto the canvas.

Step 66

PDF Reader displays a PDF in the form, from the PDF's URL. Until it has one, it reads No PDF URL provided. To add the URL, click the element's edit button.

Step 67

In the Edit form field PDF Reader window, scroll down and paste the PDF's link into PDF Link. Then click Save & Close PDF Reader at the bottom right. Note: links from external sites may not work. If an externally linked PDF won't load, upload the PDF to PaT as an SD attachment, then click the attachment's share button to copy its link, and use that link.

Step 68

The fourth element in the list is Display Text (Read Only).

Step 69

Display Text is like HTML Viewer. It is designed to be a single line, but it supports several lines and pure HTML.

Step 70

Vertical Spacer, the last element on the first page of the list, does what its name says: it adds a space between form elements.

Step 71

Under the list, click Next to go to the second page of elements.

Step 72

Drag Banner, the last element of the Read Only control, onto the canvas.

Step 73

A wide bar reading Banner appears, and you can edit that text. Use a banner to give your form its title, or to divide the form into groups, each with its own title.

Multimedia

Summary The Multimedia control has five elements: Image View, Video (for example, a clip showing an inspector what to look for), Audio, Speech to Text, which turns what you say into text, and Image Canvas, which lets the person filling in the form draw on an image.

Step 74

Open the drop-down list under Controls and choose Multimedia.

Step 75

Drag Image View, the first element in the list, onto the canvas.

Step 76

Image View lets you upload an image to your form. To edit the image, click the element's edit button (the pencil), at its top right.

Step 77

Drag Video onto the canvas.

Step 78

Video lets you add a video to your form. To edit the video's URL, click the element's edit button.

Step 79

In the Edit form field Video window, put the URL in Link to load media from, then click Save & Close Video at the bottom right. A video is useful in an inspection, for example, to show the inspector exactly what to look for.

Step 80

Drag Audio onto the canvas.

Step 81

An audio player appears. Audio lets you add audio clips to your form.

Step 82

Drag Speech to Text onto the canvas.

Step 83

A text box appears, with a microphone under it. Click the microphone to start speaking, and your voice is transcribed into text.

Step 84

Drag Image Canvas, the last element in the list, onto the canvas.

Step 85

Image Canvas lets you upload an image that people can then draw on.

Step 86

When a form user clicks the image in the form, it opens in a pop-up on their screen, and they can draw over it. The drawing tools are in the bar along the top of the pop-up: they can draw freehand, add arrows, circles or squares, and write text.

Upload

Summary The Upload control has one element, File Uploader. Drag it into the form to let people upload files with their answers.

Step 87

Open the drop-down list under Controls and choose Upload.

Step 88

Drag File Uploader, the only element in the list, onto the canvas.

Step 89

An upload box appears on the canvas. It lets form users upload files to the form: they drag and drop a file onto the box, or browse for one.

Tables

Summary The Tables control has one element, Table grid. You name the table, add its columns, and set each column's type: FreeForm Text, Dropdown, Date Picker or Text Area. For example, a members table can have a date column and a dropdown column for the type of membership.

Step 90

Open the drop-down list under Controls and choose Tables.

Step 91

Drag Table grid, the only element in the list, onto the canvas.

Step 92

Table grid lets you create your own table. It is displayed in the SD, and it can be filled in, in real time, on the SD. At first the table has nothing to display. To create it, click the element's edit button (the pencil), at its top right.

Step 93

The Edit form field Table window opens. Type the table's name in the Title box near the top.

Step 94

Further down the window, under the table, click Add column.

Step 95

A Column Title box appears. Type the column's title, then press Enter to add the column to your table.

Step 96

Add each column the same way. The columns appear in a row at the top of the table, each with three dots at its right end.

Step 97

Each column can be formatted differently. For example, a date column is easier to fill in with a date picker. To change a column, click the three dots next to it.

Step 98

A panel for the column opens on the right. Click the box under Type to change the column's type.

Step 99

Choose from FreeForm Text, Dropdown, Date Picker and Text Area.

Step 100

For a date column, choose Date Picker, then click Save at the bottom of the panel.

Step 101

To turn another column into a dropdown, such as a column for the type of membership, click the three dots next to that column.

Step 102

Under Type, choose Dropdown.

Step 103

In Dropdown Options, type each option and press Enter after it. When you are done, click Save at the bottom of the panel, then Save & Close Table at the bottom right of the window.

Container

Summary The Container control's Field Group element groups related fields into a section. You drag fields into the group; move, reorder or remove them; duplicate the group; and give each group its own title, such as Part 1 and Part 2. In the finished form each group can be collapsed and expanded, so long forms feel less overwhelming.

Step 104

Open the drop-down list under Controls and choose Container.

Step 105

The list shows the field group element, Field Group. Drag it onto the canvas. The field group element is a design tool that groups related input fields into a single section, such as "Personal Information", "Work History" or "Medical Information". Placing related fields together makes a form easier to understand and to navigate, and gives it a clear structure that reduces confusion in long forms.

Step 106

The field group appears on the canvas: a bar reading Title, with a space under it for the elements you add. As PaT notes in that space, you can hold the SHIFT key while you drop an element if you need to keep it out of the group.

Step 107

Open the drop-down list under Controls again and choose Common, which lists the common form elements.

Step 108

Drag Text (Single line) and drop it inside the field group, in the space under its Title bar. The field group is highlighted green when your element is going into it.

Step 109

The text element now sits inside the field group.

Step 110

Drag a dropdown element, such as Dropdown (Single selection), into the same field group.

Step 111

Both elements are now in the field group.

Step 112

An element inside a field group has an extra button at the start of its row of buttons: the yellow exit button (an arrow leaving a box). To remove the element from the field group, click it.

Step 113

To move an element within the field group, use its move button (crossed arrows), next to the exit button.

Step 114

Or use Reorder, at the top right of the form builder.

Step 115

To make two field groups, click the field group's Duplicate button, the third of the buttons at its top right, just above its Title bar.

Step 116

There are now two field groups, each with a text element and a dropdown element in it.

Step 117

To tell the groups apart, rename them, for example Part 1 and Part 2 of the form. Click the first group's edit button (the pencil), at its top right.

Step 118

In the Edit form field Field Group window, clear the Title box and type the group's new title, such as "Part 1". When you're done, click Save & Close Field Group at the bottom right.

Step 119

Do the same for the second group, calling it Part 2.

Step 120

To preview the form, click Preview at the top left of the form builder.

Step 121

The Preview (Emulated Size) window opens. Each field group can be collapsed and expanded with the arrow at the right end of its title bar, so form users can focus on one section at a time without feeling overwhelmed by the form's overall length.

Custom

Summary The Custom control has six elements: Data Scene for showing data in the form, Signature, Divider, Flow Chart, Presentation for showing a presentation inside the form, and the Submit Form button.

Step 122

Open the drop-down list under Controls and choose Custom.

Step 123

Drag Data Scene, the first element in the list, onto the canvas.

Step 124

Data Scene lets form users visualise data within the form. Until data is available, it reads No Visualization Data Available. The data can be configured through the Endpoint Manager.

Step 125

Drag Signature onto the canvas.

Step 126

A box to sign in appears, with a Clear button under it. Form users add their signature directly within the form. It is ideal for contracts, consent forms, approval sign-offs, policy acknowledgements, employment documents, or any form that needs a formal confirmation.

Step 127

Drag Divider onto the canvas.

Step 128

A line appears across the form. Dividers visually separate the sections of a form, making it easier to read and complete. They help to organise groups of questions, separate different sections and improve the overall flow of the form.

Step 129

Drag Flow Chart, the last element on the first page of the list, onto the canvas.

Step 130

A blank drawing area appears, with zoom buttons at its bottom left. In it you create your own flowchart, directly within the form: a way to map out processes, decision paths or workflows, so form users can easily understand how something works.

Step 131

Under the list, click Next to go to the last page of the Custom elements.

Step 132

Drag Presentation, the first element on that page, onto the canvas.

Step 133

Presentation lets you embed and display a presentation directly within the form. Use it to give information, training or instructions before someone completes the form.

Step 134

Drag Submit Form, the last element, onto the canvas.

Step 135

A Submit Form button appears. Form users click it to finalise and submit the form once they have completed all the required fields. It signals that they have finished entering their information and are ready to send their responses.