Customize form fields
Please ensure you have created a base form before proceeding with this article. Once ready, you can proceed to insert sections and fields according to business needs.
Open a form for editing
Go to UPlay content > Forms.
Input keyword into Keyword textbox and click Search button.
At Results section, click ID to view the form contents. Data related to the form is shown at a glance.
Submissions
Presents the viewer with all form responses submitted by customers.
Sections
Provides access to Avalon user to Form sections where user can define new Sections or edit existing ones. Different sections can help categorize or group the form questions. Eg: In a post-completion survey form, there could be sections related to event satisfaction, venue, customer service, food catering etc.
Vouchers
Currently Not in use.
Create a section
Click Sections tab. There will be no sections defined for a newly created form.
To create a new Section, user would click on the tools button and select +New option. A new popup modal window ( FormSection Edit) will be displayed to the customer
At FormSection Edit screen, input all mandatory fields (indicated in bold and with *).
Show online
Whether the section will be visible or hidden in the form.
Checkbox
Sort order *
Display sequence of the section.
Numeric (Integer)
Page break
To show a divider or separator line, or to display the section on a new page ( depending on site design)
Checkbox
Title *
Name of the section.
Textbox
Show section title?
Whether to display the section name on the form.
Checkbox
Details
Value entered into this field of a question would appear under the field in a cursive writing. Generally provides information of the purpose of the questions in the specific section. Optional field.
HTML editor
Click Save to proceed with changes or Cancel to exit without saving.
Repeat steps 1 to 4 if the form will consist of multiple sections.
Add fields to sections
Now that you have created sections, you can proceed to choose and add fields.
Select the Section where form questions are to be defined. This will highlight the section as shown below.
A new tab called Field will appear underneath Sections. By default, it will be blank.
Click tools icon and select +New - this will open a new modal window allowing the user to set the required questions.
Is mandatory
Whether the field is mandatory or optional. Check the checkbox if a field is to be configured as mandatory.
Avalon will alert submitter at submission if a mandatory field is blank.
Checkbox
Show online
Whether the field should be made visible in the form.
Checkbox
Sort order *
Display sequence of the field.
Numeric (Integer)
Title *
Name of the field and displayed as a label.
Textbox
Type *
Type of field, refer to below table to view available list of field types.
Dropdown
Details
Description of the field, displayed underneath a field, in italic and smaller font.
Textbox
Dropdown options
Applicable for field type Dropdown and Multiple choices
Textbox
Validation RegEx
Applicable when field requires validation.
Textbox
Max file size (MB)
Maximum permitted file size for upload
Dropdown
Allowed file types
File types permitted to be uploaded. Eg: customer is required to upload images, only these values would be accepted .jpg, .jpeg, .png. If customer uploads PDF file type, alert message will appear. Separate multiple values with a comma. Note that not specifying file types for an Upload field will result in customer not being able to upload files.
Textbox
Types of selectable field
Boolean
Presents as single checkbox. The value of the “Details” field will be displayed against the checkbox.
Date
Date field. Calendar will popup when user clicks on the date field. Date is displayed in DD/MM/YYYY format.
Integer
Integer question type renders as numeric field, only allowing for whole numbers to be entered.
String
In the front-end resolves as a simple text field. If the field is marked as mandatory or if the value entered by customer in the field needs to follow a specific pattern, the Admin user can specify such pattern in the Validation RegEx field. Eg. checks for correct format of post code; checks only 4 characters entered for Last 4 NRIC characters, etc.
Boolean (radio buttons)
This is Yes/No type of field. In the front end it renders as Radio button options.
Dropdown
Dropdown options are defined in the Dropdown options field. Values must be separated by the caret symbol ^ – eg. Option1^Option2^Option3 etc.
Free text
In the front-end it renders as a multiline textbox. Longer plain text can be entered in this field.
File Upload
This field allows a user to upload a file. Restriction regarding file size and type are setup in the following fields: Max file size (mb) – max file size is specified in MB
Allowed file types – comma separated list of all allowed file types, eg.
.docx, .jpeg, .jpg,.png, .svg If file upload field is added, allowed file types must be populated.
Multiple choice
Multiple choice question is presented as a group of checkboxes. The multi-choice options are defined in the Dropdown options field. Values must be separated by the caret symbol ^ eg. Option1^ Option2^Option3 etc.
Email and Mobile phone fields have format validation added.
Click Save to proceed with changes or Cancel to exit without saving.
Once saved, Fields tab will be updated with all inserted fields.
Always preview a form before publishing it online. To learn more, refer to Preview form.
Last updated