{"id":23796,"date":"2020-07-03T16:47:31","date_gmt":"2020-07-03T15:47:31","guid":{"rendered":"https:\/\/developer.kore.ai\/v7-3\/?p=23796"},"modified":"2020-07-03T16:47:31","modified_gmt":"2020-07-03T15:47:31","slug":"working-with-the-form-node","status":"publish","type":"post","link":"https:\/\/developer.kore.ai\/v7-3\/docs\/bots\/bot-builder-tool\/dialog-task\/working-with-the-form-node\/","title":{"rendered":"Working with the Form Node"},"content":{"rendered":"
<\/div><\/div><\/section>
<\/div><\/div><\/div>\r\n\t
\r\n\t\t
\r\n\t\t\t

Form node lets you integrate the UI Forms into a Dialog Task. This would facilitate the presentation of form to capture user inputs for specific use cases.<\/p>\n

The primary purpose of the Form Node is to represent a UI Form in the dialog task and make the form available for the end-users on their channel. For example, let’s consider a banking bot that has a form to capture the customer details for opening a new account. You may want to use the form instead of prompting for each and every entity value.<\/p>\n\r\n\t\t<\/div>\r\n\t<\/div>\r\n

<\/div><\/div>\r\n\t
\r\n\t\t
\r\n\t\t\t

Step 1: Adding a Form Node to the Dialog Task<\/span><\/h3>\n
    \n
  1. Open the Dialog Task in which you want to add the Form node.<\/li>\n
  2. Hover over the node next to which you want to add the node, and click the Plus<\/strong>\u00a0\"diydialogtaskplusicon\"\u00a0icon.<\/li>\n
  3. Go to Form <\/b>and select the UI Forms from the available list (Note you cannot create a new Form Node from within a Dialog like other nodes).<\/li>\n
  4. The Component Properties panel opens.<\/li>\n<\/ol>\n\r\n\t\t<\/div>\r\n\t<\/div>\r\n
    <\/div><\/div>\r\n\t
    \r\n\t\t
    \r\n\t\t\t

    Step 2: Configuring the Component Properties<\/span><\/h3>\n

    The Form Component Properties allow you to configure the General Settings, User, and Error Prompts.<\/p>\n

    Note:<\/b> The configurations you set up or modify in this section are reflected in all other Dialog Tasks<\/span> that use this node.<\/div>\n

    \"\"<\/a><\/p>\n

      \n
    1. Enter a Name<\/strong> and Display Name<\/strong> for the Entity node. Entity names cannot have spaces.\u00a0The UI Form<\/strong> property is set to the UI Form you selected and cannot be changed.<\/li>\n
    2. In the Prompt Message<\/b> text box, enter the prompt message that you want the user to see for this form. It would be giving instructions to the user to click on the link to initiate the form. You are advised not to change the context variable reference (of the form {{context.form_node.formLink}}<\/code>)<\/span>coded therein. You can enter channel-specific messages for user prompts. For more information, see Using the Prompt Editor<\/a>.<\/li>\n
    3. In the Error Message<\/b> box, review the default error message, and if required modify it. For more information, see Using the Prompt Editor<\/a>.<\/li>\n
    4. In the Submit Message<\/b> box, review the default message to be displayed after successful submission of the form, and if required modify it. This message is applicable only when the UI Form is opened in a browser tab and not for Web\/Mobile SDK. For more information, see Using the Prompt Editor<\/a>.<\/li>\n
    5. In the Web\/Mobile SDK Form Behavior<\/strong> section, you can set how the form should be displayed. You have the options of:\n