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.
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:
The Form Editor consists of two major areas:
The Form Editor consists of two major areas:
- Form details, and
- Form design.
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.
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.
The Form Editor does not show, nor control, the global fields for name and email that are in the form. Refer to Custom Form Settings to remove those fields for users.
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.
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 tabs include, but are not limited to:
This section allows display related aspects to be customised, for example: setting the text for the label, add a tool-tip, etc.
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.
Provides the validation options for the component, such as setting it as a required field and more. Available validation depends on the component itself.
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.
Remember to save the whole form!
Changes are temporary and will not be committed until the Save Form button is clicked, which returns back to the Custom Forms page (updating the list of existing forms).
The green Save button used in the Component pop-up is NOT a substitute.