Advanced Fields

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 Advanced Fields. There are also further articles on Common, 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 Component

To edit a form component on a form, hover over the component and click the gear icon. You will then be presented with a settings form for the component.

The settings for a form component are different for each component type.

Nested Form

A Nested Form component allows you to insert one (child) Form with all its fields into another (parent) Form.

For example, if you have a standard form to collect Company details and a standard form to collect details of Individuals, you could nest both of those forms in a larger, more complex form to speed up and standardise your build process.

Unique Properties

• Form
  • Form: Select a child Form that you’d like to nest into your parent form
  • Field Name Substitute: Allows you to substitute strings in in the nested form's field names for new strings which better describe how the components in the nested form relate to the parent form. For example, nesting a standard Client Details form in a parent form to collect the same details, but for a Supplier, you might enter "Client" in the Pattern box and "Supplier" in the Replacement box. This would then change every instance of "Client" in the field names of the nested form to "Supplier" for this particular parent form. You can make more than one field name substitute by clicking the Add Another button.

For a full list of properties see the Common Field Properties article

Popup Form

A Popup Form component is much like a Nested Form, except instead of the child form being fully embedded in the parent form, the user will see a button which will open the child form in a new popup window. This is useful for making long, complex forms both easier to read and quicker to load.

Unique Properties

• Form
  • Form: Select a child Form that you’d like to nest into your parent form in the form of  a popup
  • Left Icon: If you have an icon library and would like to include an icon to the left of the button label, you can do so by adding the icon class here
  • Right Icon: If you have an icon library and would like to include an icon to the right of the button label, you can do so by adding the icon class here.
  • Size: Choose the size of the button

For a full list of properties see the Common Field Properties article

YouTube Popup 

A YouTube Pop-Up component is a tool which allows you to embed a YouTube video which can be popped up by the user with the click of a button.

Note that videos containing copyright material will be unavailable for viewing using this component. Though most tutorial or marketing videos will be exempt from this, we recommend logging out of YouTube and checking the video linked in the control plays via form preview, before making your form visible to clients.

Unique Properties

• Display
  • YouTube ID: Accepts the video ID from a YouTube URL. This will be the alphanumeric code listed after the 'v=' in the URL for the video you want to display
  • Width and Height: The width and height in pixels that you want the pop-up to display in. Please confirm that the dimensions are appropriate before opening your form to clients.

For a full list of properties see the Common Field Properties article

File Upload

A File Upload field allows users to upload files to a form. File uploads cannot be inserted directly into a document template.

Unique Properties

• File
  • Enable web Camera: This will allow using an attached camera to directly take a picture instead of uploading an existing file.
  • File Pattern: See https://github.com/danialfarid/ng-file-upload#full-reference for how to specify file patterns.
  • File Minimum Size and File Maximum Size: Allows you to set limits on the size of the files to be uploaded

For a full list of properties see the Common Field Properties article

Image Upload

An Image Upload field allows users to upload images to a form.  Unlike a File Upload field, the web camera is enabled by default.

Image uploads can be inserted into a document template. To do so you will need to use an extension on the field name: "_url".
For example: if you name your image upload field as "Logo_img" you will need to use "Logo_img_url" as the field name in your template.

Unique Properties

• File
  • Webcam Width: Sets the width of the displayed camera in pixels*
  • File Minimum Size and File Maximum Size: Allows you to set limits on the size of the files to be uploaded
  • Image Size: Sets the size of the image once uploaded as a percentage of form width.

Signature

A signature field is a special field that allows someone to sign the field with either their finger on a touch enabled device or with the mouse pointer. This signature will be converted into an image and stored with the form submission.

Unique Properties

• Display
  • Width: Sets the width of the signature box (in %)
  • Height: Sets the height of the signature box (in pixels)
  • Background Colour: Sets the background colour of the signature box. Accepts CSS coding including select names of colours
  • Pen Colour: Sets the 'ink' colour of the signature. Accepts CSS coding including select names of colours

For a full list of properties see the Common Field Properties article

Button

Buttons can be added to perform various actions within the form.

Unique Properties

• Display
  • Action: This is the action that will be performed. Currently the actions that can be performed are; Submit, Event, Custom, Reset, OAuth and POST to URL.
    • Submit: A submit action submits the form to Syntaq.
    • Save State: Saves the data to a record without submitting to Syntaq. A saved record can be re-opened through the Records menu.
    • Event: Allows you to link to a predetermined event*
    • Custom: Allows you to set up custom logic to evaluate when the button is clicked*
    • Reset: Reset the form fields back to their original state.
    • OAuth: Opens an OAuth authentication popup. This will only work after it has been assigned to an OAuth Action. See the OAuth guide for more information on how to set up OAuth in your project*
    • Post to URL: Allows you to set up a valid API integration to be triggered on press of the button.
  • Theme: Set a theme (color) for the button. These options currently map to Bootstrap classes that will be added to the button.
  • Size: Choose the size of the button
  • Left Icon: If you have an icon library and would like to include an icon to the left of the button label, you can do so by adding the icon class here
  • Right Icon: If you have an icon library and would like to include an icon to the right of the button label, you can do so by adding the icon class here.
  • Disable on Form Invalid: Only allow the action to be completed if all of the validation tests on the form have been passed.

Currency

Currency components allow you to capture currency data in the correct format.

Unique Properties:

• Data
  • Currency: Sets the currency type. e.g. Australian Dollar, Great Britain Pound, Euro etc.

For a full list of properties see the Common Field Properties article