= 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]]
[[#topic_form-builder-reference-guide/audience|Next >]]
= 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]]
[[#topic_form-builder-reference-guide/audience|< Previous]] | [[#topic_form-builder-reference-guide/formbuilderoverview|Next >]]
= 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]] = 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. [[File:Form-Address1-3x-50.PNG|800px|thumbnail|center|Address1 Postal Addresses component in Configuration mode]] To add this component to your form, hold and drag the component from the component menu on the left, onto the blank form on the right. == Field Properties == This component's field properties are described as follows. [[File:Form-Address1-Properties-3x-50.PNG|450px|thumbnail|center|Address1 Postal Addresses field properties]] === Style === The ''Style'' property allows you to change the way that a control element appears on a form. You can select a style from the following options: * << None >> * Text * Title * Label * Hyperlink * Note You can also click '''add/edit''' to add another style or edit the selected style, choosing from different fonts, sizes, colors, and other style elements. [[File:Form-Edit-Styles-Save-3x-50.PNG|450px|thumbnail|center|Select font, size, color, and other style elements]] Clicking '''Save as''' allows you to name and save the style you just added/edited, and that style becomes available in the drop-down selector for the ''Style'' and ''Edit Style'' properties. [[File:Form-Save-As-3x-50.PNG|450px|thumbnail|center|Save the style with a new name]] === Edit Style === The ''Edit Style'' property allows you to select the style defined in the ''Style'' property. The style you select here is what is shown on the form. === Name === The ''Name'' property allows you to change the name of the control as it appears on the Control Palette. For example, you can change the name "Address1 Postal Addresses" to simply "Address" or anything else. === Form label === The ''Form label'' is the text label for this control, and it is shown on the form itself. For example, specifying form label "Home address" will display "Home address" on the form beside the Address1 Postal Addresses fields. [[File:Form-Home-Address-3x-50.PNG|450px|thumbnail|center|Form label on editable preview]] === Display Type === For this control, the ''display type'' is automatically set to '''Postal addresses'''. Note that there are many other display types from which to choose. [[File:Form-Display-Type-3x-50.PNG|450px|thumbnail|center|Display type selection]] === Data field array === For this control, the ''Data field array'' is automatically set to '''Contact.addresses''', which is a variable that gets and fills in contact address data for your contact center. === Options === * '''Editable''' - Select this option to allow the user to edit the field on the form. * '''Required''' - Select this option to require the user to fill in the field on the form.
[[#topic_form-builder-reference-guide/savingforms|< Previous]] | [[#topic_form-builder-reference-guide/allemailaddresses|Next >]]
= 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.
[[#topic_form-builder-reference-guide/address1postaladdresses|< Previous]] | [[#topic_form-builder-reference-guide/allphonenumbers|Next >]]
= 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.
[[#topic_form-builder-reference-guide/allemailaddresses|< Previous]] | [[#topic_form-builder-reference-guide/allpostaladdresses|Next >]]
= 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.
[[#topic_form-builder-reference-guide/allphonenumbers|< Previous]] | [[#topic_form-builder-reference-guide/button|Next >]]
= 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).
[[#topic_form-builder-reference-guide/allpostaladdresses|< Previous]] | [[#topic_form-builder-reference-guide/callnumber|Next >]]
= Call Number= The Call Number component is a button which, when clicked, will initiate a call to the specified number. 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. [[File:Activity-Form-Call-Number.png|225px|Activity form Call Number component]] == Settings == [[File:Call-Number-Properties-50.png|450px|thumbnail|center|Call Number component settings]] === 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 Selecting the '''show as link''' checkbox will make the call number be displayed as a clickable link for direct calling. === Label text === Enter text to be displayed on the button. Clicking '''$()''' will map the label text field with the selected variable in the ''$(varname)'' format. In this example, the label text field is mapped to the mobile phone variable, which creates label text ''$(Contact.phones[MOBILE].phone)''. === Number to call === Enter the number to be called. This can be a static number or a scenario variable in the ''$(varname)'' format. Clicking '''$()''' will map the label text field with the selected variable in the ''$(varname)'' format. === Validation URL === When the parameter is defined for the Disposition button, the URL is called when the Disposition button is clicked. If anything but "200 OK" is received, an error message is displayed: ''The call selected is not allowed''. = 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.
[[#topic_form-builder-reference-guide/callnumber|< Previous]] | [[#topic_form-builder-reference-guide/companytext|Next >]]
= Company Text= The Company Text component is the field for adding a company's name in a business address. The component is outlined in red on the example form shown. [[File:Form-Company-Text-3x-50.PNG|800px|thumbnail|center|Company Text component in Configuration mode]] To add this component to your form, hold and drag the component from the component menu on the left, onto the blank form on the right. == Field Properties == This component's field properties are described as follows. [[File:Form-Company-Properties-3x-50.PNG|450px|thumbnail|center|Company Text field properties]] === Style === The ''Style'' property allows you to change the way that a control element appears on a form. You can select a style from the following options: * << None >> * Text * Title * Label * Hyperlink * Note You can also click '''add/edit''' to add another style or edit the selected style, choosing from different fonts, sizes, colors, and other style elements. [[File:Form-Edit-Styles-Save-3x-50.PNG|450px|thumbnail|center|Select font, size, color, and other style elements]] Clicking '''Save as''' allows you to name and save the style you just added/edited, and that style becomes available in the drop-down selector for the ''Style'' and ''Edit Style'' properties. [[File:Form-Save-As-3x-50.PNG|450px|thumbnail|center|Save the style with a new name]] === Edit Style === The ''Edit Style'' property allows you to select the style defined in the ''Style'' property. The style you select here is what is shown on the form. === Name === The ''Name'' property allows you to change the name of the control as it appears on the Control Palette. For example, you can change the name "Company Text" to simply "Company" or anything else. === Form label === The ''Form label'' is the text label for this control, and it is shown on the form itself. For example, specifying form label "Company name" will display "Company name" on the form beside the Company Text fields. [[File:Form-Company-Label-3x-50.PNG|450px|thumbnail|center|Form label on editable preview]] === Display Type === For this control, the ''display type'' is automatically set to '''Text'''. Note that there are many other display types from which to choose. [[File:Form-Company-Display-3x-50.PNG|450px|thumbnail|center|Display type selection]] === Data field === The data field is a variable that gets and fills in company name data on the form. For this control, the ''Data field'' is automatically set to '''None''', but you can click the link to select a specific data field to map to the Company Text field. [[File:Form-Company-Data-3x-50.PNG|450px|thumbnail|center|Data field mapping]] === multiline === Select the ''multiline'' checkbox to indicate multiple lines of text for this field. === Initial number of lines === If the ''multiline'' box is checked, you can specify the number of lines of text to include in this field. === Options === * '''Hidden''' - Select this option to hide the Company Text field on the form. The label will be there, but the field to enter text will not. * '''Editable''' - Select this option to allow the user to edit the field on the form. * '''Required''' - Select this option to require the user to fill in the field on the form. === Hint text form empty fields === You provide a hint to the people completing this form by entering some text into ''Hint text form empty fields'' (e.g., "your business name" or "Your company's name"). === Hide if read-only and empty === Like the ''Hidden'' option, selecting the ''Hide if read-only and empty'' option will hide the Company Text field from view. === Initial value, static === The ''initial value'' helps people to know what to type in that field. It's default text that appears in the Company Text field on editable preview. For example, entering "your business" in this property will place "your business" into the form field. [[File:Form-Company-Value-3x-50.PNG|450px|thumbnail|center|Initial value example]] === save in custom reporting fields === Select this checkbox to save data from this form field in custom reporting fields for your contact center. === 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.
[[#topic_form-builder-reference-guide/checkbox|< Previous]] | [[#topic_form-builder-reference-guide/companywebtext|Next >]]
= 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. 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. [[File:CC-Complete-System-316.png|650px|thumbnail|center|Complete System button component in Preview mode]] == Settings == Style settings can be specified for the Complete System 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 [[File:Complete-System-Settings-316.png|400px|center|Credit card chat form complete system settings]] = 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. To add this component to your 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. [[File:Form-Contact-Source-3x-50.PNG|800px|thumbnail|center|Contact Source component in Configuration mode]] == Field Properties == This component has only one property that can be changed: ''Style''. [[File:Form-Contact-Source-Properties-3x-50.PNG|450px|thumbnail|center|Contact Source field properties]] === Style === The ''Style'' property allows you to change the way that a control element appears on a form. For this component, you may not wish to use any style at all because the control is displayed as a small image. The default style for this control is '''None'''. The other style options include: * << None >> * Text * Title * Label * Hyperlink * Note You can also click '''add/edit''' to add another style or edit the selected style, choosing from different fonts, sizes, colors, and other style elements. [[File:Form-Edit-Styles-Save-3x-50.PNG|350px|thumbnail|center|Select font, size, color, and other style elements]] Clicking '''Save as''' allows you to name and save the style you just added/edited, and that style becomes available in the drop-down selector for the ''Style'' and ''Edit Style'' properties. [[File:Form-Save-As-3x-50.PNG|350px|thumbnail|center|Save the style with a new name]] = 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.
[[#topic_form-builder-reference-guide/contactsource|< Previous]] | [[#topic_form-builder-reference-guide/dispositionbutton|Next >]]
= 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. 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. [[File:Form-Disposition-Button.png|225px|Form Builder Disposition button]] == Settings == Settings for the Disposition button component can be specified as follows. === Style === Style is way that the text will appear for this element. You can select or define the [[#topic_form-builder-reference-guide/formbuilderoverview|text style]] for this element by choosing from the following options: * << None >> * Text * Title * Label * Hyperlink * Note === Label text === Label text is what is shown on the button itself, in the Agent Desktop application. Enter text to be displayed on the button. === Disposition === * Specify the disposition that will be stored in the call results when this button is clicked. * Click '''select disposition''', choose the service/campaign, and select the desired disposition. === Validation URL === When the parameter is defined for the Disposition button, the URL is called when the Disposition button is clicked. If anything but "200 OK" is received, an error message is displayed: ''The disposition selected is not allowed''. [[File:Form-Builder-Disposition-Button-Settings.png|350px|center|Disposition button settings]] = 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). 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. [[File:Activity-Form-Disposition-System.png|225px|Activity form disposition system component]] === Settings === Settings for the Disposition System component can be specified as follows. ==== 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 [[File:Disposition-System-Settings.png|450px|center|Disposition system component settings]] = 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. [[File:Email-Component316.png|650px|thumbnail|center|The Email component shown in Configuration mode]] == Settings == The following settings are available for the Email 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 === Label Text === ''Label Text'' is the text that will be displayed on the button. === Email === The ''Email'' field is where the email address is entered on the form. [[File:Email-Component-Settings-316.png|400px|center|Email form settings]] = 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.
[[#topic_form-builder-reference-guide/email|< Previous]] | [[#topic_form-builder-reference-guide/employeestext|Next >]]
= 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. [[File:Form-Employees-Text-3x-50.PNG|800px|thumbnail|center|Employees Text component in Configuration mode]] To add this component to your form, hold and drag the component from the component menu on the left, onto the blank form on the right. == Field Properties == This component's field properties are described as follows. [[File:Form-Employees-Text-Prop-3x-50.PNG|450px|thumbnail|center|Employees Text field properties]] === Style === The ''Style'' property allows you to change the way that a control element appears on a form. You can select a style from the following options: * << None >> * Text * Title * Label * Hyperlink * Note You can also click '''add/edit''' to add another style or edit the selected style, choosing from different fonts, sizes, colors, and other style elements. [[File:Form-Edit-Styles-Save-3x-50.PNG|450px|thumbnail|center|Select font, size, color, and other style elements]] Clicking '''Save as''' allows you to name and save the style you just added/edited, and that style becomes available in the drop-down selector for the ''Style'' and ''Edit Style'' properties. [[File:Form-Save-As-3x-50.PNG|450px|thumbnail|center|Save the style with a new name]] === Edit Style === The ''Edit Style'' property allows you to select the style defined in the ''Style'' property. The style you select here is what is shown on the form. === Name === The ''Name'' property allows you to change the name of the control as it appears on the Control Palette. For example, you can change the name "Employees Text" to simply "Number of employees" or anything else. === Form label === The ''Form label'' is the text label for this control, and it is shown on the form itself. For example, specifying form label "# of Employees:" will display "# of Employees:" on the form beside the Employees Text field. [[File:Form-Employees-Label-3x-50.PNG|450px|thumbnail|center|Form label on editable preview]] === Display Type === For this control, the ''display type'' is automatically set to '''Text'''. Note that there are many other display types from which to choose. [[File:Form-Company-Display-3x-50.PNG|450px|thumbnail|center|Display type selection]] === Data field === The data field is a variable that gets and fills in the number of company employeeson the form. For this control, the ''Data field'' is automatically set to '''Company.employees''', but you can click the link to select a specific data field to map to this field instead. [[File:Form-Company-Data-3x-50.PNG|450px|thumbnail|center|Data field mapping example]] === multiline === Select the ''multiline'' checkbox to indicate multiple lines of text for this field. === Initial number of lines === If the ''multiline'' box is checked, you can specify the number of lines of text to include in this field. === Options === * '''Hidden''' - Select this option to hide the Employees Text field on the form. The label will be there, but the field to enter text will not. * '''Editable''' - Select this option to allow the user to edit the field on the form. * '''Required''' - Select this option to require the user to fill in the field on the form. === Hint text form empty fields === You provide a hint to the people completing this form by entering some text into ''Hint text form empty fields'' (e.g., "# of employees" or "how many employees"). === Hide if read-only and empty === Like the ''Hidden'' option, selecting the ''Hide if read-only and empty'' option will hide the Employees Text field from view. === Initial value, static === The ''initial value'' helps people to know what to type in that field. It's default text that appears in the Employees Text field on editable preview. For example, entering "number of workers" in this property will place "number of workers" into the form field. === save in custom reporting fields === Select this checkbox to save data from this form field in custom reporting fields for your contact center. === 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.
[[#topic_form-builder-reference-guide/emailaddress|< Previous]] | [[#topic_form-builder-reference-guide/field|Next >]]
= Field= The Field component is a data field for entering information during interaction handling. The entered information will be available to other agents in case of interaction transfers and can also be stored in the [[#topic_contact-center-administrator-guide/resultstab|campaign results]]. [[File:Activity-Form-Add-Field.png|225px|Activity form Add Field component]] For outbound campaigns, it is often desirable to display data from the calling list records in the form fields. To enable this capability, first define the form fields where you wish the calling list data to appear, as described in this section. Then use the Contact Center Administrator application to [[#topic_contact-center-administrator-guide/activitytab|map these fields]] to the corresponding fields of the calling lists. Note that editable forms are currently supported for services of Outbound Voice and Blended Voice types only. To define a new field, click the '''Add Field''' button at the bottom of the form component menu. == Settings == The following settings can be specified for the Field component. [[File:Activity-Form-Add-Field-Settings.png|350px|center|Activity form Add Field settings]] === Name === The ''name'' of this field will be used for [[#topic_contact-center-administrator-guide/activitytab|binding this form field with a calling list field]]. Note that this name will not appear on the form. To provide a display name for the field, use the [[#topic_form-builder-reference-guide/label|Label]] component. === Type === ''Type'' is the type of data to be entered in this field. You may select one of the following types from the drop-down menu: * Text * Number * Phone * Date/Time * US state * Email * Hyperlink * List * Encrypted text * Key Value List Selection of a data type may enforce some restrictions related to the range of values, format, and/or characters used. If the data entered in this field shall be encrypted while it is stored in the system, select data type '''Encrypted text'''. (If you do not see this data type, the data encryption function is not enabled for your contact center by the service provider.) Note that when you export form data from the system, any encrypted data elements will be unencrypted for export. === hidden === Select the ''hidden'' checkbox if you want this file to be hidden at run time. === editable === By default, field editing is enabled. Unselect the ''editable'' checkbox if the ''Initial value'' specified for this field is supposed to be read-only. === required === Select the ''required'' checkbox if data for this field must be provided in order for the completed form to be deemed valid. === Initial value, static === Enter the initial (default) value that will appear in this field when the form is presented to the agent. This can be a scenario variable in the ''$(varname)'' format. The agent will be able to change this value if the '''editable''' checkbox is selected. === export in results === Select the ''export in results'' checkbox if you want values entered in this field to be stored in the [[#topic_contact-center-administrator-guide/resultstab|campaign results]]. === Position in result === If the ''export in results'' checkbox is selected, you can define the ''position'' of this field in the campaign results table relative to other fields of this activity form whose values have to be stored. === Items === For data type ''List'', the ''Items'' property allows you to define your own range of possible values that can be either defined arbitrarily or sourced from a calling list. Click '''add/edit''' to define the value range for a field of the ''List'' type. === Display format === * For data type ''Phone'', this property allows you to select the country for which the phone number will be specified in this field and indicate whether an international or national format is expected. Leave the field as '''None''' to disable format verification. * For data type ''Date/Time'', this property allows you to select or define the format in which the date and/or time will be displayed on the form. ** To define your own format, select '''custom''' and specify the desired format in the field below. ** Select the '''show timezone selector''' if you want a time zone selector to be displayed next to a Date/Time field. === Result (export) format === For data type '''Date/Time''', this property allows you to select or define the format in which the date and/or time will be stored.
[[#topic_form-builder-reference-guide/employeestext|< Previous]] | [[#topic_form-builder-reference-guide/fieldsgroup|Next >]]
= 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. This functionality is enabled by dragging the Fields Group component from the Control Palette onto the area of the Form Canvas that you wish to reorganize. '''Note''': This control is supported in version 5.x for forms created in the Form Builder application version 3.x. == Example == In the example images shown, you can see how one can use the Fields Group component. # Drag the Fields Group component from the Control Palette onto the Form Canvas, from left to right.

[[File:Form-Fields-Group1-3x-50.PNG|650px|thumbnail|center]]

# Double-click onto the Form Canvas where you dropped the Fields Group component.

[[File:Form-Fields-Group2-3x-50.PNG|650px|thumbnail|center]]

# Click on an edge of the selected group to resize it, if desired. In this example, the group is made smaller by selecting the bottom edge and click-dragging the edge up.

[[File:Form-Fields-Group3-3x-50.PNG|650px|thumbnail|center]]

# Now that the group is smaller, the underlying grid of the Form Canvas is revealed, and you can move the group down the form page by click-dragging it down.

[[File:Form-Fields-Group4-3x-50.PNG|650px|thumbnail|center]]

# The grouped fields are now placed lower on the form page.

[[File:Form-Fields-Group5-3x-50.PNG|650px|thumbnail|center]] == Notes == Any field, not just a group of fields, on the Form Canvas may be dragged and dropped onto a different location. To move a field from one place to another, click and drag it to the desired location on the Form Canvas. Note that there is no "Undo" function or "Back" button in the Form Builder application. If you move a field to a different place and you don't want to keep it there, you have to move it back to where it was or tweak the form elements until they look just right. For that reason, we recommend saving the form often so that should you have to close the form and cancel your edits, you will not have to repeat all your efforts.
= 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. [[File:Form-First-Text-3x-50.PNG|800px|thumbnail|center|First Text component in Configuration mode]] To add this component to your form, hold and drag the component from the component menu on the left, onto the blank form on the right. == Field Properties == This component's field properties are described as follows. [[File:Form-First-Text-Prop-3x-50.PNG|450px|thumbnail|center|First Text field properties]] === Style === The ''Style'' property allows you to change the way that a control element appears on a form. You can select a style from the following options: * << None >> * Text * Title * Label * Hyperlink * Note You can also click '''add/edit''' to add another style or edit the selected style, choosing from different fonts, sizes, colors, and other style elements. [[File:Form-Edit-Styles-Save-3x-50.PNG|350px|thumbnail|center|Select font, size, color, and other style elements]] Clicking '''Save as''' allows you to name and save the style you just added/edited, and that style becomes available in the drop-down selector for the ''Style'' and ''Edit Style'' properties. [[File:Form-Save-As-3x-50.PNG|350px|thumbnail|center|Save the style with a new name]] === Edit Style === The ''Edit Style'' property allows you to select the style defined in the ''Style'' property. The style you select here is what is shown on the form. === Name === The ''Name'' property allows you to change the name of the control as it appears on the Control Palette. For example, you can change the name "First Text" to simply "First name" or anything else. === Form label === The ''Form label'' is the text label for this control, and it is shown on the form itself. For example, specifying form label "First name" will display "First name" on the form beside the First Text field. [[File:Form-First-Text-Label-3x-50.PNG|350px|thumbnail|center|Form label on editable preview]] === Display Type === For this control, the ''display type'' is automatically set to '''Text'''. Note that there are many other display types from which to choose. [[File:Form-Company-Display-3x-50.PNG|450px|thumbnail|center|Display type selection]] === Data field === The data field is a variable that gets and fills in company name data on the form. For this control, the ''Data field'' is automatically set to ''Contact.first_name'', but you can click the link to select a specific data field to map to the field. [[File:Form-Company-Data-3x-50.PNG|450px|thumbnail|center|Data field mapping example]] === multiline === Select the ''multiline'' checkbox to indicate multiple lines of text for this field. === Initial number of lines === If the ''multiline'' box is checked, you can specify the number of lines of text to include in this field. === Options === * '''Hidden''' - Select this option to hide the field on the form. The label will be there, but the field to enter text will not. * '''Editable''' - Select this option to allow the user to edit the field on the form. * '''Required''' - Select this option to require the user to fill in the field on the form. === Hint text form empty fields === You provide a hint to the people completing this form by entering some text into ''Hint text form empty fields'' (e.g., "your first name"). === Hide if read-only and empty === Like the ''Hidden'' option, selecting the ''Hide if read-only and empty'' option will hide the First Text field from view. === Initial value, static === The ''initial value'' helps people to know what to type in that field. It's default text that appears in the First Text field on editable preview. For example, entering "your first name" in this property will place "your first name" into the form field. === save in custom reporting fields === Select this checkbox to save data from this form field in custom reporting fields for your contact center. === 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.
[[#topic_form-builder-reference-guide/fieldsgroup|< Previous]] | [[#topic_form-builder-reference-guide/gotopage|Next >]]
= 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. To add this component to your 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. [[File:Form-GoTo-Page-3x-50.PNG|800px|thumbnail|center|Goto Page component in Configuration mode]] == Field Properties == This component's field properties are described as follows. [[File:GoTo-Page-Properties-3x-50.PNG|450px|thumbnail|center|Goto Page field properties]] === Style === The ''Style'' property allows you to change the way that a control element appears on a form. You can select a style from the following options: * << None >> * Text * Title * Label * Hyperlink * Note You can also click '''add/edit''' to add another style or edit the selected style, choosing from different fonts, sizes, colors, and other style elements. [[File:Form-Edit-Styles-Save-3x-50.PNG|350px|thumbnail|center|Select font, size, color, and other style elements]] Clicking '''Save as''' allows you to name and save the style you just added/edited, and that style becomes available in the drop-down selector for the ''Style'' and ''Edit Style'' properties. [[File:Form-Save-As-3x-50.PNG|350px|thumbnail|center|Save the style with a new name]] === Edit Style === The ''Edit Style'' property allows you to select the style defined in the ''Style'' property. The style you select here is what is shown on the form. === show as link === Select the checkbox for ''show as link'' in order to have the ''Label text'' appear as a hyperlink on the form. Users can click the link to go to the specified form page. === Label text === The ''Label text'' is the text label for this control, and it is shown on the form itself. For example, specifying form label "Next page" will display "Next page" on the control. ==== $() ==== Click '''$()''' to add a variable to the label text that appears on the GoTo Page component. After clicking, you can select a specific data field to map to the field. [[File:Form-Company-Data-3x-50.PNG|450px|thumbnail|center|Data field mapping]] === Display Type === For this control, the ''display type'' is automatically set to '''None'''. Note that there are many other display types from which to choose. [[File:Form-Company-Display-3x-50.PNG|450px|thumbnail|center|Display type selection]] === Destination page === ''Destination page'' is the page where the user will be directed upon click. Using the drop-down selector, select the desired page. Note that the selector shows only the pages available for your form. If you do not see any pages besides "Main Page," you should add a page and try again. [[File:Form-GoTo-Dest-3x-50.PNG|450px|thumbnail|center|Display type selection]] === Require valid input === Select the checkbox for ''Require valid input'' to have the system check that there is indeed another form page for the user to view. = 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. [[File:Hyperlink-Component-316.png|650px|thumbnail|center|Hyperlink component in Preview mode]] === 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. [[File:Hyperlink-Settings-316.png|350px|thumbnail|center|Hyperlink component settings]] = Label= The Label component is used to add text to your form, such as headings, instructions, and help text. '''Note''': This control is supported in version 5.x for forms created in the Form Builder application version 3.x. [[File:Form-Builder-Label.png|225px|Form Builder Label component]] 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. [[File:Activity-Form.png|650px|thumbnail|center|Drag components onto the activity form]] == 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. [[File:Form-Builder-Label-Settings.png|400px|center|Form builder Label component settings]] = 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. [[File:Form-Last-Text-3x-50.PNG|800px|thumbnail|center|Last Text component in Configuration mode]] To add this component to your form, hold and drag the component from the component menu on the left, onto the blank form on the right. == Field Properties == This component's field properties are described as follows. [[File:Form-Last-Text-Prop-3x-50.PNG|450px|thumbnail|center|Last Text field properties]] === Style === The ''Style'' property allows you to change the way that a control element appears on a form. You can select a style from the following options: * << None >> * Text * Title * Label * Hyperlink * Note You can also click '''add/edit''' to add another style or edit the selected style, choosing from different fonts, sizes, colors, and other style elements. [[File:Form-Edit-Styles-Save-3x-50.PNG|350px|thumbnail|center|Select font, size, color, and other style elements]] Clicking '''Save as''' allows you to name and save the style you just added/edited, and that style becomes available in the drop-down selector for the ''Style'' and ''Edit Style'' properties. [[File:Form-Save-As-3x-50.PNG|350px|thumbnail|center|Save the style with a new name]] === Edit Style === The ''Edit Style'' property allows you to select the style defined in the ''Style'' property. The style you select here is what is shown on the form. === Name === The ''Name'' property allows you to change the name of the control as it appears on the Control Palette. For example, you can change the name "First Text" to simply "First name" or anything else. === Form label === The ''Form label'' is the text label for this control, and it is shown on the form itself. For example, specifying form label "Last name" will display "Last name" on the form beside the Last Text field. [[File:Form-Last-Text-Label-3x-50.PNG|350px|thumbnail|center|Form label on editable preview]] === Display Type === For this control, the ''display type'' is automatically set to '''Text'''. Note that there are many other display types from which to choose. [[File:Form-Company-Display-3x-50.PNG|450px|thumbnail|center|Display type selection]] === Data field === The data field is a variable that gets and fills in company name data on the form. For this control, the ''Data field'' is automatically set to ''Contact.last_name'', but you can click the link to select a specific data field to map to the field. [[File:Form-Company-Data-3x-50.PNG|450px|thumbnail|center|Data field mapping]] === multiline === Select the ''multiline'' checkbox to indicate multiple lines of text for this field. === Initial number of lines === If the ''multiline'' box is checked, you can specify the number of lines of text to include in this field. === Options === * '''Hidden''' - Select this option to hide the Last Text field on the form. The label will be there, but the field to enter text will not. * '''Editable''' - Select this option to allow the user to edit the field on the form. * '''Required''' - Select this option to require the user to fill in the field on the form. === Hint text form empty fields === You provide a hint to the people completing this form by entering some text into ''Hint text form empty fields'' (e.g., "your last name"). === Hide if read-only and empty === Like the ''Hidden'' option, selecting the ''Hide if read-only and empty'' option will hide the Last Text field from view. === Initial value, static === The ''initial value'' helps people to know what to type in that field. It's default text that appears in the Last Text field on editable preview. For example, entering "your last name" in this property will place "your last name" into the form field. === save in custom reporting fields === Select this checkbox to save data from this form field in custom reporting fields for your contact center. === 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.
[[#topic_form-builder-reference-guide/label|< Previous]] | [[#topic_form-builder-reference-guide/list|Next >]]
= 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 (not shown on the form) * '''Value''' - The actual list item 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.
[[#topic_form-builder-reference-guide/lasttext|< Previous]] | [[#topic_form-builder-reference-guide/manualaugmentationsystem|Next >]]
= 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. The Manual Augmentation System component is outlined in red on the example form shown. To add this component to your 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. [[File:Form-Manual-Aug-3x-50.PNG|800px|thumbnail|center|Manual Augmentation System component in Configuration mode]] == Field Properties == This component's field properties are described as follows. [[File:Form-Manual-Aug-Prop-3x-50.PNG|thumbnail|center|Manual Augmentation System field properties]] === Style === The ''Style'' property allows you to change the way that a control element appears on a form. You can select a style from the following options: * << None >> * Text * Title * Label * Hyperlink * Note You can also click '''add/edit''' to add another style or edit the selected style, choosing from different fonts, sizes, colors, and other style elements. [[File:Form-Edit-Styles-Save-3x-50.PNG|450px|thumbnail|center|Select font, size, color, and other style elements]] Clicking '''Save as''' allows you to name and save the style you just added/edited, and that style becomes available in the drop-down selector for the ''Style'' and ''Edit Style'' properties. [[File:Form-Save-As-3x-50.PNG|450px|thumbnail|center|Save the style with a new name]] === Edit Style === The ''Edit Style'' property allows you to select the style defined in the ''Style'' property. The style you select here is what is shown on the form. === Label text === The ''Label text'' is the text label for this control, and it is shown on the form itself. For example, specifying form label "Augment this!" will display "Augment this!" on the control. = MediaPlayer URL= The MediaPlayer URL component is used to play the specified message to the agent. This can be used, for example, for voicemail-based preview campaigns, where voicemail messages initially received from customers via an interactive voice response (IVR) application are used to form a calling list for a follow-up outbound campaign. During the campaign, preview forms appearing in the Agent Desktops will have MediaPlayer URL links, allowing the agents to listen to customers’ messages before calling them. 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. [[File:MediaPlayer-URL-316.png|650px|thumbnail|center|MediaPlayer URL component in Preview mode]] == Settings == The following settings can be specified for the Media Player URL 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 === MediaPlayer URL === The URL is the link to the message to be played. This can be a scenario variable in the ''$(varname)'' format. [[File:MediaPlayer-URL-Settings.png|400px|center|MediaPlayer URL component]] = 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. If messenger integrations have been configured for your contact center, these icons 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]]. The Messenger component is outlined in red on the example form shown. To add this component to your 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. [[File:Form-Messenger-3x-50.PNG|800px|thumbnail|center|Messenger component in Configuration mode]] == Field Properties == This component has just one property that can be edited: Style. [[File:Form-Messenger-Prop-3x-50.PNG|thumbnail|center|Messenger field properties]] === Style === The ''Style'' property allows you to change the way that a control element appears on a form. Because the Messenger component shows up on the form as a series of icons, it's recommended that the style be set to '''None'''. You can select a style from the following options: * << None >> * Text * Title * Label * Hyperlink * Note You can also click '''add/edit''' to add another style or edit the selected style, choosing from different fonts, sizes, colors, and other style elements. [[File:Form-Edit-Styles-Save-3x-50.PNG|450px|thumbnail|center|Select font, size, color, and other style elements]] Clicking '''Save as''' allows you to name and save the style you just added/edited, and that style becomes available in the drop-down selector for the ''Style'' and ''Edit Style'' properties. [[File:Form-Save-As-3x-50.PNG|450px|thumbnail|center|Save the style with a new name]] = 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]]
[[#topic_form-builder-reference-guide/messenger|< Previous]] | [[#topic_form-builder-reference-guide/notes|Next >]]
= 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.
[[#topic_form-builder-reference-guide/messengers|< Previous]] | [[#topic_form-builder-reference-guide/notessystem|Next >]]
= 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. A form can have only one component of this type. For more information, see section [[#topic_agent-guide/howtoenterdispositionsandnotes|How to Enter Dispositions and Notes]] of the ''Agent Guide''. 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. [[File:Activity-Form-Notes-System.png|225px|Activity form notes system]] == Settings == The following settings can be specified for the Notes System component. === Style === Select or define the [[#topic_form-builder-reference-guide/formbuilderoverview|text style]] for text appearing in this field. Choose from the following options: * << None >> * Text * Title * Label * Hyperlink * Note [[File:Activity-Form-Notes-Settings.png|400px|center|Activity form Notes System settings]] = 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.
[[#topic_form-builder-reference-guide/notessystem|< Previous]] | [[#topic_form-builder-reference-guide/phone-homemultiphone|Next >]]
= 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. In the image shown, the Phone-home Multi phone component is outlined in red: [[File:Form-Multi-Phone-3x-50.PNG|800px|thumbnail|center|Phone-home Multi phone on a form]] == Field Properties == The field properties are described as follows. [[File:Form-Multi-Phone-Prop-3x-50.PNG|450px|thumbnail|center|Form-Multi-Phone-Prop-3x-50.PNG properties]] === Style === The ''Style'' property allows you to change the way that a control element appears on a form. You can select a style from the following options: * << None >> * Text * Title * Label * Hyperlink * Note You can also click '''add/edit''' to add another style or edit the selected style, choosing from different fonts, sizes, colors, and other style elements. [[File:Form-Edit-Styles-Save-3x-50.PNG|450px|thumbnail|center|Select font, size, color, and other style elements]] Clicking '''Save as''' allows you to name and save the style you just added/edited, and that style becomes available in the drop-down selector for the ''Style'' and ''Edit Style'' properties. [[File:Form-Save-As-3x-50.PNG|450px|thumbnail|center|Save the style with a new name]] === Edit Style === The ''Edit Style'' property allows you to select the style defined in the ''Style'' property. The style you select here is what is shown on the form. === Name === The ''Name'' property allows you to change the name of the control as it appears on the Control Palette. For example, you can change the name "Phone-home Multi phone" to simply "Phone" or anything else. === Form label === The ''Form label'' is the text label for this control, and it is shown on the form itself. For example, specifying form label "Phone" will display "Phone" on the form beside the phone number fields. === Display Type === For this control, the ''display type'' is automatically set to '''Multi phone'''. Note that there are many other display types from which to choose. [[File:Form-Multi-Phone-Display-50.PNG|450px|thumbnail|center|Display type selection]] === Data field array=== The data field array is a variable that gets and fills in contact data on the form. For this control, the ''Data field'' is automatically set to '''Contact.phones'''. === Options === * '''Editable''' - Select this option to allow the user to edit the field on the form. * '''Required''' - Select this option to require the user to fill in the field on the form. === Hint text form empty fields === You provide a hint to the people completing this form by entering some text into ''Hint text form empty fields'' (e.g., "your phone number" or "home, mobile, or business phone").
[[#topic_form-builder-reference-guide/number|< Previous]] | [[#topic_form-builder-reference-guide/phonenumber|Next >]]
= 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.
[[#topic_form-builder-reference-guide/phone-homemultiphone|< Previous]] | [[#topic_form-builder-reference-guide/picture|Next >]]
= Picture Static= The Picture Static component is used to embed small images on your form. Images can be either uploaded from your local source or sourced from a web page. Uploaded images are stored in the Bright Pattern Contact Center system. They must be in the .PNG format and the size of the original image shall not exceed 23.4 KB. Note that if you select an image in one of the other standard formats, including .JPG, .BMP, and .GIF, the system will attempt to upload it as well. However, because of the internal conversion to .PNG, the size of the original image in such other formats may have to be smaller than the 23.4 KB allowed for the .PNG format. For images sourced from web pages, only links are stored. 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. [[File:Picture-Static-316.png|650px|Picture Static component in Preview mode]] === Settings === ==== Image URL ==== You can copy the URL of a desired image from a web page and paste it into the ''Image URL'' field. To use an image from a local source, click the '''upload''' button and select the desired file. The '''Image url''' field in this case will show the link to the internal system location where a copy of the uploaded image is stored. Because such images are embedded into the form, the allowable size is very limited. If larger images are needed, it is recommended that you use the URL of an image hosted elsewhere. The limit for an image embedded into a form is 24,000 bytes (23.4 KB). [[File:Activity-Form-Picture-Settings.png|400px|thumbnail|center|Picture Static component settings]] = 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. In the image shown, the Primarymail Multi email addresses component is outlined in red: [[File:Form-Multi-Email-3x-50.PNG|800px|thumbnail|center|Primarymail Multi email addresses on a form]] == Field Properties == The field properties are described as follows. [[File:Form-Multi-Email-Prop-3x-50.PNG|450px|thumbnail|center|Primarymail Multi email addresses properties]] === Style === The ''Style'' property allows you to change the way that a control element appears on a form. You can select a style from the following options: * << None >> * Text * Title * Label * Hyperlink * Note You can also click '''add/edit''' to add another style or edit the selected style, choosing from different fonts, sizes, colors, and other style elements. [[File:Form-Edit-Styles-Save-3x-50.PNG|450px|thumbnail|center|Select font, size, color, and other style elements]] Clicking '''Save as''' allows you to name and save the style you just added/edited, and that style becomes available in the drop-down selector for the ''Style'' and ''Edit Style'' properties. [[File:Form-Save-As-3x-50.PNG|450px|thumbnail|center|Save the style with a new name]] === Edit Style === The ''Edit Style'' property allows you to select the style defined in the ''Style'' property. The style you select here is what is shown on the form. === Name === The ''Name'' property allows you to change the name of the control as it appears on the Control Palette. For example, you can change the name "Primarymail Multi email addresses" to simply "Email" or anything else. === Form label === The ''Form label'' is the text label for this control, and it is shown on the form itself. For example, specifying form label "Emails" will display "Emails" on the form beside the email fields. === Display Type === For this control, the ''display type'' is automatically set to '''Multi email'''. Note that there are many other display types from which to choose. === Data field array=== The data field array is a variable that gets and fills in contact data on the form. For this control, the ''Data field'' is automatically set to '''Contact.emails'''. === Options === * '''Editable''' - Select this option to allow the user to edit the field on the form. * '''Required''' - Select this option to require the user to fill in the field on the form. === Hint text form empty fields === You provide a hint to the people completing this form by entering some text into ''Hint text form empty fields'' (e.g., "your email" or "home or business email").
[[#topic_form-builder-reference-guide/picture|< Previous]] | [[#topic_form-builder-reference-guide/revenuetext|Next >]]
= 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. [[File:Form-Revenue-3x-50.PNG|800px|thumbnail|center|Revenue Text component in Configuration mode]] To add this component to your form, hold and drag the component from the component menu on the left, onto the blank form on the right. == Field Properties == This component's field properties are described as follows. [[File:Form-Revenue-Prop-3x-50.PNG|450px|thumbnail|center|Revenue Text field properties]] === Style === The ''Style'' property allows you to change the way that a control element appears on a form. You can select a style from the following options: * << None >> * Text * Title * Label * Hyperlink * Note You can also click '''add/edit''' to add another style or edit the selected style, choosing from different fonts, sizes, colors, and other style elements. [[File:Form-Edit-Styles-Save-3x-50.PNG|450px|thumbnail|center|Select font, size, color, and other style elements]] Clicking '''Save as''' allows you to name and save the style you just added/edited, and that style becomes available in the drop-down selector for the ''Style'' and ''Edit Style'' properties. [[File:Form-Save-As-3x-50.PNG|450px|thumbnail|center|Save the style with a new name]] === Edit Style === The ''Edit Style'' property allows you to select the style defined in the ''Style'' property. The style you select here is what is shown on the form. === Name === The ''Name'' property allows you to change the name of the control as it appears on the Control Palette. For example, you can change the name "Revenue Text" to simply "Revenue" or anything else. === Form label === The ''Form label'' is the text label for this control, and it is shown on the form itself. For example, specifying form label "Revenue" will display "Revenue" on the form beside the Revenue Text field. === Display Type === For this control, the ''display type'' is automatically set to '''Text'''. Note that there are many other display types from which to choose. [[File:Form-Company-Display-3x-50.PNG|450px|thumbnail|center|Display type selection]] === Data field === The data field is a variable that gets and fills in the number of company revenue (if it's known) on the form. For this control, the ''Data field'' is automatically set to '''None''', but you can click the link to select a specific data field to map to this field instead. [[File:Form-Company-Data-3x-50.PNG|450px|thumbnail|center|Data field mapping example]] === multiline === Select the ''multiline'' checkbox to indicate multiple lines of text for this field. === Initial number of lines === If the ''multiline'' box is checked, you can specify the number of lines of text to include in this field. === Options === * '''Hidden''' - Select this option to hide the Employees Text field on the form. The label will be there, but the field to enter text will not. * '''Editable''' - Select this option to allow the user to edit the field on the form. * '''Required''' - Select this option to require the user to fill in the field on the form. === Hint text form empty fields === You provide a hint to the people completing this form by entering some text into ''Hint text form empty fields'' (e.g., "Company revenue"). === Hide if read-only and empty === Like the ''Hidden'' option, selecting the ''Hide if read-only and empty'' option will hide the field from view. === Initial value, static === The ''initial value'' helps people to know what to type in that field. It's default text that appears in the Revenue Text field on editable preview. For example, entering "revenue amount" in this property will place "revenue amount" into the form field. === save in custom reporting fields === Select this checkbox to save data from this form field in custom reporting fields for your contact center. === 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.
[[#topic_form-builder-reference-guide/primarymailmultiemailaddresses|< Previous]] | [[#topic_form-builder-reference-guide/searchpanel|Next >]]
= 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]]
[[#topic_form-builder-reference-guide/revenuetext|< Previous]] | [[#topic_form-builder-reference-guide/segmentkeyvaluelist|Next >]]
= 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. The component is outlined in red on the example form shown. [[File:Form-Segment-3x-50.PNG|800px|thumbnail|center|Segment Key Value List component in Configuration mode]] To add this component to your form, hold and drag the component from the component menu on the left, onto the blank form on the right. == Field Properties == This component's field properties are described as follows. [[File:Form-Segment-Prop-3x-50.PNG|450px|thumbnail|center|Segment Key Value List field properties]] === Style === The ''Style'' property allows you to change the way that a control element appears on a form. You can select a style from the following options: * << None >> * Text * Title * Label * Hyperlink * Note You can also click '''add/edit''' to add another style or edit the selected style, choosing from different fonts, sizes, colors, and other style elements. [[File:Form-Edit-Styles-Save-3x-50.PNG|450px|thumbnail|center|Select font, size, color, and other style elements]] Clicking '''Save as''' allows you to name and save the style you just added/edited, and that style becomes available in the drop-down selector for the ''Style'' and ''Edit Style'' properties. [[File:Form-Save-As-3x-50.PNG|450px|thumbnail|center|Save the style with a new name]] === Edit Style === The ''Edit Style'' property allows you to select the style defined in the ''Style'' property. The style you select here is what is shown on the form. === Name === The ''Name'' property allows you to change the name of the control as it appears on the Control Palette. For example, you can change the name "Segment Key Value List" to simply "Priority" or anything else. === Form label === The ''Form label'' is the text label for this control, and it is shown on the form itself. For example, specifying form label "Priority level" will display "Priority level" on the form beside the Segment Key Value List field. === Display Type === For this control, the ''display type'' is automatically set to '''Key Value List'''. Note that there are many other display types from which to choose. === Data field === The data field is a variable that gets and fills in the contact's priority level on the form, if known. For this control, the ''Data field'' is automatically set to '''Contact.segment''', but you can click the link to select a specific data field to map to this field instead. [[File:Form-Company-Data-3x-50.PNG|450px|thumbnail|center|Data field mapping example]] === Items === ''Items'' are the choices listed in the Segment Key Value List selector. Click '''add/edit''' to add or change the items in the selector. For example, adding items Gold, Silver, and Bronze will cause them to be displayed as shown. [[File:Form-Segment-List-3x-50.PNG|450px|thumbnail|center|Segment Key Value List]] === Options === * '''Hidden''' - Select this option to hide the Segment field on the form. The label will be there, but the field to enter text will not. * '''Editable''' - Select this option to allow the user to edit the field on the form. * '''Required''' - Select this option to require the user to fill in the field on the form. === Hide if read-only and empty === Like the ''Hidden'' option, selecting the ''Hide if read-only and empty'' option will hide the field from view. === Initial value, static === The ''initial value'' helps people to know what to type in that field. It's default text that appears in the Revenue Text field on editable preview. For example, entering "priority" in this property will place "priority" into the form field.
[[#topic_form-builder-reference-guide/searchpanel|< Previous]] | [[#topic_form-builder-reference-guide/spacer|Next >]]
= 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.
[[#topic_form-builder-reference-guide/segmentkeyvaluelist|< Previous]] | [[#topic_form-builder-reference-guide/summarytext|Next >]]
= Summary Text= Summary Text is a text field for entering disposition notes that are saved with an interaction. The component is outlined in red on the example form shown. [[File:Form-Summary-3x-50.PNG|800px|thumbnail|center|Summary Text component in Configuration mode]] To add this component to your form, hold and drag the component from the component menu on the left, onto the blank form on the right. == Field Properties == This component's field properties are described as follows. [[File:Form-Summary-Prop-3x-50.PNG|450px|thumbnail|center|Summary Text field properties]] === Style === The ''Style'' property allows you to change the way that a control element appears on a form. You can select a style from the following options: * << None >> * Text * Title * Label * Hyperlink * Note You can also click '''add/edit''' to add another style or edit the selected style, choosing from different fonts, sizes, colors, and other style elements. [[File:Form-Edit-Styles-Save-3x-50.PNG|450px|thumbnail|center|Select font, size, color, and other style elements]] Clicking '''Save as''' allows you to name and save the style you just added/edited, and that style becomes available in the drop-down selector for the ''Style'' and ''Edit Style'' properties. [[File:Form-Save-As-3x-50.PNG|450px|thumbnail|center|Save the style with a new name]] === Edit Style === The ''Edit Style'' property allows you to select the style defined in the ''Style'' property. The style you select here is what is shown on the form. === Name === The ''Name'' property allows you to change the name of the control as it appears on the Control Palette. For example, you can change the name "Summary Text" to simply "Interaction Summary" or anything else. === Form label === The ''Form label'' is the text label for this control, and it is shown on the form itself. For example, specifying form label "Agent Summary" will display "Agent Summary" on the form beside the Summary Text field. === Display Type === For this control, the ''display type'' is automatically set to '''Text'''. Note that there are many other display types from which to choose. [[File:Form-Company-Display-3x-50.PNG|450px|thumbnail|center|Display type selection]] === Data field === The data field is a variable that gets and fills in the agent's summary notes (if available) for that contact on the form. For this control, the ''Data field'' is automatically set to '''Contact.summary''', but you can click the link to select a specific data field to map to this field instead. [[File:Form-Company-Data-3x-50.PNG|450px|thumbnail|center|Data field mapping example]] === multiline === Select the ''multiline'' checkbox to indicate multiple lines of text for this field. === Initial number of lines === If the ''multiline'' box is checked, you can specify the number of lines of text to include in this field. === Options === * '''Hidden''' - Select this option to hide the field on the form. The label will be there, but the field to enter text will not. * '''Editable''' - Select this option to allow the user to edit the field on the form. * '''Required''' - Select this option to require the user to fill in the field on the form. === Hint text form empty fields === You provide a hint to the people completing this form by entering some text into ''Hint text form empty fields'' (e.g., "Summary of interaction"). === Hide if read-only and empty === Like the ''Hidden'' option, selecting the ''Hide if read-only and empty'' option will hide the field from view. === Initial value, static === The ''initial value'' helps people to know what to type in that field. It's default text that appears in the Summary field on editable preview. For example, entering "interaction summary" in this property will place "interaction summary" into the form field. === save in custom reporting fields === Select this checkbox to save data from this form field in custom reporting fields for your contact center. === 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.
[[#topic_form-builder-reference-guide/spacer|< Previous]] | [[#topic_form-builder-reference-guide/text|Next >]]
= 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. [[File:Form-Title-Text-3x-50.PNG|800px|thumbnail|center|Title Text component in Configuration mode]] To add this component to your form, hold and drag the component from the component menu on the left, onto the blank form on the right. == Field Properties == This component's field properties are described as follows. [[File:Form-Title-Text-Pro-3x-50.PNG|450px|thumbnail|center|Title Text field properties]] === Style === The ''Style'' property allows you to change the way that a control element appears on a form. You can select a style from the following options: * << None >> * Text * Title * Label * Hyperlink * Note You can also click '''add/edit''' to add another style or edit the selected style, choosing from different fonts, sizes, colors, and other style elements. [[File:Form-Edit-Styles-Save-3x-50.PNG|350px|thumbnail|center|Select font, size, color, and other style elements]] Clicking '''Save as''' allows you to name and save the style you just added/edited, and that style becomes available in the drop-down selector for the ''Style'' and ''Edit Style'' properties. [[File:Form-Save-As-3x-50.PNG|350px|thumbnail|center|Save the style with a new name]] === Edit Style === The ''Edit Style'' property allows you to select the style defined in the ''Style'' property. The style you select here is what is shown on the form. === Name === The ''Name'' property allows you to change the name of the control as it appears on the Control Palette. For example, you can change the name "Title Text" to simply "Job Title" or anything else. === Form label === The ''Form label'' is the text label for this control, and it is shown on the form itself. For example, specifying form label "Title" will display "Title Text" on the form beside the Title Text field. === Display Type === For this control, the ''display type'' is automatically set to '''Text'''. Note that there are many other display types from which to choose. [[File:Form-Company-Display-3x-50.PNG|450px|thumbnail|center|Display type selection]] === Data field === The data field is a variable that gets and fills in company name data on the form. For this control, the ''Data field'' is automatically set to ''Contact.title'', but you can click the link to select a specific data field to map to the field. [[File:Form-Company-Data-3x-50.PNG|450px|thumbnail|center|Data field mapping example]] === multiline === Select the ''multiline'' checkbox to indicate multiple lines of text for this field. === Initial number of lines === If the ''multiline'' box is checked, you can specify the number of lines of text to include in this field. === Options === * '''Hidden''' - Select this option to hide the field on the form. The label will be there, but the field to enter text will not. * '''Editable''' - Select this option to allow the user to edit the field on the form. * '''Required''' - Select this option to require the user to fill in the field on the form. === Hint text form empty fields === You provide a hint to the people completing this form by entering some text into ''Hint text form empty fields'' (e.g., "your title"). === Hide if read-only and empty === Like the ''Hidden'' option, selecting the ''Hide if read-only and empty'' option will hide the Title Text field from view. === Initial value, static === The ''initial value'' helps people to know what to type in that field. It's default text that appears in the Title Text field on editable preview. For example, entering "your title" in this property will place "your title" into the form field. === save in custom reporting fields === Select this checkbox to save data from this form field in custom reporting fields for your contact center. === 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.
[[#topic_form-builder-reference-guide/text|< Previous]] | [[#topic_form-builder-reference-guide/usstate|Next >]]
= 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.
[[#topic_form-builder-reference-guide/titletext|< Previous]] | [[#topic_form-builder-reference-guide/voicesignature|Next >]]
= 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.
[[#topic_form-builder-reference-guide/usstate|< Previous]] | [[#topic_form-builder-reference-guide/voicesignaturesystem|Next >]]
= 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. A form can have only one component of this type. For more information, see section [[#topic_agent-guide/howtocollectavoicesignature|How to Collect a Voice Signature]] of the ''Agent Guide''. Note that if this component is displayed on the form, it will not appear in the Contact Info Panel of the Agent Desktop. 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. [[File:Activity-Form-Voice-Signature-System.png|225px|Activity form voice signature system component]] == Settings == The following settings can be specified for the Voice Signature System component. === Style === Select or define the [[#topic_form-builder-reference-guide/formbuilderoverview|text style]] of this element. Choose from the following options: * << None >> * Text * Title * Label * Hyperlink * Note [[File:Activity-Form-Voice-Signature-Settings.png|400px|center|Activity form Voice Signature settings]]