Using the Form Editor

The Form Editor is for creating and editing Custom Forms.

Custom Forms is an independent service
Forms are not tied to any VETenrol registration processes. Both VETenrol and VETembark provide interfaces for using this feature.

The Form Editor provides access to some very powerful and complex functionality for components including support for custom scripts using JavaScript and JSONLogic.
Clients are very welcome to use these features, however the VETtrak Support Team are unable to provide specific assistance with questions in this area.

Topics in this article:

• Form Editor Overview
• Creating a Custom Form
• Modifying an existing Form
• Form components

Overview

The Form Editor consists of two major areas:

The Form Editor consists of two major areas:

1. Form details, and
2. Form design.

Form details

This area sets up the basic details for the form. It has the two required fields, Form Name and Form Code, that must be completed in order to save the form.

Form design

This area is for the drag and drop form builder. The user drags an element from one of the categories in the left hand pane into the main form panel to include that element in the form. Each element added into the form can have validation and display rules in addition to layout behaviour.

Creating a Custom Form

Forms can be created from the Configuration () page, via the Create link under Custom Forms. Alternatively, a Create button is also provided when managing existing forms. Using either will open the Form Editor.

• Enter the Form Name.
• Enter the Form Code.
• The Status can remain set to Draft until the creation process is complete.
• Optionally, provide a Form Description.
• Optionally, upload any files that users may need or should refer to while completing the form.
• Drag and drop form components from the Basic, Advanced or Layout sections of the Form Editor to build your form.
  Note: The Submit button (see screenshot) is an existing form component for users to submit their completed form. This will not save your progress.
• Click the Save Form button to save and return to manage Custom Forms. Alternatively, click Back to return to mange Custom Forms without saving.

Modifying an existing form

Custom Forms can be managed by choosing Tools () and then Custom Forms from the menu, or via the Manage link on the Configuration page ().

Once the page to manage Custom Forms is open, the existing form templates will be displayed in a list:

• Click the name of a form to edit it.

This will open the Form Editor, where changes can be made.

Form Components

 The builder has three sections of components that can be used to create your form:

• Basic – Contains basic input types that can be used to collect data.
• Advanced – Contains a more complex set of input types used to collect data, some of which require things such as API keys to use (more advanced users).
• Layout – Contains components that alter the layout, such as tables and columns. It also contains the Content component, which allows the insertion of text/HTML into the form to convey information to users.

Using a component

Once a user drags a component into the form, a popup will ask how they want the input to behave.

The Component pop up is divided into two columns, with the left-hand side offering a variety of customisation options organised into tabs and the right-hand side giving a preview to show what the input will look like when the user saves.

The screenshot depicts, in part, the Text Field component. Other components may vary.

The tabs include, but are not limited to:

• Display
  This section allows display related aspects to be customised, for example: setting the text for the label, add a tool-tip, etc.
• Data
  This section controls how the data, or answer, for the component is handled, for example: setting a default value, selecting list items and others depending on the component.
• Validation
  Provides the validation options for the component, such as setting it as a required field and more. Available validation depends on the component itself.
• Conditional
  This section allows a component to show or hide if certain conditions are met.

NOTE: More in-depth documentation on the components is available from help.form.io.

Managing existing components

Once components have been added to the form, hovering over a component will display some options for making adjustments to the component.

These are as follows:

• Edit – open the component pop-up to make changes.
• Move – Click and drag to re-position the component.
• Edit JSON – open the Component pop-up to make changes to the source code for the component.
• Remove  – delete the component.