A Form field collects user data and serves as the display or user interface within the system. Form fields (sometimes referred to as 'components' or 'controls') define the way the user enters a piece of data and the format that the data is saved as.
This article covers Common Fields. There are also further articles on Advanced, Layout, Other and System Fields.
Adding a Form Field
To add a form field to a form, drag and drop the component from the left column into the desired location within the form.
Each new form starts with a submit button automatically added to it. This can be removed or edited as necessary.
Editing a Form Field
To edit a form component on a form, hover over the field and click the gear icon. You will then be presented with a settings form for the component.
The settings for a form field are different for each field type.
Text Box
A text field can be used for short and general text input. There are options to define input masks and validations, allowing users to mould information into desired formats.
Unique Properties
- Display
- Input Mask: allows you to restrict the input of the user to a desired character-by-character format. '9' for numeric, 'A' for alphabetical, '*' for alphanumeric, other characters, digits and punctuation can be used literally.
- Data
- Input Format: Choose from Plain (Recommended), HTML or Raw (Insecure)
- Validation
- Minimum Length and Maximum Length: Allows you to set limits on the number of characters that can be entered in the field
- Minimum Word Length and Maximum Word Length: Allows you to set limits on the length of individual words that can be entered in the field
- Regular Expression Pattern: Sets a pattern to validate the input against. Will stop the form from submitting if the pattern is not adhered to.
For a full list of properties see the Common Field Properties article
Number
Number fields can be used when an input must contain only digits.
Unique Properties
- Display
- Prefix and Suffix: Allows you to define a character or group of characters to start or end the number string, such as '$' or 'kg'
- Data
- Use Delimiter: Separates thousands by a comma when checked
- Decimal Places: Sets the maximum number of decimal places for this field
- Require Decimal: Will show the decimal to the specified number of places, regardless of whether or not the input is a whole number
- Validation
- Minimum Value and Maximum Value: Allows you to set limits on the number of characters that can be entered in the field
- Regular Expression Pattern: Sets a pattern to validate the input against. Will stop the form from submitting if the pattern is not adhered to.
For a full list of properties see the Common Field Properties article
Yes/No Radio
A Radio form component with values defaulted to Yes and No for convenience.
Unique Properties
- Display
- Options Label Position: Allows you to set the position of the list of options in relation to their checkboxes, to either Top, Left, Right or Bottom
- Inline Layout: Checking this property will show the options in a horizontal list rather than the default vertical list.
- Data
- Reset Default Value: Allows you to set the default value of the radio to null (i.e. not 'yes' and not 'no'). Check this box and save the component to reset the previously saved default value to null.
- Values: Allows you to set the user-facing labels and the system-facing value for each of your options. In the JSON output, the field will be set to the Value of the selected option. You can also set a shortcut key for each of these options. Initial labels are 'Yes' and 'No', and the initial values for those labels are 'true' and 'false'. Once the component has been added you can add more options (e.g. 'Not Applicable') or change the labels and values as you see fit. You can also create alternative text for each of these options, in the Mtext column.
For a full list of properties see the Common Field Properties article
Radio Group
A Radio Group form component is used when you only want one option from the list to be able to be selected.
- Display
- Options Label Position: Allows you to set the position of the list of options in relation to their checkboxes, to either Top, Left, Right or Bottom
- Inline Layout: Checking this property will show the options in a horizontal list rather than the default vertical list.
- Data:
- Reset Default Value: Allows you to set the default value of the radio to null (i.e. not 'yes' and not 'no'). Check this box and save the component to reset the previously saved default value to null.
- Values: Allows you to set the user-facing labels and the system-facing value for each of your options. In the JSON output, the field will be set to the Value of the selected option. You can also create alternative text for each of these options, in the Mtext column.
For a full list of properties see the Common Field Properties article
Dropdown List
A Dropdown List field will display a list of values in a drop down list to users. Users can select only one of the values.
Unique Properties
- Data
- Data Source Type: Allows you to choose the type of data source for the drop-down options; Values, Raw JSON or URL
- Data Source Values: Allows you to set the user-facing labels and the system-facing value for each of your options. In the JSON output, the field will be set to the Value of the selected option
- Data Source Raw JSON: Accepts a raw JSON array as the data source for the drop-down
- Data Source URL: Accepts a url which will return a JSON array as the data source for the drop-down. You will also be prompted to enter details of request headers, data paths, search queries and filters.
- Data Source Custom Values: Allows you to set the possible options using Javascript. Useful if you want the list to contain data from a repeated field on a previous page of your form.
For a full list of properties see the Common Field Properties article
Date / Time
Date/Time form components can be used to input dates, times or both dates and times. The field can be edited manually, or dates and times can be selected from the pop-up modal.
The date that is saved is not easily readable. You will need to use a date format switch on all date fields to produce a nice output.
Unique Properties
- Display
- Display in Time Zone: Sets how to display the time zone. This will either be the viewer's, location's or submission's time zone, or UTC. *
- Use Locale Settings: Use locale settings to display day.*
- Allow Manual Input: Allows the user to type the value for this field.
- Format: Allows you to change the displayed input format
- Date / Time
- Enable Date Input: Allows a date to be collected by this field
- Minimum Date and Maximum Date: Allows you to set limits on the dates that are available for the user to select.
- Enable Time Input: Allows a time to be collected by this field
- Hour Step Size: Specify the step size for the hour data
- Minute Step Size: Specify the step size for the minute data
- 12 Hour Time: Displays in 12 hour time if checked, 24 hour time if unchecked.
For a full list of properties see the Common Field Properties article
Check Box
A checkbox is a field that returns true when it is checked and false when it is unchecked. It contains a single expression for the user to either accept or ignore, and can be toggled on and off.
Check Box Group
A Check Box Group is a list of check boxes collected together in one control. The user will be able to select any number of these options. It will save its list of values as either true or false depending on whether the option is selected or not.
Unique Properties
- Display
- Options Label Position: Allows you to set the position of the list of options in relation to their check boxes, to either Top, Left, Right or Bottom
- Inline Layout: Checking this property will show the options in a horizontal list rather than the default vertical list.
- Data
- Values: Allows you to set the user-facing labels and the system-facing value for each of your options. In the JSON output, each value will be assigned either true or false based on the selection. You can also create alternative text for each of these options, in the Mtext column.
For a full list of properties see the Common Field Properties article
Person
A Person component is a group of fields which build up a full name in one field from the first middle and last names contained in three separate fields. It allows you to refer to the person in a document or the email by just their first name by referring to the first name field directly, whilst also allowing you to refer to the full name with just one field in your template.
By default only the first and last name fields are required.
The editable field name for a Person control acts as a prefix with set extensions for each of the contained fields. As usual, you cannot use the same field name for a Person control as any other field on the form, even though the full field names of the contained fields may end up being unique. The field name extensions are as follows:
For a Person component with the field name 'person' as an example:
Title (Salutation): person_Sal_cho
First Name: person_Name_First_txt
Middle Name: person_Name_Middle_txt
Last Name: person_Name_Last_txt
Full Name (Read Only): person_Name_Full_scr
Unique Properties
- Display
- Hide Title: Hides the title/salutation dropdown list
- Hide Middle Name: Hides the middle name text input field
- Hide Full Name: Hides the assembled full name field. If hidden this field will still assemble the full name from the first, middle and last name fields.
- First Name Required: Allows you to toggle the first name being required (if the whole control is not required)
- Last Name Required: Allows you to toggle the last name being required (if the whole control is not required)
For a full list of properties see the Common Field Properties article
Address Group
An Address Group is a group of fields which allow you to search for an address using the Google Maps API. As Google Maps is not always 100% accurate, the search populates up to six separate fields (Level, Street Number & Name, Suburb/City, State, PostCode and Country) which are all editable, and then assembles a full, formatted address from those fields, including the optional Care Of field. As with the Person control, you have the flexibility to refer to any of these fields directly in the document template, or just the full address if you should so desire.
The editable field name for an Address Group acts as a prefix with set extensions for each of the contained fields. As usual, you cannot use the same field name for an Address Group as any other field on the form, even though the full field names of the contained fields may end up being unique. The field name extensions are as follows:
For an Address Group with the field name 'tenancy' as an example:
Care of (C/-): tenancy_Addr_Co_txt
Building, Floor, Level: tenancy_Addr_Level_txt
Street No. & Name: tenancy_Addr_1_txt
Suburb / City: tenancy_Addr_Suburb_txt
State: tenancy_Addr_State_txt
Postcode: tenancy_Addr_PC_txt
Country: tenancy_Addr_Country_cho
Assembled Full Address (Read Only): tenancy_Addr_txt
Unique Properties
- Display
- Label for Care of (C/-): defines the label for the Care Of field
- Hide Care of (C/-): allows you to hide the Care Of field
- Label for Bldg, Floor, Lvl: defines the label for the Level field
- Hide Bldg, Floor, Lvl: allows you to hide the Level field. Hiding this field will not stop the search function from populating the field with data.
- Label for Street No & Name (or Extended address): defines the label for the Street No & Name field
- Hide Street No & Name (or Extended address): allows you to hide the Street No & Name field. Hiding this field will not stop the search function from populating the field with data.
- Label for State: defines the label for the State field
- Hide State: allows you to hide the State field. Hiding this field will not stop the search function from populating the field with data.
- Label for Zip / PostCode: defines the label for the PostCode field
- Hide Zip / PostCode: allows you to hide the PostCode field. Hiding this field will not stop the search function from populating the field with data.
- Label for Country: defines the label for the Country dropdown list
- Hide Country: allows you to hide the Country dropdown list. Hiding this field will not stop the search function from populating the field with data.
- Required (multiple): Each sub-component has a 'required' checkbox. If checked, this sub-component must be filled in for the form to submit.
- Hide Full address: allows you to hide the Assembled Full Address field. If hidden this field will still assemble the address from the seven fields above, only if those fields are visible, or all of those fields are hidden.
For a full list of properties see the Common Field Properties article
NZBN
The NZBN field allows you to search for and gain access to details about companies registered in New Zealand, including their New Zealand Business Number.
For more information on this field, please see our article: NZBN Integration;
Comments
0 comments
Article is closed for comments.