Custom Forms

Create and display custom forms in Leopard for any Teneo response. Styling, icons, validations, input, text areas, selects, combo boxes, images, headers, html, sliders, check boxes, switches & radios

Introduction

Example Custom Form with Validation

Although you can capture any input via dialog through the course of conversation it can be more familiar and user friendly to display a traditional form to a user at a key point of a conversation. Having this option in Leopard doesn't force the use or display of custom forms in any solution but rather provides flexibility in confirming or capturing information outside of lengthy conversations.

You have great control of the form structure, appearance, behavior, initial values and validation rules.

Behavior

A custom form is currently tied directly to the respective output node that returned the "formConfig" as an output parameter.

This means that the form button against that response will be displayed in the chat dialog until the user completes the form and submits it back to Teneo. At that point the form button in the chat UI is removed from that particular response.

Current configuration is that the same form and button can be displayed in new responses if new dialog takes you there. If you want to prevent the offer of a custom form that has already been submitted then that logic needs to be engineered server side in Teneo around the "postback" data that is posted back to Teneo on a successful submission.

The form button can remain visible in the dialog until it's completed and submitted back. Therefore you should configure the "postback" information of the form to align with your flow strategy for capturing and responding to the data posted back Teneo.

At present a user isn't forced to complete a form in the current turn of the active conversation. Therefore you should plan accordingly in Teneo.

Output Parameter

formConfig = {
  "title"  : "My Custom Form",
  "fields" : [
    {
      "header" : {
        "label" : "Please enter in your email address"
      }
    },
    {
      "textInput" : {
        "name"           : "username",
        "label"          : "Email",
        "hint"           : "Just the username part please",
        "initialValue"   : "jolzee",
        "placeHolder"    : "username",
        "style"          : { "solo":true },
        "clearable"      : true,
        "persistentHint" : true,
        "icons"          : { "appendOuter":"email-edit" },
        "suffix"         : "@gmail.com",
        "validations"    : "required"
      }
    },
    {
      // ... other fields
    }
  ]
}

A more comprehensive example can be found here

Form Config Component Configuration

Element

Required/Optional

Default Value

Type

Notes

title

required

String

The form's title

validationFailedMessage

optional

Please complete all required fields

String

A custom message to be displayed once a user submits the form and there are validation errors

openAutomatically

optional

false

Boolean

Controls if the form should automatically open for the Teneo response that contains the formConfig

openFormButtonText

optional

Form

String

Set the button text to open the form. Seen just below the answer text.

optional

Object

Controls what is send back to Teneo on a successful submission of the form

optional

Object

Controls the display of the button used in the form to complete the form submission

required

Array of Field Type Objects

Allows you to add as many of the available fields in a specific order

Example ConfigPostback ObjectButton ObjectField TypesStyle ObjectIcons ObjectMasksValidation

Last updated