Add Form Components

Form components are the UI elements that you add to a form. In DesignStudio, form components appear in the Design mode, on the left.

The following types of components are available for forms.

To use a component, drag and drop the component onto the canvas. For information about available components, their settings, and their toolbars, see Form Components List.

To link a form component to a board, the component field names must be identical to the board's DB Field Name. For example, if the board's Address field's DB Field Name is Address1, the Address field on the form must also be Address1, not Address. DesignStudio Pro displays a warning that the field does not exist, but it will still allow you to publish the form. In this case, the Address field will not send the entered data to the WebEOC board. To verify the DB Field Name, in the component's settings window, click the API tab. The DB Field Name appears in the Property Name field.
If you don't want information to be sent to WebEOC, you do not have to match all the fields. You can use an unmatched component strictly as a visual aid. For example, if you want to insert a checkbox that states, Select to see more information, and then add a condition that opens a text area containing additional information that is not shared with WebEOC, you do not need to match names. The information will only appear on the form and will not transmit data to WebEOC.
A form must have at least one matching field for it to be valid.
Form titles are derived from the name of the form file.

To add components to a form

In your form, in Design mode, drag the component onto the canvas. For details about the settings, see Form Components List.
In the component's settings window that appears, enter details to customize the component. The Preview area displays a preview of the form as you specify details.
Click Save to exit the window.

if you need to return back to this window, click the settings icon in the top right of the component.
Click Save to save the form.

In Design mode, you can click the Preview button to view a representation of the form components on different devices. See Preview Forms.

The next step is to customize the message that appears when a user submits a form. See Customize the Submit Message.