= Purpose= The Bright Pattern Contact Center ''Form Builder Reference Guide'' describes the building blocks of the Bright Pattern Contact Center web forms. This guide explains how to use these building forms to build custom forms for the Agent Desktop application. Forms are configured in the Contact Center Administrator application, while the form fields are added and edited in the Form Builder application. For more information about form management, such as association of forms with outbound campaigns, see the ''Contact Center Administrator Guide'', section [[#topic_contact-center-administrator-guide/activityforms|Forms]]. [[File:New-Form-50.PNG|800px|thumbnail|center|Drag and drop fields to build custom forms with the Form Builder application]] = Audience= This guide is intended for professionals responsible for design, development and testing of agent desktop applications in your contact center. Participants are expected to be familiar with general principles of web design and to have a solid understanding of contact center operations and resources that are involved in such operations, including agents and teams, services and skills, schedules, and access points. = How to Launch Form Builder= The Form Builder application is always launched from the [[#topic_contact-center-administrator-guide/activityforms|Contact Center Administrator]] application. Only after a form is added to the system in Contact Center Administrator is it ready to be edited and customized. Forms may be either added or imported to your contact center. == How to Add a Form == To add a new form, follow these steps: # In the Contact Center Administrator application, navigate to ''Configuration > Forms''.[[File:Configuration-Forms-50.PNG|800px|thumbnail|center|Contact Center Administrator > Configuration > Forms]] # Select the type of form you wish to create (e.g., [[#topic_contact-center-administrator-guide/activityforms|Activity]],[[#topic_contact-center-administrator-guide/chatforms|Contact]], Case, Augmentation).[[File:Selecting-Forms-to-Add-50.PNG|450px|thumbnail|center|Forms > Activity]] # At the bottom of the screen, click '''+''' to add a new form.[[File:Add-New-Form-50.PNG|450px|thumbnail|center|Click "+" to add a new form]] # The Form Builder application will open in a new browser window or tab, where you will build and edit the new form.[[File:New-Form-Blank-Canvas-50.PNG|800px|thumbnail|center|A new, blank form]] == How to Import a Form == You can import any form that was built in any version of Bright Pattern Contact Center. When working with forms created in version 3.x of the software, you will need to import them before editing them in Form Builder. To import a form, follow these steps: # First log into the Contact Center Administrator application and navigate to ''Case & Contact Management > Forms''.

[[File:Form-CCA-Forms-50.PNG|800px|thumbnail|center|Contact Center Administrator > Case & Contact Management > Forms]]

# Click the '''Import form''' [[File:Form-Import-Button-50.png|26px]] button.

# In the ''Import Screenpop Form'' dialog, name and browse for your form, and then click '''Upload'''.

[[File:Form-Import-File-3x-50.PNG|450px|thumbnail|center|Upload form]]

# Your imported form will appear in the list of forms.

[[File:Form-List-50.PNG|650px|thumbnail|center|All forms]] == How to Launch Form Builder and Edit a Form == Once your forms have been added or imported to your contact center, they are ready to be edited in Form Builder. Follow these steps to open a form in Form Builder: # In the Contact Center Administrator application, navigate to ''Case & Contact Management > Forms''.

[[File:Form-CCA-Forms-50.PNG|800px|thumbnail|center|Contact Center Administrator > Case & Contact Management > Forms]]

# Select the form that you want to edit from the list.

# Click the '''Edit''' [[File:Form-Edit-Button-50.png|26px]] button.

# This will open the form in the Form Builder application, in a new browser window or tab.

[[File:Form-Edit-3x-50.PNG|thumb|800px|center|Editing a version 3.x form]]
= Form Builder Overview= Bright Pattern Contact Center supports the creation of service-specific web forms that can be used to facilitate interaction handling. If a form is defined for a particular service, it will be displayed by the Agent Desktop application when a corresponding interaction is distributed to the agent. Activity forms can be pre-filled with data from third-party databases (via scenarios) and from calling lists. Forms associated with outbound campaigns also can be used for new data entry during active interaction handling and/or after-call work (ACW). Filled-out forms can be transferred between agents working on the same interactions. The data collected via editable forms can be stored as part of the campaign results and is available for offline processing. Note that editable forms are currently supported for services of Outbound Voice and Blended Voice types only. For all other types of services, static forms can be used (i.e., forms without any editable fields). Forms are designed and edited in the application called Form Builder. This application is launched from the Contact Center Administrator application. For more information, see section [[#topic_contact-center-administrator-guide/activityforms|Activity Forms]] of the Bright Pattern ''Contact Center Administrator Guide''. == User Interface == The Form Builder application provides a graphical user interface (GUI) that allows you to place various user interface (UI) elements to desired locations on a page and edit their properties, thus building your form. A form can incorporate various types of UI elements, such as static text, data fields, and pictures. When creating or editing forms, Form Builder is shown in two different views: Dynamic Layout Editor and Static Layout Editor. The ''Form Builder Reference Guide'' describes both the Dynamic Layout Editor and Static Layout Editor views, as well as the forms and types of controls available for each. === Dynamic Layout Editor === Bright Pattern Contact Center version 5.x brings a new GUI view called Dynamic Layout Editor to the Form Builder application. The Dynamic Layout Editor view enables the creation of new forms with flexible, dynamic layouts. In this view, columns, rows, and fields are easily resized and positioned on the form. Dynamic Layout Editor brings additional form controls, field properties, preview modes, and page thumbnails for multi-page forms. Note that Form Builder's Dynamic Layout Editor view is used to create new forms only. [[File:Activity-Form-Builder-50.PNG|thumb|800px|center|Creating a new form]] === Static Layout Editor === Imported forms that were created in Bright Pattern Contact Center version 3.x can be edited in Form Builder; however, such forms will be shown in the Form Builder version 3.x GUI known as Static Layout Editor view. In this view, the sizes of form elements must be specified in pixels, and the controls and other form elements remain in a fixed position on the form canvas. Note that Form Builder's Static Layout Editor view is used to edit existing version 3.x forms only. [[File:Form-builder-guide-image2.jpg|thumb|800px|center|Editing an existing form]] The subsequent sections of this guide describe how to work with specific form controls within both Form Builder Views. The controls are listed in alphabetical order in the ''All Form Controls'' section of this guide. = Dynamic UI Overview= In the Dynamic Layout Editor view, the Form Builder user interface is divided into the following areas: * ''Control Palette'' (the list of system controls and all other types of controls), shown on the left-hand side of the screen * ''Form Canvas'' (where the form is built and edited), shown in the middle of the screen * ''Properties Editor'' (after selecting a control to edit), shown as a pop-up dialog To define a new UI element for your form, select the corresponding control from the control palette, drag it to the desired location on the canvas, and specify its properties in the properties editor. [[File:Dynamic-Layout-Editor-UI-50.PNG|800px|thumbnail|center|Form Builder UI]] == Form Settings == You can change the overall look of the form (i.e., label width, padding, margins, background color, etc.) by clicking the '''Form-Wide Settings''' [[File:Form-Wide-Settings-Icon-50.PNG|26px]] icon at the top of Form Builder. [[File:Form-Wide-Settings-50.PNG|450px|thumbnail|center|Form-Wide Settings]] Upon clicking on the '''Form-Wide Settings''' [[File:Form-Wide-Settings-Icon-50.PNG|26px]] icon, a properties dialog will open. There, you can edit the following settings: * Label width (% of column) * Column padding (px) * Control padding (px) * Margin around form (px) * Background color == Pages == Form Builder allows you to create and edit multi-page forms. You can quickly add pages, remove pages, and browse all available pages using the thumbnail previews on the left-hand side of the UI. The thumbnail column (and all the thumbnails within it) can be resized by holding and clicking on the vertical bar that divides the thumbnails and the Control Palette. === How to Add or Remove Pages === By default, each form begins with one page called "Main Page." To add a new page, hover your cursor over the Main Page thumbnail or any other available page thumbnail and click '''+'''. Similarly, you may remove a page from the form by clicking '''x'''. Note that the last page of a form cannot be removed. [[File:Form-Add-New-Page-51.PNG|650px|thumbnail|center|Add or remove a page]] === How to Edit Page Names === Once you have added a page to your form, you are free to edit the name of that page. # Select the page thumbnail. # In the Title bar of the UI, hover your cursor over the current page name (e.g., "New Page") and click the Pencil icon.

[[File:Form-Edit-Page-Name-51.PNG|650px|thumbnail|center|Click the Pencil icon to edit the page name]]

# In the ''Page Name'' dialog that appears, enter the desired page name and click '''OK'''.

[[File:Form-Page-Name-51.PNG|450px|thumbnail|center|Give your page a new name]]

# The new page name appears on the form page and its thumbnail preview.

[[File:Form-Page-Renamed-51.PNG|450px|thumbnail|center|Renamed form page]] == Control Palette == The ''Control Palette'' lists each available type of control (previously called "form components") and each one has its own configuration attributes that specify the function performed by the control. [[File:Form-Components-List-50.PNG|450px|thumbnail|center|Form controls]] == System Controls == ''System Controls'' are controls that can be present only once on each page of the form. When dragging a system control a second time, the current location is highlighted, and after dropping the new control, you will be asked, “Would you like to move the XXX control? [Move] [Cancel].” ''Section'' is a system control that is always shown in the first position on the Control Palette list. The ''Section'' system control allows you to define the number of sections that appear on the form. To add or remove sections, select the checkbox beside each available column space in the section control bar (see the gray bar with the '''[=]''' symbol). The checkboxes appear upon mouse-over. [[File:Form-Section-Bar-50.PNG|800px|thumbnail|center|Add or remove sections using the form section bar]] == Other Control Types == All other controls can be placed on a form any number of times. It is forbidden to create controls with the same name on the same page of the form (an error dialog appears when applying property dialog or moving away from a docked property sheet). Controls with the same name on different pages must have the same type, in order to show the same field on different pages. Controls that can be present in multiple instances include the following: * Contact-email * Contact-phone * Contact-address * Contact-messaging-app-account When added, these controls will show all instances of the field associated with an object.
= Working with Controls= Form controls are the building blocks of your form. You can easily drag them on and off the form canvas. This section describes how to add, edit, and remove form controls in Form Builder's Static Layout Editor. For more information about form controls and their properties, see the next section of this guide, ''Dynamic Layout Editor Controls'', which includes all the form controls available in the Dynamic Layout Editor view. Note that these controls are not available in the Static Layout Editor view. == How to Add Controls == Controls are dragged and dropped onto and off of the form canvas. After a control has been placed on the form canvas, you can drag it to a different location on the form. Once a control has been placed, mousing over it will display a pencil icon for editing the control's properties. == How to Edit Controls == Once a control has been placed on the form canvas, mousing over it will display a pencil icon for editing the control's properties. Click the pencil icon to edit the control's field properties. The properties will open in a pop-up dialog. If you do not wish to edit properties in the pop-up dialog, you can opt to dock the properties to the form canvas by clicking the ''Dock to main window'' button. == How to Remove Controls == Mousing over a control on the form canvas will display a trash icon to delete the control. Click the trash icon to remove the control from the form. == Style == Note that all controls that may have text in them have a common property called ''Style''. Styles control the appearance of the static text on your form, such as font type, font size, text color, and alignment. [[File:Form-Style-Edit-50.PNG|800px|thumbnail|center|Editing form field styles]] Bright Pattern Contact Center software provides a number of predefined styles that you can select from the drop-down menu. You can edit any of such predefined styles, or you can create your own styles from scratch: # Select the style that you wish to edit from the drop-down menu (to create a style from scratch, select '''None'''). # Click '''Add / Edit'''. # Specify style properties. == Data Fields == The values of many form components can be defined in data fields as [[#topic_scenario-builder-reference-guide/variables|scenario variables]] in the ''$(varname)'' format. [[File:Form-Data-Field-50.PNG|450px|thumbnail|center|Example of a variable in a data field]] = Previewing and Saving Forms = To see how your form will appear in the Agent Desktop application, click the '''Preview''' menu button. Your form will be shown in either ''Read-only view'' or ''Editable view'' (select the radio button for the desired view). A slider at the top of the preview allows you to zoom in and out of the form to increase or decrease the width of the form. The default zoom is 50% of screen width, the maximum zoom is 100% screen width, and the minimum screen width is 10%. In ''Editable view'', as shown, you can edit within the form preview and your changes will be saved. You can return to editing the form by clicking '''Close'''. [[File:Editable-Form-Preview2-50.PNG|650px|thumbnail|center|Editable form view]] To save changes made to a form, click '''Save'''. The subsequent sections of this guide describe specific form controls, their attributes, and usage. The controls are listed in the order in which they appear in the menu. = Static UI Overview= In the Static Layout Editor view, the Form Builder user interface is divided into the following areas: * ''Control Palette'' (the list of system controls and all other types of controls), shown on the left-hand side of the screen * ''Form Canvas'' (where the form is built and edited), shown in the middle of the screen * ''Properties Editor'' (after selecting a control to edit), shown on the right-hand side of the screen To define a new UI element for your form, select the corresponding control from the control palette, drag it to the desired location on the canvas, and specify its properties in the properties editor. [[File:Form-3x-UI-50.PNG|800px|thumbnail|center|Form Builder UI]] === Form Grid Settings === You can change the overall look of the form (i.e., label width, padding, margins, background color, etc.) by clicking the '''Grid...''' [[File:Form-Grid-Button-3x-50.png|26px]] button at the top of Form Builder. Upon clicking on the '''Grid...''' button, the ''Form Grid Settings'' dialog will open. [[File:Form-Grid-Settings-3x-50.PNG|350px|thumbnail|center|Form Grid Settings]] There, you can edit the following settings: * '''Columns''' - The number of columns on the form (e.g., "10") * '''Column width, px''' - The column width in pixels (e.g., "100") * '''Rows''' - The number of rows on the form (e.g., "5") * '''Row height, px''' - The row height in pixels (e.g., "25") * '''Resulting form size''' - The width and height of the finished form (e.g., "1000px × 125px") * '''Margin around form, px''' - The amount of space on the outer edges of the form in pixels (e.g., "10") * '''Background color''' - Background color of the form (e.g., "White Smoke") * '''Form label width, px''' - The width of each form label in pixels (e.g., "40") === Pages === You can have multiple pages on a form. The page selector allows you to select a form to view and edit. [[File:Form-Page-Selector-3x-50.PNG|350px|thumbnail|center|Page selector]] The Form Pages '''...''' button, located to the right of the page selector, allows you to work with multiple form pages. Upon clicking it, the ''Form Pages'' dialog opens, where you can take the following actions: * '''View''' all form pages

[[File:Form-View-Pages-3x-50.PNG|450px|thumbnail|center|View all form pages]]

* '''Add''' more form pages by clicking '''add'''

[[File:Form-Add-New-3x-50.PNG|450px|thumbnail|center|Add new form pages]]

* '''Edit''' the name of a form page

[[File:Form-Edit-Page-3x-50.PNG|450px|thumbnail|center|Edit the form name and click the green checkmark to save your changes]]

* '''Delete''' a form page by clicking [[File:Form-Delete-Page-3x-50.PNG|26px]]

* '''Clone''' a form page by clicking [[File:Form-Clone-Page-3x-50.png|26px]] === View Button === Three different views are available in Form Builder: * '''Configuration''' - Where you edit the properties of all your form elements[[File:Form-Configuration-3x-50.PNG|650px|thumbnail|center|Configuration view]] * '''Preview''' - Where you see the read-only version of the form [[File:Form-Preview-3x-50.PNG|650px|thumbnail|center|Preview]] * '''Editable''' - A dynamic view where you can both preview the form and type into each field of the form [[File:Form-Editable-3x-50.PNG|650px|thumbnail|center|Editable]] Clicking the '''View''' button allows you to switch between these views. Once you select a view from the selector, the button assumes the name of the view. [[File:Form-View-Button-3x-50.PNG|650px|thumbnail|center|The View button allows you to select from Configuration, Preview, and Editable views]] == Control Palette == The ''Control Palette'' lists each available type of control (previously called "form components") and each one has its own configuration attributes that specify the function performed by the control. [[File:Form-Components-3x-50.PNG|450px|thumbnail|center|Form controls]] == System Controls == ''System Controls'' are always present at the top of Form Builder. Either buttons or selectors, these controls include ''Grid...'' for changing the form settings, the page selector for choosing which form page to edit and/or view, the Form Pages '''...''' button for adding more pages to the form, and the view button for switching between Form Builder views (i.e., ''Configuration'', ''Preview'', and ''Editable''). == Other Control Types == All other controls can be placed on a form any number of times. It is forbidden to create controls with the same name on the same page of the form (an error dialog appears when applying property dialog or moving away from a docked property sheet). Controls with the same name on different pages must have the same type, in order to show the same field on different pages. Controls that can be present in multiple instances include the following: * Contact-email * Contact-phone * Contact-address * Contact-messaging-app-account When added, these controls will show all instances of the field associated with an object.
= Using Form Controls= Form controls are the building blocks of your form. You can easily drag them on and off the form canvas. This section describes how to add, edit, and remove form controls in Form Builder's Static Layout Editor. For more information about form controls and their properties, see the next section of this guide, ''Static Layout Editor Controls'', which includes all the form controls available in the Static Layout Editor view. Note that these controls are not available in the Dynamic Layout Editor View. == How to Add Controls == Controls are dragged and dropped onto and off of the form canvas. After a control has been placed on the form canvas, you can drag it to a different location on the form. Once a control has been placed, mousing over it will display a pencil icon for editing the control's properties. == How to Remove Controls == To delete a control, click and hold a control on the Form Canvas, and then drag it over to the Control Palette. == How to Edit Controls == Once a control has been placed on the form canvas, you can edit the control's field properties by clicking anywhere on the control itself. The selected control will be outlined in red. The properties will open on the right-hand side of the UI. == How to Edit Styles == Note that all controls that may have text in them have a common field property called ''Style''. Styles control the appearance of the static text on your form, such as font type, font size, text color, and alignment. Bright Pattern Contact Center software provides a number of predefined styles that you can select from the drop-down menu. [[File:Form-Style-Select-3x-50.PNG|450px|thumbnail|center|Selecting a style]] You can edit any of such predefined styles, or you can create your own styles from scratch: # Select the style that you wish to edit from the drop-down menu (to create a style from scratch, select '''None'''). # Click '''Add / Edit'''. # Specify style properties. [[File:Form-Style-3x-50.PNG|800px|thumbnail|center|Editing form field styles]] == How to Use Data Fields == The values of many form components can be defined in data fields as [[#topic_scenario-builder-reference-guide/variables|scenario variables]] in the ''$(varname)'' format. Beside certain field properties, you will see the '''$()''' link. [[File:Form-Var-Name-3x-50.PNG|450px|thumbnail|center|Form variable link]] When clicked, the Mapping dialog opens, allowing you to select a specific variable to map data. For example, selecting "Primary email" in the mapping dialog shown will place the primary email variable into the form control's field, in turn populating the field with a specific email address. [[File:Form-Variable-Map-3x-50.PNG|450px|thumbnail|center|Mapping a variable in a data field]] = Saving Forms= When you are done editing a form, be sure to click the '''Save''' button at the bottom of the screen. [[File:Form-3x-UI-Save-50.png|800px|thumbnail|center|Click "Save" to apply and save your changes]] == How to Cancel Your Changes == Clicking '''Cancel''' at the bottom of the screen will close the Form Builder application without saving any changes. Closing the browser tab or window has the same effect as using the '''Cancel''' button. [[File:Form-Cancel-3x-50.PNG|800px|thumbnail|center|Cancel changes]] = How to Configure Activity Forms = Activity forms are forms that agents interact with directly in Agent Desktop and can be used for a wide variety of purposes; however, the main purpose of activity forms is to collect information during interactions. Note that activity forms are used to collect and pass information to [[#topic_form-builder-reference-guide/howtoconfigureactivityhistoryforms|Activity History forms]]. This article will show you the steps necessary for configuring activity forms in the Contact Center Administrator application and Form Builder application. [[File:Activity-Form-Configuration-53.PNG|800px|thumb|center|Activity form configuration in the Contact Center Administrator application]] == Prerequisites == Activity form fields can be mapped to custom fields for [[Contact-center-administrator-guide/CustomFields#Contact|contact]], [[Contact-center-administrator-guide/CustomFields#Company|company]], and [[Contact-center-administrator-guide/CustomFields#Activity_History|Activity History]]. In order to do this, you must configure these custom fields first. For more information, see the ''Contact Center Administrator Guide'', section [[#topic_contact-center-administrator-guide/customfields|Custom Fields]]. == Procedure == === Step 1: Configure an Activity Form in the Contact Center Administrator Application === Beginning in the Contact Center Administrator application, section [[#topic_contact-center-administrator-guide/activityforms|Forms > Activity]]. Click the '''Add new form''' [[File:Create-New-Form-53.PNG|26px]] button, which launches the Form Builder application. === Step 2: Create Your Form in the Form Builder Application === In the Form Builder application, begin adding the types of fields you want your agents to see and interact with. Note that the fields can be interactive or static (i.e., you can configure a field be '''editable''' or not). [[File:Activity-Form-With-Custom-Activity-History-Fields-53.PNG|800px|thumb|center|Configuring an activity form]] When configuring your form, you may choose to map custom field values to your form fields. Mapping custom field values to form fields allows data entered in the form fields to be passed to other forms and reports. To map custom field values, when editing the a field's properties, select the '''data field''' [[File:Data-Field-Button-53.PNG|26px]] button. This will pop a window with the data fields you can map to a given form field. [[File:Map-Activity-History-Field-53.PNG|800px|thumb|center|Mapping a form field to a custom Activity History field]] When you are all finished, click the '''Save''' [[File:Activity-Form-Save-Button-53.PNG|40px]] button and you will be prompted to name your form. ==== Step 2a: Add Pages to Your Form ==== Activity forms can be as detailed or concise as you need them to be. If the former is true, you can add pages to your form using the '''new page''' [[File:Activity-Form-Add-Page-53.PNG|26px]] button, located in the [[Form-builder-reference-guide/DynamicUIOverview#Pages|pages palette]]. Adding pages will change the default page name if you have named it. That is, pages name will read "Page 2", "Page 3," and so forth, instead of "New Page". Additionally, you may clone pages using the '''clone page''' [[File:Activity-Form-Clone-Button-53.PNG|26px]] button. Clicking this button creates a new page titled "Clone of " and all controls are copied from the cloning page. [[File:Activity-Form-Copy-and-Add-53.PNG|800px|thumb|center|You may clone or add pages to your form]] === Step 3: Connect Your Form to a Service === When you are finished building your form, you will need to connect it to a configured service. To do this, return to the Contact Center Administrator application, section [[#topic_contact-center-administrator-guide/activitytab|Services & Campaigns > Activity tab]]. From the setting [[Contact-center-administrator-guide/ActivityTab#Enable_screenpop_activity_form|Enable screenpop activity form]], you will select the name of the activity form you created. [[File:Activity-Form-Configuration-5-53.PNG|800px|thumb|center|The Activity tab of the service related to the form must be configured]] From the Activity tab, you may configure additional settings, such as whether you want [[#topic_contact-center-administrator-guide/knowledgebase|Knowledge Base]] articles to be displayed when the form is popped, whether you want the activity form to be displayed before or after webpop, and so forth. When you are finished connecting the activity form to the service, you can return to section [[Contact-center-administrator-guide/ActivityForms#Used_in...|Forms > Activity > Used in ...]] and see the name of the service(s) associated with the form. [[File:Activity-Form-Configuration-2-53.PNG|800px|thumb|center|Verify your form is connected to the service by looking in the ''Used in ...'' tab]] == Your Form in Action == After you are finished connecting your activity form to your service, you will want to ensure it is working in Agent Desktop. In the following image, you can see how a popped activity form looks to agents. [[File:Activity-Form-In-Action-.PNG|800px|thumb|center|An activity form when popped in Agent Desktop]] = How to Configure Activity History Forms = Activity History forms contain specific information from the [[#topic_contact-center-administrator-guide/activityforms|activity forms]] agents fill out during interactions; this information is then saved to the case and contact history corresponding to the interaction. This article will show you how to configure an Activity History form with custom Activity History fields. Note that an activity form must be configured with information related to that found in the Activity History form in order for the information to show up in the case and contact history corresponding to the interaction. ==== What is the difference between an activity form and an Activity History form? ==== Where an activity form is something an agent interacts with directly in Agent Desktop, an Activity History form is an exact opposite; that is, it is a static form containing only data that was collected in a related activity form. Activity History forms are not editable. [[File:Activity-History-Form-Configuration-53.PNG|800px|thumb|center|Activity History form configuration]] == Prerequisites == If you wish to include custom Activity History fields in your form, you must configure them first. For more information, see the ''Contact Center Administrator Guide'', section [[Contact-center-administrator-guide/CustomFields#Activity_History|Custom Fields > Activity History]]. == Procedure == === Action 1: Create an Activity Form === In order for an Activity History form to work, we must configure an activity form first. Reminder: Activity History forms are populated with information entered in activity forms. Beginning in the Contact Center Administrator application, section [[#topic_contact-center-administrator-guide/activityforms|Forms > Activity]], configure a form then launch the Form Builder application. [[File:Activity-Form-With-Custom-Activity-History-Fields-53.PNG|800px|thumb|center|Configuring an activity form]] === Action 2: Map Activity History Values to Form Fields === In the Form Builder application, begin adding the types of fields you want your agents to fill out. When editing the field properties, you will need to map Activity History field values to your form fields. To do this, select the '''data field''' [[File:Data-Field-Button-53.PNG|26px]] button. This will pop a window with the data fields you can map to a given form field. From here, you will choose from the selection available under ''Activity History'', including any custom Activity History fields. [[File:Map-Activity-History-Field-53.PNG|800px|thumb|center|Mapping a form field to a custom Activity History field]] In our example, we added a [[#topic_form-builder-reference-guide/list|list field]] to our form and mapped a custom Activity History field "verified_product" to it. Additionally, we added a non-editable [[#topic_reporting-reference-guide/globalinteractionidentifier|Global Interaction ID]] field to the form. Note that your form fields will behave in the way you configured them to; however, the value of whatever is entered in the field is associated with Activity History. [[File:Activity-Form-Preview-53.PNG|800px|thumb|center|A preview of the activity form with the custom Activity History field]] === Action 3: Create an Activity History Form === Back in the Contact Center Administrator application, section [[#topic_contact-center-administrator-guide/activityhistoryforms|Forms > Activity History]], configure a form then launch the Form Builder application. As a reminder, Activity History forms are configurable per service type (i.e., chat, email, voice). [[File:Activity-History-Form-53.PNG|800px|thumb|center|The Activity History form in the Form Builder application]] === Action 4: Map the same Activity History Values to the New Form Fields === In the Form Builder application, begin adding the desired fields. Because Activity History forms are connected to activity forms, we will configure our new form fields to contain the same Activity History mapping and information. In this example, our Activity History form contains the same "verified_product" and Global Interaction ID field mapping. [[File:Activity-History-Field-Custom-Field-53.PNG|800px|thumb|center|The same Activity History fields from the activity form are added to the Activity History form]] When configuring Activity History forms, it is important to note that they are ultimately displayed in Agent Desktop as '''read only'''. So, while it is possible to add field types to the form that are normally editable (e.g., [[#topic_form-builder-reference-guide/list|list]], [[#topic_form-builder-reference-guide/phonenumber|phone number]], [[#topic_form-builder-reference-guide/text|text]], etc.), they will not function this way for Activity History forms. [[File:Activity-History-Form-Preview-53.PNG|800px|thumb|center|A preview of how the non-editable Activity History form looks]] == Your Forms In Action == Activity History forms contain data from activity forms, so you will want to review how both forms function in the Agent Desktop application. First, ensure the behavior of your activity form is correct, making sure the fields mapped with Activity History values are filled out. In our example, the Verified Product list field has the option "Yes" selected. [[File:Activity-Form-In-Action-.PNG|800px|thumb|center|The activity form when popped in Agent Desktop]] Next, going to section Search & Preview records, we find the appropriate contact, select the ''Activities'' tab, and under the most recent interaction, we see the Activity History form with the information from two matching fields on the activity form. [[File:Visible-Activity-History-Form-53.PNG|800px|thumb|center|How the Activity History form looks in Search & Preview records]] = Customizing Activity History Forms to Show Notes = If you would like notes to appear in the list view in the [[Agent-guide/Work/SearchandPreviewRecords/SearchandPreviewInterface#Activities_Tab|Activity tab]], found in section Search & Preview Records > Contacts, it is possible to configure a [[Form-builder-reference-guide/WorkingwithControls#Data_Fields|data field]] to show this information. In order to do this, take the following steps: * Open your Activity History form in the edit mode * Add a [[#topic_form-builder-reference-guide/text|Text]] field * Map its [[Form-builder-reference-guide/WorkingwithControls#Data_Fields|data field]] to Activity History > Notes; it should show ''$(ActivityHistory.notes)'' When this information is displayed, it is possible to copy and paste any text contained in the notes. [[File:Activity-History-Form-Show-Notes-53.png|650px|thumb|center|Adding "notes" to an Activity History form]] = How to Display Searchable Call List Columns in Activity Forms = For call centers that conduct [[#topic_contact-center-administrator-guide/servicesandcampaignsoverview|calling campaigns]], it is often desirable to display some of the data from [[#topic_contact-center-administrator-guide/lists|calling list records]] in the agents’ [[Contact-center-administrator-guide/ActivityTab#Enable_screenpop_activity_form|screenpop activity form]]. In this article, you will learn how to display searchable calling list columns in activity forms in Agent Desktop [[File:01-Calling-List-Results-Agent-Desktop-53.png|800px|thumb|center|Searchable call list records in Agent Desktop]] == Prerequisites == Note that you should have familiarity with configuring forms. For more information, see the ''Form Builder Guide'', section [[#topic_form-builder-reference-guide/formbuilderoverview|Form Builder Overview]]. Additionally, you should have familiarity with the Scenario Builder application, as this article describes screenpop functionality; in order for screenpop to work, your campaign's voice scenario must include the [[#topic_scenario-builder-reference-guide/webscreenpop|Web Screen Pop]] block. == Procedure == === Step 1: Create a Call List with Searchable Fields === To begin, you will need to create and upload a calling list in section [[Contact-center-administrator-guide/Lists#List_Import|Lists]]. In the list import wizard, Fields screen, list columns must be marked as [[Contact-center-administrator-guide/Lists#Fields_screen|searchable]]. '''Note''': Call list fields cannot be marked as searchable after they have been uploaded, so it is very important not to miss this step! [[File:02-Calling-List-Searchable-Fields-53.png|650px|thumb|center|Mark the appropriate fields as "Searchable"]] === Step 2: Connect the Call List to a Campaign === After creating your call list, you will need to associate it with a [[#topic_contact-center-administrator-guide/servicesandcampaignsoverview|campaign]]. This can be done in section Lists by clicking '''add''' in the ''Campaigns'' setting. [[File:Calling-List-Connect-to-a-Campaign-53.PNG|650px|thumb|center|A call list connected to a campaign]] === Step 3: Create Custom Activity History Fields === Next, you will need to create custom Activity History fields. This is done in section [[Contact-center-administrator-guide/CustomFields#Activity_History|Custom Fields > Activity History]]. '''Note''': When configuring your custom fields, make sure to mark them as [[Contact-center-administrator-guide/CustomFields#Searchable_4|searchable]], otherwise they will not show up in a search. [[File:03-Custom-Fields-Activity-History-53.png|650px|thumb|center|Create custom Activity History fields]] === Step 4: Create an Activity Form Containing the Custom Activity History Fields === Next, you will need to create an [[#topic_contact-center-administrator-guide/activityforms|activity form]] that includes the custom Activity History fields. To do this, add a control to a form that contains the [[Form-builder-reference-guide/Text#Data_field|data field]] configuration option (e.g., [[#topic_form-builder-reference-guide/text|text]], [[#topic_form-builder-reference-guide/phonenumber|phone number]], [[#topic_form-builder-reference-guide/checkbox|checkbox]], etc.). From the data field, you can select the custom Activity History field; taking this action maps the custom Activity History fields to the activity form fields the agents will work with. [[File:04-Custom-Fields-Activity-History-in-Activity-Form-53.png|650px|thumb|center|Add the custom Activity History fields to the form]] === Step 5: Define Search Grid Columns === Back in section [[#topic_contact-center-administrator-guide/activityforms|Forms > Activity]], you will need to configure [[Contact-center-administrator-guide/ActivityForms#Search_grid_columns|"Search grid columns"]]; this setting is where you define what activity form fields are searchable when the activity form pops. Additionally, you may choose how the search results are displayed (e.g., ascending, descending, etc.). [[File:Search-Grid-Columns-53.PNG|650px|thumb|center|Configuring "Search grid columns"]] === Step 6: Enable Screenpop for the Activity Form === In section [[#topic_contact-center-administrator-guide/activitytab|Services & Campaigns > Activity tab]], you will need to configure the setting [[Contact-center-administrator-guide/ActivityTab#Enable_screenpop_activity_form|"Enable screenpop activity form"]]. Click the '''add/edit''' button to select the activity form you created. This setting allows the form you created to pop to the agent during an interaction. As a reminder, the [[#topic_contact-center-administrator-guide/voice|voice scenario]] associated with this campaign must contain the [[#topic_scenario-builder-reference-guide/webscreenpop|Web Screen Pop]] block in order for the activity form to pop to the agent. [[File:06-Enable-Screenpop-Form-53.PNG|650px|thumb|center|Enable screenpop for the activity form]] === Step 7: Map the Custom Activity History Fields to the Call List Fields === The final step in the procedure is the most important: connect the call list fields to the custom Activity History fields. Also located in section [[#topic_contact-center-administrator-guide/activitytab|Services & Campaigns > Activity tab]], you will configure the setting [[Contact-center-administrator-guide/ActivityTab#Pre-fill_form_fields_from_the_following_lists|"Pre-fill activity history custom fields from the following lists"]]. Clicking the '''Edit''' button opens a menu where you can map the call list columns to the custom Activity History fields. [[File:Pre-Fill-Activity-History-Custom-Fields-From_List-53.PNG|650px|thumb|center|Map the form fields to the call list fields]] = Address1 Postal Addresses= The Address1 Postal Addresses component is a set of postal address fields, including fields for address, city, state, zip code, and additional addresses. The component is outlined in red on the example form shown. '''Note''': This control is supported in version 5.x for forms created in the Form Builder application version 3.x. For component properties, see Bright Pattern Contact Center Documentation [https://help3x.brightpattern.com/3.18:Form-builder-reference-guide/Address1PostalAddresses version 3.x]. [[File:Form-Address1-3x-50.PNG|800px|thumbnail|center|Address1 Postal Addresses component in Configuration mode]] = All Email Addresses= The ''All Email Addresses'' control places an email selector on a form, enabling a user to select from and include multiple types of email addresses (e.g., "primary" or "business"). In Preview mode, this control appears as shown. [[File:Form-All-Emails-50.PNG|350px|thumbnail|center|All Email Addresses on a form]] == Field Properties == Once you have placed the control onto your form canvas, you can edit the field properties by clicking the pencil icon on the component. The field properties are described as follows. [[File:Form-All-Email-Addresses-50.PNG|450px|thumbnail|center|All Email Addresses properties]] === Edit Mode Style === ''Edit Mode Style'' is the common property that allows you to select, edit, or add a [[form-builder-reference-guide/CreatingNewForms#Style|style]] for this form control. For example, you may select "Hyperlink" from the selector, and click '''Add / Edit''' to change the style (e.g., text, font, color, etc.) of the email address hyperlink. [[File:Form-All-Email-Edit-Style-50.PNG|650px|thumbnail|center|Add / Edit style]] === Label === ''Label'' is the name of this control that will be displayed on the form (e.g., "Your email addresses"). === Hint text for empty field === This text input field is where you enter any text that you wish to display in this control's empty fields. The hint text indicates to the user what kind of text belongs in this field (e.g., "business email address"). === Data field === The ''data field'' is read-only, displaying the variable ''$(Contact.emails)'', which gets and inserts the specified contact email addresses. === Options === * '''Editable''' - Select this checkbox to allow users to edit these email address types. * '''Required''' - Select this checkbox to require users to enter email addresses in these fields. Note that ''Required'' is enabled only if the field is editable. * '''Validate''' - Select this checkbox to allow the emails entered to be validated. Note that ''Validate value'' is enabled only if the field is editable. = All Phone Numbers= The ''All Phone Numbers'' control places a phone number selector on a form, enabling a user to select from and include multiple phone numbers (e.g., "home" or "mobile"). In Preview mode, this control appears as shown. [[File:Form-All-Phone-Preview-50.PNG|350px|thumbnail|center|All Phone Numbers on a form]] == Field Properties == Once you have placed the control onto your form canvas, you can edit the field properties by clicking the pencil icon on the component. The field properties are described as follows. [[File:Form-All-Phone-Numbers-50.PNG|450px|thumbnail|center|All Phone Numbers properties]] === Edit Mode Style === ''Edit Mode Style'' is the common property that allows you to select, edit, or add a [[form-builder-reference-guide/CreatingNewForms#Style|style]] for this form control. For example, you may select "Text" from the selector, and click '''Add / Edit''' to change the style (e.g., text, font, color, etc.) of the phone numbers displayed on the form. [[File:Form-All-Phone-Properties-50.PNG|650px|thumbnail|center|Add / Edit style]] === Label === ''Label'' is the name of this control that will be displayed on the form (e.g., "Your phone number"). === Hint text for empty field === This text input field is where you enter any text that you wish to display in this control's empty fields. The hint text indicates to the user what kind of text belongs in this field (e.g., "work number"). === Data field === The ''data field'' is read-only, displaying the variable ''$(Contact.phones)'', which gets and inserts the specified contact phone numbers. === Options === * '''Editable''' - Select this checkbox to allow users to edit these phone number types. * '''Required''' - Select this checkbox to require users to enter phone numbers in these fields. Note that ''Required'' is enabled only if the field is editable. * '''Validate''' - Select this checkbox to allow the phone numbers entered to be validated. Note that ''Validate value'' is enabled only if the field is editable. = All Postal Addresses= The ''All Postal Addresses'' control places an address selector on a form, enabling a user to select from and include postal addresses (e.g., "home" or "business"). In Preview mode, this control appears as shown. [[File:Form-All-Address-Preview-50.PNG|350px|thumbnail|center|All Postal Addresses on a form]] == Field Properties == Once you have placed the control onto your form canvas, you can edit the field properties by clicking the pencil icon on the component. The field properties are described as follows. [[File:Form-All-Addresses-Properties-50.PNG|450px|thumbnail|center|All Postal Addresses properties]] === Edit Mode Style === ''Edit Mode Style'' is the common property that allows you to select, edit, or add a [[form-builder-reference-guide/CreatingNewForms#Style|style]] for this form control. For example, you may select "Text" from the selector, and click '''Add / Edit''' to change the style (e.g., text, font, color, etc.) of the addresses displayed on the form. [[File:Form-All-Addresses-Style-50.PNG|650px|thumbnail|center|Add / Edit style]] === Label === ''Label'' is the name of this control that will be displayed on the form (e.g., "Your address"). === Hint text for empty field === This text input field is where you enter any text that you wish to display in this control's empty fields. The hint text indicates to the user what kind of text belongs in this field (e.g., "home"). === Data field === The ''data field'' is read-only, displaying the variable ''$(Contact.addresses)'', which gets and inserts the specified contact addresses. === Options === * '''Editable''' - Select this checkbox to allow users to edit these phone number types. * '''Required''' - Select this checkbox to require users to enter phone numbers in these fields. Note that ''Required'' is enabled only if the field is editable. * '''Validate''' - Select this checkbox to allow the phone numbers entered to be validated. Note that ''Validate value'' is enabled only if the field is editable. = Button= Dragging the Button form control onto the form canvas adds a new button field to your form. As with the other form controls, you may customize the style, appearance, and functionality of this control by editing its field properties. == Button Field Properties == Click the pencil icon to edit Button field properties and specify style, label, size, alignment, conditions, and actions. This section describes the field properties that you can edit for the Button control. [[File:Form-Button-Properties-50.PNG|450px|thumbnail|center|Button Field Properties]] === Dock to main window === Click this button to dock the field properties on the form canvas at all times, rather than show the properties in a pop-up dialog. [[File:Form-Dock-to-Main-50PNG.PNG|450px|thumbnail|center|Dock to Main Window button]] Docking is convenient when you wish to edit properties and preview the form at the same time. [[File:Docked-Button-50.PNG|800px|thumbnail|center|Button properties docked to main window of form canvas]] === Edit Mode Style === ''Edit Mode Style'' presents a list of common styles from which to choose: * None * Text * Title * Label * Hyperlink * Note Clicking '''Add / Edit''' brings up the Edit Style dialog, where you specify the appearance of the control. [[File:Form-Button-Add-Edit-50.PNG|450px|thumbnail|center|Add / Edit style]] === Label === ''Label'' is the text that will be shown on the button (e.g., "Buy Now" or "Send"). === Width, px === ''Width, px'' is the label width (optional). If no width is specified, the button defaults to the entire column width. === Alignment === ''Alignment'' provides three alignment choices for the button: * Left (default) * Right * Center === Condition === You can determine what kind of condition must be met in order for the button to perform a specific action (see the Action properties below). Click '''Add / Edit''' to add a condition or change one that's already been added. The ''Edit Conditions'' dialog pops up, providing the following fields to complete: * '''$()''' - Either enter a variable (if you know it), or click this button to select and map a variable to the condition. * '''is / is not''' - Select either '''is''' or '''is not''' as part of the condition string * '''Selector''' - Select from one of the following: '''empty''', '''one of:''', '''<''', '''>''', '''=''' * '''Text field''' - Enter the word(s) or values that should be a part of the condition. [[File:Form-Edit-Conditions-50.PNG|650px|thumbnail|center|Click "Add / Edit" to add or change conditions for the button]] After you have made your selections, the condition statement should look something like ''$(ActivityHistory.media_type) is chat'', which means that the activity history media type must be chat in order for the button to perform the action. Other available buttons include: * '''Delete''' - Click to delete the condition statement * '''Add''' - Click to add another condition statement with different variables and selections * '''OK''' - Click to save the condition * '''Cancel''' - Click to cancel adding or editing === Action === ''Action'' is a drop-down menu offering the following possible actions that this button can provide. [[File:Form-Button-Action-50.PNG|450px|thumbnail|center|Action selection]] ==== Do Nothing ==== Select ''Do Nothing'' if this button should not provide any action. When the user clicks this button on the form, nothing will happen. ==== Call number ==== ''Call number'' initiates a phone call. [[File:Form-Button-Action-Call-50.PNG|450px|thumbnail|center|Call number]] Upon selecting this action, the following additional properties are available: * '''Number to call''' – Enter the phone number to be dialed. * '''Required during a call, to consult''' - When this checkbox is selected, a transfer of the call must be attempted. If no transfer attempt is made, when the agent attempts to hang up, the form reverts to the initial form page with the unselected call button and outputs a warning with two additional button options: “The form requires consult transfer attempts made during the call '''[Cancel]''' or '''[Force Hang up]'''.” If the agent attempts a transfer and the person does not answer, the form can be configured to allow the agent to take a message that can be subsequently emailed or sent via SMS/text. To configure these options, see [[#StartSMS|Start SMS]] and [[#CreateEmail|Create Email]]. * '''Validation URL''' – Enter the validation URL. ==== Start SMS ==== ''Start SMS'' initiates an SMS/text message to be sent to the specified phone number. [[File:Form-Button-Action-SMS-50.PNG|450px|thumbnail|center|Start SMS]] Upon selecting this action, the following additional properties are available: * '''Phone Number''' - The phone number that will receive the SMS * '''Message''' - Enter the desired text message to be sent ==== Create Email ==== ''Create Email'' initiates a new email message to be sent to the specified email address. [[File:Form-Button-Action-Email-50.PNG|450px|thumbnail|center|Create email]] Upon selecting this action, the following additional properties are available: * '''Email Address''' - The recipient's email address * '''Subject''' - The subject line of the email * '''CC''' - The email addresses of the recipients to be copied on the email * '''BCC''' - The email addresses of the recipients to be blind-copied on the email * '''Body''' - The text of the email ==== Disposition ==== ''Disposition'' enters a fixed disposition for the current call or interaction. [[File:Form-Button-Action-Disposition-50.PNG|650px|thumbnail|center|Disposition]] Upon selecting this action, the following additional properties are available: * '''Disposition''' – Type the disposition name, if known * '''Select Disposition''' – When this button is clicked, a pop-up dialog shows the following properties: ** '''Disposition from service''' – A drop-down menu shows the services available for your contact center. Selecting one of the services brings up the dispositions that can be selected. See ''Select Disposition'' below. ** '''Select Disposition''' – A drop-down menu shows the dispositions available for the selected service. * '''Two Step Disposition''' - Selecting this checkbox enables dispositions to be set in two steps * '''Validation URL''' - Enter the validation URL. ==== Go To Page ==== ''Go To Page'' navigates to other pages in a multi-page form. [[File:Form-Button-Action-Go-50.PNG|450px|thumbnail|center|Go to Page]] Upon selecting this action, the following additional properties are available: * '''Destination page''' – A drop-down menu lists the possible destination pages on the form ==== Augmentation ==== ''Augmentation'' runs a contact search in augmentation databases that have been configured for your contact center. There are no additional properties for this action. ==== Complete ==== The ''Complete'' action completes the interaction. Upon selecting this action, the following additional properties are available: * '''Validation URL''' - Enter the validation URL. ==== Search Knowledge Base ==== ''Search Knowledge Base'' brings up the Knowledge Base search field. [[File:Form-Button-Action-Search-50.PNG|650px|thumbnail|center|Search Knowledge Base]] Upon selecting this action, the following additional properties are available: * '''Text to search for''' - Enter the words to look up in Knowledge Base. Note that you can add variables to the search terms including those from [[#topic_contact-center-administrator-guide/customfields|custom fields]], such as Activity History. For example, if a [[#topic_contact-center-administrator-guide/knowledgebase|Knowledge Base]] article is used in an [[#topic_contact-center-administrator-guide/activityforms|activity form]], the blank, Knowledge Base-associated fields can be configured to prefill with values from [[#topic_contact-center-administrator-guide/customfields|activity history custom form fields]]. If an activity history field variable is not present in an activity form, it is not prefilled. Additionally, if a value is not set for the Knowledge Base article, the field does not prefill the form. If an agent has put some value in a field already, it is not prefilled (it will only prefill when empty). = Call Number= The Call Number component is a button which, when clicked, will initiate a call to the specified number. '''Note''': This control is supported in version 5.x for forms created in the Form Builder application version 3.x. For component properties, see Bright Pattern Contact Center Documentation [https://help3x.brightpattern.com/3.18:Form-builder-reference-guide/CallNumber version 3.x]. [[File:Activity-Form-Call-Number.png|225px|Activity form Call Number component]] = Checkbox= This control places a checkbox on a form, enabling a user to check a specific item on a form. In Preview mode, this control appears as shown. [[File:Form-Checkbox-Preview-50.PNG|350px|thumbnail|center|Checkbox on a form]] == Field Properties == Once you have placed the control onto your form canvas, you can edit the field properties by clicking the pencil icon on the component. The field properties are described as follows. [[File:Form-Checkbox-Prop-50.PNG|450px|thumbnail|center|Checkbox properties]] === Edit Mode Style === ''Edit Mode Style'' is the common property that allows you to select, edit, or add a [[form-builder-reference-guide/CreatingNewForms#Style|style]] for this form control. For example, you may select "Hyperlink" from the selector, and click '''Add / Edit''' to change the style (e.g., text, font, color, etc.) of the email address hyperlink. [[File:Form-Checkbox-Style-50.PNG|650px|thumbnail|center|Add / Edit style]] === Label === ''Label'' is the name of this control that will be displayed on the form (e.g., "Subscribe" or "Receive updates"). === Data field === In the ''data field'', you can enter a variable or select from and insert a variable into this field. === Options === * '''Editable''' - Select this checkbox to allow editing. = Company Text= The Company Text component is the field for adding a company's name in a business address. '''Note''': This control is supported in version 5.x for forms created in the Form Builder application version 3.x. For component properties, see Bright Pattern Contact Center Documentation [https://help3x.brightpattern.com/3.18:Form-builder-reference-guide/CompanyText version 3.x]. [[File:Form-Company-Text-3x-50.PNG|800px|thumbnail|center|Company Text component in Configuration mode]] = Complete System= The Complete System component is a button that duplicates the function of the '''Complete''' button of the Agent Desktop application. For more information, see section [[#topic_agent-guide/howtowrapupafter-callwork|How to Wrap Up After-Call Work]] of the ''Agent Guide''. A form can have only one component of this type. '''Note''': This control is supported in version 5.x for forms created in the Form Builder application version 3.x. For component properties, see Bright Pattern Contact Center Documentation [https://help3x.brightpattern.com/3.18:Form-builder-reference-guide/CompleteSystem version 3.x]. [[File:CC-Complete-System-316.png|650px|thumbnail|center|Complete System button component in Preview mode]] = Contact Source= Contact Source is a special type of control that displays an icon if the contact was imported from an external CRM, such as Salesforce.com. In the example form shown, the Contact Source control displays the Salesforce icon and is outlined in red. '''Note''': This control is supported in version 5.x for forms created in the Form Builder application version 3.x. For component properties, see Bright Pattern Contact Center Documentation [https://help3x.brightpattern.com/3.18:Form-builder-reference-guide/ContactSource version 3.x]. [[File:Form-Contact-Source-3x-50.PNG|800px|thumbnail|center|Contact Source component in Configuration mode]] = Date Time= The ''Date/Time'' control places a date and time field on a form. In Preview mode, this control appears as shown. [[File:Form-Date-Time-Preview-50.PNG|350px|thumbnail|center|Date/Time on a form]] == Field Properties == Once you have placed the control onto your form canvas, you can edit the field properties by clicking the pencil icon on the component. The field properties are described as follows. [[File:Form-Date-Time-Properties-50.PNG|450px|thumbnail|center|Date/Time properties]] === Edit Mode Style === ''Edit Mode Style'' is the common property that allows you to select, edit, or add a [[form-builder-reference-guide/CreatingNewForms#Style|style]] for this form control. For example, you may select "Text" from the selector, and click '''Add / Edit''' to change the style (e.g., text, font, color, etc.) of the date and time field displayed on the form. [[File:Form-Date-Time-Style-50.PNG|650px|thumbnail|center|Add / Edit style]] === Label === ''Label'' is the name of this control that will be displayed on the form (e.g., "Today's date"). === Hint text for empty field === This text input field is where you enter any text that you wish to display in this control's empty fields. The hint text indicates to the user what kind of text belongs in this field (e.g., "dd/mm/yyyy"). === Data field === The ''data field'' is where you enter a specific variable or select a variable to get and insert data into the Date/Time field. === Options === ==== Editable ==== Select this checkbox to allow users to edit these phone number types. ==== Required ==== Select this checkbox to require users to enter phone numbers in these fields. Note that ''Required'' is enabled only if the field is editable. ==== Display As ==== From the drop-down list, select one of the following display types: * Date * Time * Date and Time * Custom ==== Display format ==== When you select a ''Display As'' type, the ''Display Format'' automatically changes to match your selection. For example, the Time display type is down with "hh:mm a" as its display format. The display formats correspond to the display types: * '''Date''' - MM/dd/yyyy * '''Time''' - hh:mm a * '''Date and Time''' - hh:mm a MM/dd/yyyy * '''Custom''' - This starts with “hh:mm a MM/dd/yyyy” as a default value and remembers what is changed by the user. ==== Initial value ==== You can indicate the initial value to be shown on the Date/Time control. This is optional. ==== Custom reporting field ==== The ''Custom reporting field'' is the [[#topic_contact-center-administrator-guide/customreportingfields|custom reporting field]] created for your contact center (if any). Such a field is unique to your contact center, as it is different from any default fields. If you do not have any custom reporting fields, select '''None''' from the drop-down list. ==== Export in campaign results ==== Select this checkbox to export the data collected in the Date/Time field in your call center's campaign results. ==== Position in campaign results ==== Indicate the desired position (e.g., "1") for the data collected in the Date/Time field to be placed in campaign results. = Disposition Button= The Disposition Button component is a button, which, when clicked, will finish the interaction processing and insert the specified [[#topic_contact-center-administrator-guide/dispositionstab|disposition]] into the call results. Note that if this button is pressed during a live call, the call will be released. '''Note''': This control is supported in version 5.x for forms created in the Form Builder application version 3.x. For component properties, see Bright Pattern Contact Center Documentation [https://help3x.brightpattern.com/3.18:Form-builder-reference-guide/DispositionButton version 3.x]. [[File:Form-Disposition-Button.png|225px|Form Builder Disposition button]] = Disposition System= The Disposition System component is a drop-down menu that duplicates the function of the Disposition Selector of the Agent Desktop application. For more information, see section [[#topic_agent-guide/howtoenterdispositionsandnotes|How to Enter Dispositions and Notes]] of the ''Agent Guide''. A form can have only one component of this type and it will have the same disposition set as the Disposition Selector of the Agent Desktop (i.e., the [[#topic_contact-center-administrator-guide/dispositionstab|disposition set]] configured for the service/campaign associated with the given interaction). '''Note''': This control is supported in version 5.x for forms created in the Form Builder application version 3.x. For component properties, see Bright Pattern Contact Center Documentation [https://help3x.brightpattern.com/3.18:Form-builder-reference-guide/DispositionSystem version 3.x]. [[File:Activity-Form-Disposition-System.png|225px|Activity form disposition system component]] = Email= The ''Email'' component adds a field for entering an email address on an activity form during interaction handling. '''Note''': This control is supported in version 5.x for forms created in the Form Builder application version 3.x. For component properties, see Bright Pattern Contact Center Documentation [https://help3x.brightpattern.com/3.18:Form-builder-reference-guide/Email version 3.x]. [[File:Email-Component316.png|650px|thumbnail|center|The Email component shown in Configuration mode]] = Email Address= The ''Email Address'' control places an email selector on a form, enabling a user to select from and include multiple types of email addresses (e.g., "primary" or "business"). In Preview mode, this control appears as shown. [[File:Form-Email-Preview-50.PNG|350px|thumbnail|center|Email Address field shown on a form]] == Field Properties == Once you have placed the control onto your form canvas, you can edit the field properties by clicking the pencil icon on the component. The field properties are described as follows. [[File:Form-Email-Properties-50.PNG|450px|thumbnail|center|Email Address properties]] === Edit Mode Style === ''Edit Mode Style'' is the common property that allows you to select, edit, or add a [[form-builder-reference-guide/CreatingNewForms#Style|style]] for this form control. For example, you may select "Hyperlink" from the selector, and click '''Add / Edit''' to change the style (e.g., text, font, color, etc.) of the email address hyperlink. [[File:Form-Email-Style-50.PNG|650px|thumbnail|center|Add / Edit style]] === Label === ''Label'' is the name of this control that will be displayed on the form (e.g., "Primary email address"). === Hint text for empty field === This text input field is where you enter any text that you wish to display in this control's empty fields. The hint text indicates to the user what kind of text belongs in this field (e.g., "xxxxxx@xxxx.xxx"). === Data field === The ''data field'' is read-only, displaying the variable ''$(Contact.emails)'', which gets and inserts the specified contact email addresses. === Options === ==== Editable ==== Select this checkbox to allow users to edit the field. ==== Required ==== Select this checkbox to require users to enter an email address in this field. Note that ''Required'' is enabled only if the field is editable. ==== Hide if read-only and empty ==== Select this checkbox to hide the Email Address field if it's empty or marked as read-only. ==== Validate ==== Select this checkbox to validate that this is a valid email address. ==== Initial value ==== You can indicate the initial value to be shown in the Email Address field. This is optional. ==== Custom reporting field ==== The ''Custom reporting field'' is the [[#topic_contact-center-administrator-guide/customreportingfields|custom reporting field]] created for your contact center (if any). Such a field is unique to your contact center, as it is different from any default fields. If you do not have any custom reporting fields, select '''None''' from the drop-down list. ==== Export in campaign results ==== Select this checkbox to export the data collected in the Email Address field in your call center's campaign results. ==== Position in campaign results ==== Indicate the desired position (e.g., "1") for the data collected in the Email Address field to be placed in campaign results. = Employees Text= Employees Text is the field for the number of employees at a company. The component is outlined in red on the example form shown. '''Note''': This control is supported in version 5.x for forms created in the Form Builder application version 3.x. For component properties, see Bright Pattern Contact Center Documentation [https://help3x.brightpattern.com/3.18:Form-builder-reference-guide/EmployeesText version 3.x]. [[File:Form-Employees-Text-3x-50.PNG|800px|thumbnail|center|Employees Text component in Configuration mode]] = Field= The Field component is a data field for entering information during interaction handling. '''Note''': This control is supported in version 5.x for forms created in the Form Builder application version 3.x. For component properties, see Bright Pattern Contact Center Documentation [https://help3x.brightpattern.com/3.18:Form-builder-reference-guide/Field version 3.x]. [[File:Activity-Form-Add-Field.png|225px|Activity form Add Field component]] = Fields Group= In Form Builder's Static Layout Editor view, multiple form fields may be selected and grouped in order to be moved together to a different location on the form. This functionality is similar to that of photo editing applications, in which you group multiple elements on a layer for easy placement onto a different part of the image canvas. '''Note''': This control is supported in version 5.x for forms created in the Form Builder application version 3.x. For component properties, see Bright Pattern Contact Center Documentation [https://help3x.brightpattern.com/3.18:Form-builder-reference-guide/FieldsGroup version 3.x]. = First Text= First Text is the field for adding a person's first name on a form. The component is outlined in red on the example form shown. '''Note''': This control is supported in version 5.x for forms created in the Form Builder application version 3.x. For component properties, see Bright Pattern Contact Center Documentation [https://help3x.brightpattern.com/3.18:Form-builder-reference-guide/FirstText version 3.x]. [[File:Form-First-Text-3x-50.PNG|800px|thumbnail|center|First Text component in Configuration mode]] = Goto Page= GoTo Page is essentially a button that directs a user to another page of a form. This component is useful only for multi-page forms. '''Note''': This control is supported in version 5.x for forms created in the Form Builder application version 3.x. For component properties, see Bright Pattern Contact Center Documentation [https://help3x.brightpattern.com/3.18:Form-builder-reference-guide/GotoPage version 3.x]. [[File:Form-GoTo-Page-3x-50.PNG|800px|thumbnail|center|Goto Page component in Configuration mode]] = Hyperlink= The Hyperlink component is used to add a URL to your form. When an agent clicks the hyperlink, the target web page opens in a separate browser tab/window. To add this component to your activity form, hold and drag the component from the component menu on the left, onto the blank form on the right. '''Note''': This control is supported in version 5.x for forms created in the Form Builder application version 3.x. === Settings === The following settings can be specified for the Hyperlink component. ==== Style ==== Select or define the [[#topic_form-builder-reference-guide/formbuilderoverview|text style]] for this element. Choose from the following options: * << None >> * Text * Title * Label * Hyperlink * Note Click '''add/edit''' to add more text styles or edit styles for this element. Changes that you make in this field are shown in the component's configuration. ==== Link text ==== Enter the text of the hyperlink to be displayed on the form. ==== Hyperlink URL ==== Hyperlink URL is the URL of the target web page that is supposed to open when the user clicks the hyperlink text. = Label= The Label component is used to add text to your form, such as headings, instructions, and help text. To add this component to your activity form, hold and drag the component from the component menu on the left, onto the blank form on the right. '''Note''': This control is supported in version 5.x for forms created in the Form Builder application version 3.x. == Settings == The following settings can be specified for the Label component. === Style === Select or define the [[#topic_form-builder-reference-guide/formbuilderoverview|text style]] for this element. Choose from the following options: * << None >> * Text * Title * Label * Hyperlink * Note === Value === Enter the text to be displayed. All or part of this text can be a scenario variable in the ''$(varname)'' format. = Last Text= Last Text is the field for adding a person's last name on a form. The component is outlined in red on the example form shown. '''Note''': This control is supported in version 5.x for forms created in the Form Builder application version 3.x. For component properties, see Bright Pattern Contact Center Documentation [https://help3x.brightpattern.com/3.18:Form-builder-reference-guide/LastText version 3.x]. [[File:Form-Last-Text-3x-50.PNG|800px|thumbnail|center|Last Text component in Configuration mode]] = List= The ''List'' control places a list on a form. In Preview mode, this control appears as shown. [[File:Form-List-Preview-50.PNG|350px|thumbnail|center|List on a form]] == Field Properties == Once you have placed the control onto your form canvas, you can edit the field properties by clicking the pencil icon on the component. The field properties are described as follows. [[File:Form-List-Properties-50.PNG|450px|thumbnail|center|List properties]] === Edit Mode Style === ''Edit Mode Style'' is the common property that allows you to select, edit, or add a [[form-builder-reference-guide/CreatingNewForms#Style|style]] for this form control. For example, you may select "Text" from the selector, and click '''Add / Edit''' to change the style (e.g., text, font, color, etc.) of the list fields displayed on the form. [[File:Form-List-Style-50.PNG|650px|thumbnail|center|Add / Edit style]] === Label === ''Label'' is the name of this control that will be displayed on the form (e.g., "Reasons for return"). === Hint text for empty field === This text input field is where you enter any text that you wish to display in this control's empty fields. The hint text indicates to the user what kind of text belongs in this field (e.g., "Why return this item?"). === Data field === The ''data field'' is where you enter a specific variable or select a variable to get and insert data into the List field. === Items === The items specified here are provided in the drop-down list on the form. Click '''Edit List Items''' to edit or add items to the list. The ''Edit List Items'' dialog pops up. [[File:Form-List-Edit-Items-50.PNG|450px|thumbnail|center|Edit list items]] For each list item, enter the following: * '''Label''' - The name of the list item (shown on the form) * '''Value''' - The actual list item not shown in the list on the form You can modify your list items by clicking the buttons '''Add''' and '''Delete'''. Be sure to click '''OK''' to save your changes. === Options === ==== Editable ==== Select this checkbox to allow users to edit the list. ==== Required ==== Select this checkbox to require users to make a selection from the list. Note that ''Required'' is enabled only if the field is editable. ==== Initial value ==== You can indicate the initial value to be shown on the list. This is optional. ==== Custom reporting field ==== The ''Custom reporting field'' is the [[#topic_contact-center-administrator-guide/customreportingfields|custom reporting field]] created for your contact center (if any). Such a field is unique to your contact center, as it is different from any default fields. If you do not have any custom reporting fields, select '''None''' from the drop-down list. ==== Export in campaign results ==== Select this checkbox to export the data collected in the list in your call center's campaign results. ==== Position in campaign results ==== Indicate the desired position (e.g., "1") for the data collected in the list to be placed in campaign results. = Manual Augmentation System= The Manual Augmentation System component is a button that enables any form with contact fields to be augmented with more contact data. Note that this component only works if data augmentation is configured in your contact center's [[#topic_contact-center-administrator-guide/integrationaccounts|Integration Accounts]] with data providers such as The Data Group and Next Caller. '''Note''': This control is supported in version 5.x for forms created in the Form Builder application version 3.x. For component properties, see Bright Pattern Contact Center Documentation [https://help3x.brightpattern.com/3.18:Form-builder-reference-guide/ManualAugmentationSystem version 3.x]. [[File:Form-Manual-Aug-3x-50.PNG|800px|thumbnail|center|Manual Augmentation System component in Configuration mode]] = MediaPlayer URL= The MediaPlayer URL component is used to play the specified message to the agent. '''Note''': This control is supported in version 5.x for forms created in the Form Builder application version 3.x. For component properties, see Bright Pattern Contact Center Documentation [https://help3x.brightpattern.com/3.18:Form-builder-reference-guide/MediaPlayerURL version 3.x]. [[File:MediaPlayer-URL-316.png|650px|thumbnail|center|MediaPlayer URL component in Preview mode]] = Messenger= The Messenger component is a special type of control that displays an array of icons for messengers such as Facebook Messenger, LINE, Telegram, and Viber. '''Note''': This control is supported in version 5.x for forms created in the Form Builder application version 3.x. For component properties, see Bright Pattern Contact Center Documentation [https://help3x.brightpattern.com/3.18:Form-builder-reference-guide/Messenger version 3.x]. [[File:Form-Messenger-3x-50.PNG|800px|thumbnail|center|Messenger component in Configuration mode]] = Messengers= The Messengers control is just like the [[#topic_form-builder-reference-guide/messenger|Messenger]] component (available in Static Layout Editor view), except instead of placing icons for social messengers such as Facebook Messenger, LINE, Telegram, and Viber, this control places only the messenger contact data on the form, sans the icons. If messenger integrations have been configured for your contact center, the control will link to a saved messenger contact via the data field array ''Contact.messengers''. Messenger integrations are configured in the Contact Center Administrator application, section [[#topic_contact-center-administrator-guide/integrationaccounts|Integration Accounts]]. == Field Properties == This component has just two properties: Data Field and Orientation. Only the Orientation property can be edited. [[File:Form-Messengers-50.PNG|800px|thumbnail|center|Messenger field properties]] === Data Field === The data field is a variable that gets and fills in messenger contact data on the form. For this control, the ''Data field'' is automatically set to '''$(Contact.messengers)'''. === Orientation === This property allows you to display the messenger contacts either horizontally or vertically on the form. [[File:Form-Messengers-Prop-50.PNG|450px|thumbnail|center|Messenger Orientation property]] = Notes= The ''Notes'' control places a text box on a form for entering text-only notes and comments. In Preview mode, this control appears as shown. [[File:Form-Notes-Preview-50.PNG|350px|thumbnail|center|Notes on a form]] == Field Properties == Once you have placed the control onto your form canvas, you can edit the field properties by clicking the pencil icon on the component. The field properties are described as follows. [[File:Form-Notes-Properties-50.PNG|450px|thumbnail|center|Notes properties]] === Edit Mode Style === ''Edit Mode Style'' is the common property that allows you to select, edit, or add a [[form-builder-reference-guide/CreatingNewForms#Style|style]] for this form control. For example, you may select "Text" from the selector, and click '''Add / Edit''' to change the style (e.g., text, font, color, etc.) of the text fields displayed on the form. [[File:Form-Notes-Style-50.PNG|650px|thumbnail|center|Add / Edit style]] === Label === ''Label'' is the name of this control that will be displayed on the form (e.g., "How can we do better?"). === Hint text for empty field === This text input field is where you enter any text that you wish to display in this control's empty fields. The hint text indicates to the user what kind of text belongs in this field (e.g., "Provide feedback"). === Initial number of lines === Enter the number of lines of space to include in the text box. === Initial value === You can indicate the initial value to be shown on the list. This is optional. === Custom reporting field === The ''Custom reporting field'' is the [[#topic_contact-center-administrator-guide/customreportingfields|custom reporting field]] created for your contact center (if any). Such a field is unique to your contact center, as it is different from any default fields. If you do not have any custom reporting fields, select '''None''' from the drop-down list. === Export in campaign results === Select this checkbox to export the data collected in the notes in your call center's campaign results. ==== Position in campaign results ==== Indicate the desired position (e.g., "1") for the data collected in the notes to be placed in campaign results. = Notes System= The Notes System component is a free-form text field that duplicates the function of the '''call notes''' field of the Agent Desktop application. '''Note''': This control is supported in version 5.x for forms created in the Form Builder application version 3.x. For component properties, see Bright Pattern Contact Center Documentation [https://help3x.brightpattern.com/3.18:Form-builder-reference-guide/NotesSystem version 3.x]. [[File:Activity-Form-Notes-System.png|225px|Activity form notes system]] = Number= The ''Number'' control places any kind of number on a form (e.g., invoice number, ticket number, tracking number, etc.). In Preview mode, this control appears as shown. [[File:Form-Number-Preview-50.PNG|350px|thumbnail|center|Number field shown on a form]] == Field Properties == Once you have placed the control onto your form canvas, you can edit the field properties by clicking the pencil icon on the component. The field properties are described as follows. [[File:Form-Number-Properties-50.PNG|450px|thumbnail|center|Number properties]] === Edit Mode Style === ''Edit Mode Style'' is the common property that allows you to select, edit, or add a [[form-builder-reference-guide/CreatingNewForms#Style|style]] for this form control. For example, you may select "Text" from the selector, and click '''Add / Edit''' to change the style (e.g., font, color, etc.) of any text shown on the form. [[File:Form-Number-Style-50.PNG|650px|thumbnail|center|Add / Edit style]] === Label === ''Label'' is the name of this control that will be displayed on the form (e.g., "Tracking #"). === Hint text for empty field === This text input field is where you enter any text that you wish to display in this control's empty fields. The hint text indicates to the user what kind of text belongs in this field (e.g., "UPS tracking #"). === Data field === The ''data field'' is where you specify or select a variable that gets and includes data on the form. === Options === ==== Editable ==== Select this checkbox to allow users to edit the field. ==== Required ==== Select this checkbox to require users to fill in the Number field. ==== Hide if read-only and empty ==== Select this checkbox to hide the Number field if it's empty or marked as read-only. ==== Display As ==== This option is reserved for future use. ==== Initial value ==== You can indicate the initial value to be shown in the Number field. This is optional. ==== Custom reporting field ==== The ''Custom reporting field'' is the [[#topic_contact-center-administrator-guide/customreportingfields|custom reporting field]] created for your contact center (if any). Such a field is unique to your contact center, as it is different from any default fields. If you do not have any custom reporting fields, select '''None''' from the drop-down list. ==== Export in campaign results ==== Select this checkbox to export the data collected in the Number field in your call center's campaign results. ==== Position in campaign results ==== Indicate the desired position (e.g., "1") for the data collected in the Number field to be placed in campaign results. = Phone-home Multi phone= This component adds an "add phone" option, which allows the user to enter multiple phone numbers to a form, if desired. '''Note''': This control is supported in version 5.x for forms created in the Form Builder application version 3.x. For component properties, see Bright Pattern Contact Center Documentation [https://help3x.brightpattern.com/3.18:Form-builder-reference-guide/Phone-homeMultiphone version 3.x]. [[File:Form-Multi-Phone-3x-50.PNG|800px|thumbnail|center|Phone-home Multi phone on a form]] = Phone Number= The ''Phone Number'' control places a phone number field on a form. Unlike the All Phone Numbers control, this control places a field for a single phone number rather than multiple phone numbers. In Preview mode, this control appears as shown. [[File:Form-Phone-Preview-50.PNG|350px|thumbnail|center|Phone Number field on a form]] == Field Properties == Once you have placed the control onto your form canvas, you can edit the field properties by clicking the pencil icon on the component. The field properties are described as follows. [[File:Form-Phone-Properties-50.PNG|450px|thumbnail|center|Phone Number properties]] === Edit Mode Style === ''Edit Mode Style'' is the common property that allows you to select, edit, or add a [[form-builder-reference-guide/CreatingNewForms#Style|style]] for this form control. For example, you may select "Text" from the selector, and click '''Add / Edit''' to change the style (e.g., text, font, color, etc.) of the phone number displayed on the form. [[File:Form-Phone-Style-50.PNG|650px|thumbnail|center|Add / Edit style]] === Label === ''Label'' is the name of this control that will be displayed on the form (e.g., "Best phone number to reach you"). === Hint text for empty field === This text input field is where you enter any text that you wish to display in this control's empty fields. The hint text indicates to the user what kind of text belongs in this field (e.g., "xxx-xxx-xxxx"). === Data field === The ''data field'' is where you specify or select a variable that gets and inserts specific data. === Options === ==== Editable ==== Select this checkbox to allow users to edit the field. ==== Required ==== Select this checkbox to require users to enter a phone number in this field. Note that ''Required'' is enabled only if the field is editable. ==== Hide if read-only and empty ==== Select this checkbox to hide the Phone Number field if it's empty or marked as read-only. ==== Validate ==== Select this checkbox to validate that this is a valid phone number. ==== Initial value ==== You can indicate the initial value to be shown in the Phone Number field. This is optional. ==== Custom reporting field ==== The ''Custom reporting field'' is the [[#topic_contact-center-administrator-guide/customreportingfields|custom reporting field]] created for your contact center (if any). Such a field is unique to your contact center, as it is different from any default fields. If you do not have any custom reporting fields, select '''None''' from the drop-down list. ==== Export in campaign results ==== Select this checkbox to export the data collected in the Phone Number field in your call center's campaign results. ==== Position in campaign results ==== Indicate the desired position (e.g., "1") for the data collected in the Phone Number field to be placed in campaign results. = Picture Static= The Picture Static component is used to embed small images on your form. '''Note''': This control is supported in version 5.x for forms created in the Form Builder application version 3.x. For component properties, see Bright Pattern Contact Center Documentation [https://help3x.brightpattern.com/3.18:Form-builder-reference-guide/Picture version 3.x]. [[File:Picture-Static-316.png|650px|Picture Static component in Preview mode]] = Primarymail Multi email addresses= This component adds an "add email" option, which allows the user to enter multiple email addresses to a form, if desired. '''Note''': This control is supported in version 5.x for forms created in the Form Builder application version 3.x. For component properties, see Bright Pattern Contact Center Documentation [https://help3x.brightpattern.com/3.18:Form-builder-reference-guide/PrimarymailMultiemailaddresses version 3.x]. [[File:Form-Multi-Email-3x-50.PNG|800px|thumbnail|center|Primarymail Multi email addresses on a form]] = Revenue Text= Revenue Text is the field for a company's annual amount of revenue. The component is outlined in red on the example form shown. '''Note''': This control is supported in version 5.x for forms created in the Form Builder application version 3.x. For component properties, see Bright Pattern Contact Center Documentation [https://help3x.brightpattern.com/3.18:Form-builder-reference-guide/RevenueText version 3.x]. [[File:Form-Revenue-3x-50.PNG|800px|thumbnail|center|Revenue Text component in Configuration mode]] = Search Panel= The ''Search Panel'' is a form component that shows a search string, search button, and a grid that contains search results. The Form Builder application's dynamic layouts allow the Search Panel to be treated as a control and to be placed above, below, or to the side of the form's search control. This control has no properties to edit. Once the Search Panel is placed on the form canvas, it can be either moved to a different location or deleted. [[File:Form-Search-Panel-50.PNG|650px|thumbnail|center|Search Panel on form canvas]] = Segment Key Value List= Segment Key Value List is a selector for choosing a priority level (i.e., gold, silver, or bronze) for a customer or contact. '''Note''': This control is supported in version 5.x for forms created in the Form Builder application version 3.x. For component properties, see Bright Pattern Contact Center Documentation [https://help3x.brightpattern.com/3.18:Form-builder-reference-guide/SegmentKeyValueList version 3.x]. [[File:Form-Segment-3x-50.PNG|800px|thumbnail|center|Segment Key Value List component in Configuration mode]] = Spacer= The Spacer control adds space in between other controls on a form. You can edit the Spacer's height and style in Field Properties. In Preview mode, this control appears as shown. The area outlined in red is the spacer placed in between the phone number and email address controls. [[File:Form-Spacer-Preview-50.PNG|650px|thumbnail|center|Spacer on a form]] == Field Properties == Once you have placed the control onto your form canvas, you can edit the field properties by clicking the pencil icon on the component. The field properties are described as follows. [[File:Form-Spacer-Properties-50.PNG|450px|thumbnail|center|Spacer properties]] === Edit Mode Style === ''Edit Mode Style'' is the common property that allows you to select, edit, or add a [[form-builder-reference-guide/CreatingNewForms#Style|style]] for this form control. For example, you may select "Hyperlink" from the selector, and click '''Add / Edit''' to change the style (e.g., text, font, color, etc.) of the email address hyperlink. [[File:Form-Spacer-Style-50.PNG|650px|thumbnail|center|Add / Edit style]] === Height === You can change the height of the spacer by selecting a value from the ''Height'' property drop-down list: ½, 1 ½, 2, 3, 4, 5, 6, 7, 8, 9, 10. Each numeric value represents the number of rows to take on the form. = Summary Text= Summary Text is a text field for entering disposition notes that are saved with an interaction. '''Note''': This control is supported in version 5.x for forms created in the Form Builder application version 3.x. For component properties, see Bright Pattern Contact Center Documentation [https://help3x.brightpattern.com/3.18:Form-builder-reference-guide/SummaryText version 3.x]. [[File:Form-Summary-3x-50.PNG|800px|thumbnail|center|Summary Text component in Configuration mode]] = Text= The ''Text'' control places some amount of text on a form. For example, this text could be a form title, URL, policy information, shipping guidelines, text from Knowledge Base articles, or anything that your contact center requires or desires to be on a form. In Preview mode, the Text control appears as shown. In this example, the Text control is styled as a title ("Easy Returns and Exchanges"), in a larger font size and with a contrasting background color. [[File:Form-Text-Preview-50.PNG|800px|thumbnail|center|Text on a form]] == Field Properties == Once you have placed the control onto your form canvas, you can edit the field properties by clicking the pencil icon on the component. The field properties are described as follows. [[File:Forms-Text-Properties-54.PNG|450px|thumbnail|center|Text properties]] === Edit Mode Style === ''Edit Mode Style'' is the common property that allows you to select, edit, or add a [[Form-builder-reference-guide/WorkingwithControls#Style|style]] for this form control. For example, you may select "Text" from the selector, and click '''Add / Edit''' to change the style (e.g., text, font, color, etc.) of the field displayed on the form. In the example shown, the Text control is styled as a title, in a larger font size and with a contrasting background color. [[File:Forms-Text-Properties-Style-54.PNG|650px|thumbnail|center|Add / Edit style]] === Label === ''Label'' is the name of this control that will be displayed on the form (e.g., "Easy Returns & Exchanges"). === Hint text for empty field === This text input field is where you enter any text that you wish to display in this control's empty fields. The hint text indicates to the user what kind of text belongs in this field (e.g., "form title"). === Data field === The ''data field'' is where you enter a specific variable or select a variable to get and insert data into the form. For example, if a [[#topic_contact-center-administrator-guide/knowledgebase|Knowledge Base]] article is used in an [[#topic_contact-center-administrator-guide/activityforms|activity form]], the blank, Knowledge Base-associated fields can be configured to prefill with values from [[#topic_contact-center-administrator-guide/customfields|activity history custom form fields]]. If an activity history field variable is not present in an activity form, it is not prefilled. Additionally, if a value is not set for the Knowledge Base article, the field does not prefill the form. If an agent has put some value in a field already, it is not prefilled (it will only prefill when empty). === Options === ==== Editable ==== Select this checkbox to allow users to edit the Text field. ==== Required ==== Select this checkbox to require users to enter text. Note that ''Required'' is enabled only if the field is editable. ==== Hide if read-only and empty ==== Select this checkbox to hide the Text field if it's empty or marked as read-only. ==== Multiline ==== Select this checkbox to indicate that the Text control will contain multiple lines of text. ==== Destination for KB article content ==== Select this checkbox to indicate that Knowledge Base content will be placed inside this Text field. ==== Initial number of lines ==== Specify how many lines of text should be available. The default value is 1; a valid range is 1 to 99. ==== Initial value ==== You can indicate the initial value to be shown on the Text control. This is optional. ==== Custom reporting field ==== The ''Custom reporting field'' is the [[#topic_contact-center-administrator-guide/customreportingfields|custom reporting field]] created for your contact center (if any). Such a field is unique to your contact center, as it is different from any default fields. If you do not have any custom reporting fields, select '''None''' from the drop-down list. = Title Text= Title Text is the field for adding a person's first name on a form. The component is outlined in red on the example form shown. '''Note''': This control is supported in version 5.x for forms created in the Form Builder application version 3.x. For component properties, see Bright Pattern Contact Center Documentation [https://help3x.brightpattern.com/3.18:Form-builder-reference-guide/TitleText version 3.x]. [[File:Form-Title-Text-3x-50.PNG|800px|thumbnail|center|Title Text component in Configuration mode]] = US State= The ''US State'' control places a selector on a form, enabling users to select a certain state (e.g., California or "CA") in the United States. In Preview mode, this control appears as shown. [[File:Form-US-State-Preview-50.PNG|450px|thumbnail|center|US State on a form]] == Field Properties == Once you have placed the control onto your form canvas, you can edit the field properties by clicking the pencil icon on the component. The field properties are described as follows. [[File:Form-US-State-Properties-50.PNG|450px|thumbnail|center|US State properties]] === Edit Mode Style === ''Edit Mode Style'' is the common property that allows you to select, edit, or add a [[form-builder-reference-guide/CreatingNewForms#Style|style]] for this form control. For example, you may select "Text" from the selector, and click '''Add / Edit''' to change the style (e.g., text, font, color, etc.) of the list fields displayed on the form. [[File:Form-US-State-Style-50.PNG|650px|thumbnail|center|Add / Edit style]] === Label === ''Label'' is the name of this control that will be displayed on the form (e.g., "Reasons for return"). === Hint text for empty field === This text input field is where you enter any text that you wish to display in this control's empty fields. The hint text indicates to the user what kind of text belongs in this field (e.g., "The state where you live"). === Data field === The ''data field'' is where you enter a specific variable or select a variable to get and insert data into the US State field (e.g., ''$(Contact.addresses[PRIMARY].state)'') === Options === ==== Editable ==== Select this checkbox to allow users to edit the field. ==== Required ==== Select this checkbox to require users to make a selection. Note that ''Required'' is enabled only if the field is editable. ==== Hide if read-only and empty ==== Select this checkbox to hide the US State control. = Voice Signature= The Voice Signature control allows the agent to flag a current call as having voice signature. This control is displayed on a form as checkbox during an active interaction. [[File:Form-Voice-Signature-Preview-50.PNG|650px|thumbnail|center|Voice Signature checkbox on a form]] == Field Properties == Once you have placed the control onto your form canvas, you can edit the field properties by clicking the pencil icon on the component. The field properties are described as follows. [[File:Form-Voice-Signature-Properties-50.PNG|450px|thumbnail|center|Voice Signature properties]] === Edit Mode Style === ''Edit Mode Style'' is the common property that allows you to select, edit, or add a [[form-builder-reference-guide/CreatingNewForms#Style|style]] for this form control. For example, you may select "Text" from the selector, and click '''Add / Edit''' to change the style (e.g., font, color, etc.) of the Voice Signature checkbox text. [[File:Form-Voice-Signature-Style-50.PNG|650px|thumbnail|center|Add / Edit style]] === Label === You can specify the label of the Voice Signature control (e.g., "Has voice signature"), which is shown on the form. = Voice Signature System= The Voice Signature System component is a checkbox that the agent will select if a voice signature has been collected during the call. It duplicates the function of the '''Voice Signature''' checkbox in the Contact Info Panel of the Agent Desktop application. '''Note''': This control is supported in version 5.x for forms created in the Form Builder application version 3.x. For component properties, see Bright Pattern Contact Center Documentation [https://help3x.brightpattern.com/3.18:Form-builder-reference-guide/VoiceSignatureSystem version 3.x]. [[File:Activity-Form-Voice-Signature-System.png|225px|Activity form voice signature system component]]