Submission Panels

#	Element Name	Description
1	Enable Panel	Your form will be live as soon as you enable the panel.
2	Delete This Panel	You can remove the panel from the workflow. Once it is deleted and the workflow is saved, it cannot be recovered.
3	Form Name in URL	This value becomes part of the URL that is used to load the form. Use a value that is short and descriptive.
4	Frame Type	It's common to embed your submit form into a web page, like your company website. To include a form into an iframe you must specifically allow it to be embedded. Without this setting, browsers will reject the iframe and present an error to the user trying to load it. Not Allowed - the form will not load within an iframe. Same Site - you can only embed the form into a page that has the same domain as your form. This would only be used to embed your form into a customer portal or other page that has the same domain as your iService tenant. Any Site - use this setting to embed your form into a website with a different domain than your iService tenant.
5	Custom CSS	Add custom CSS to the head of the submit form to control the theme and style of the form. Enter the CSS without the Style tag.
6	Custom Head HTML	Add a custom block of HTML into the Head section of the web page.
7	Body Class	Modify the class styles for the Body of the form.
8	Success Message Type	When the form is submitted, and standard success message will be displayed. You can replace this with a custom success message by clicking Custom HTML. Then paste your custom HTML or use the rich text editor to create the page. After your custom HTML page is created, click the edit pencil to edit the document.
9	Panel Elements	Layout the interface by dragging elements from the Panel Elements picker onto a drop zone in the body of the panel.
10	Panel Layout	Drag your HTML, Inputs, and Buttons into this areas to create the layout for your page.

Actions are attached to the button click on submit forms. Buttons are added to the page in Button Groups, which include the following configuration options.

Button Group Configuration

Click the pencil to the left of the button to open the Button Group settings.

A Button Group panel

#	Element Name	Description
1	Delete / Move	Click the red x to delete the entire button group. To move the group to a new location, click Move and then click the drop area arrow in the panel for the new location. This will move the entire group of buttons.
2	New Column Width	This defines the percentage of the row to use for the button group. If no value is set, the button will use whatever percentage of the row is left over from other elements. If set, it will start a new row on the page and will dedicate the percent specified to the group. For example, a setting of 50% will start a new row and put the buttons into the first half of the row. A setting of 100% will dedicate the entire row to the button group.
3	Input Width Medium+	This defines the width of the control when displayed on smaller screens (responsive settings).
4	Non-reactive Input Width	This defines the width of the control on full size displays, such as desktops.
5	Include Cancel	This adds a cancel link as the last button in the group. The cancel button will exit the workflow back to the View Mode of the interaction. For example, in a Manage Messages or Manage Workflow Tickets page, the user first sees the View Mode. After they load the answer panel, the cancel button will show the interaction in the view mode (without the answer panel).
6	Button Style	There are two button styles to choose from. Default buttons are rectangles that look like standard submit buttons. Timeline Steps are round buttons that place the label below a circular button. An example using timeline buttons is below. Timeline Button Example

Button Configuration

Within the Button Group you can add as many buttons as desired. One button is added by default when the button group is created. Click the +Add button to add additional buttons.

Button Submit Form Actions

	Panel Element	Description
1	Delete and Move	You can delete the button or move it left or right in the order of buttons within the button group.
2	Button Style	Pick the color for the button. Choose text link to create a plain hyperlink.
3	Label	Enter the label to display on the button, such as Submit. For time line buttons, the label is displayed below the button circle.
4	Font Awesome Icon Class	Select an icon to display with the button.
5	Suppress Success Message	When a button is clicked, a success message is displayed unless there is an error on the page. If you use a button for navigation within a form, you should suppress the success message.
6	Grey-out Property	When your button group has multiple buttons, you can highlight the selected button using this property.
7	Grey-out Value	This is the value that will cause the button to show the color. Unless the value for this property matches, the button will be grey.
8	Required Mode	The options are to require all properties in the form or none of the properties.
9	Add Action	Add the actions that button will trigger. The available actions are listed below. The example shown is for a Customer Submit panel. Agent submit panels also support Agent Notifications and Email to Submitter. Ticket created in agent submit forms are Agent Tickets, rather than Customer Tickets.

Actions Available (Both Customer and Agent Submit Panels)

There are four actions that both customer and agent submit forms can execute: Set Contact Properties, Create Ticket, Email to Customer, and Set Interaction Property.

Set Contact Properties - Use this action to save all of the contact properties entered in the form for the customer. The only input for this action is the To Address that will get the property values.

Create Ticket - Use this to create a new question from the customer. In Agent Submit forms, you can directly assign the ticket upon submission. For Customer Submit forms, questions are created with a status of unassigned. Agent submit forms create Agent Tickets rather than Customer Tickets.

Email to Customer - This action sends an email to the customer

Set Property - Set a value for an interaction property when the button is clicked. This can be a segment interaction property or workflow property. All workflow properties are used as case properties.

Additional Actions for Agent Submit Panels

Agent submit forms include two additional actions that can be attached to buttons.

Agent Notifications - When the button is clicked, send a notification to the assigned agent. This only works in agent submit forms because customers do not have the option to assign questions to agents.

Email to Submitter - In addition to emailing the customer (message acknowledgment), this action will send an email to the agent that submitted the form.

The controls within the Submit Forms are used to create the content on your form. Content is categorized as Page Structure and Submit Iinputs.

The Workflow Form Elements picker

Page Structure

The main elements of the form layout are Static HTML, Buttons, and Tabs.

#	Panel Element	Description
1	HTML	Add sections to your form that contain any plain text or HTML.
2	Buttons	Add a button group to include buttons on the form. There will be on default button in the group, and you can add additional buttons to the group.
3	Tab Group	The iService UI design uses tabs to contain related information. You can add tabs to your form to organize content, or hide/show content as needed.

Submit Inputs

Before submitting forms by clicking buttons, users must input data such as their email address and other information. These inputs can be added inside of tabs, or directly on the page.

#	Panel Element	Description
4	Interaction Property	You can add a segment interaction property of any type (case, question, or answer) or use a workflow property. Workflow interaction properties mimic the behavior of segment Case properties, but do not require any configuration outside of the workflow builder.
5	Email	Most submit forms require an email address to create the interaction. This is used to locate or create a contact for an interaction. The login/email for a contact is a special field within iService that enforces unique values and other attributes. You must use the Email Address field to save a value into a contact's login field.
6	Contact Property	Add any segment contact property to the form, such as first name or account number.
7	Uploads	Add a file drop area and select file option to the form. The code required for saving the uploads is automatically added to the form. Uploads are limited to 10MB.
8	Single Plain Text	This creates a basic HTML Text Input field. This is a single line input.
9	Multiline Plain Text	This creates a basic HTML Text Area input field. This allows multiple lines of text, such as for typing the body of a question.
10	Multiline Rich Text	This functions like the plain text version for capturing input, but includes a rich text editor with formatting controls.
11	SMS Opt-In	When added to an input form, you can automatically convert a mobile phone number to an Email to SMS login structured for Sinch Message Media.

Agent Submit forms can also include an agent picker. This is used to create agent lists for tasks like reassigning a ticket.

workflow-agent-picker

A common use case for forms is a contact form that creates a customer ticket. To get started, create a Customer Submit panel by clicking the button.

Creating a customer submit form

Step 1 - Add a submit button

To see the required inputs for a customer ticket, add a button so you can attach the create ticket action.

Adding a button to the form

The required values for your button are shown below.

#	Button Settings	Description
1	Button Color	Select a color for the button or select Text Link to create a standard hyperlink.
2	Label	This is the label displayed on the button.
3	Font Awesome Icon Class	(optional) You can use any font awesome icon for your button, or leave it blank.
4	Required Tab	If your inputs are within a tab, you can select the tab to require all of those inputs to be set when the form is submitted.
5	Add Action	After you format the submit button, you can add actions. Set Contact Properties - This action will save any contact properties on the form to the contact that is entered. This requires that you have contact properties on the form and an email address to identify the contact. Customer Ticket - Create a customer ticket when the form is submitted. Email to Customer - Use this to send a notification to the contact when the form is submitted. For example, a custom message acknowledgment that is different from the standard acknowledgment configured for the topic.

Adding a submit button to a form

Step 2 - Add a Create Customer Ticket action

After the Submit button is created, we add Create Customer Ticket as the action.

Add Customer Ticket to button actions

There are eight inputs to the customer ticket to consider.

#	Customer Ticket Values	Description
1	Destination Email Input ID	A customer email address is required for them to submit their question. After you add the email field to the form, select it here.
2	Topic Name	Every interaction is associated with a topic. You can preset the topic, or let the user choose one from the list of topics that are public.
3	Subject	This will be the subject of the ticket created. You can preset the subject line (including variables), or let the user input the subject.
4	Set Question Properties	If you have question properties as inputs, turning this switch on will save values into the properties. When off, you can add the properties into the ticket body but they will not be saved into the iService database as separate property values.
5	Save Case Properties	Similar to question properties, turn on this switch to save all inputs to case properties in the database.
6	Message Acknowledgment	To override the normal message acknowledgment, select No standard ack. Use this setting when you send a custom acknowledgment directly from the form action. For example, when the form is submitted you can send an acknowledgment that says "Thanks for submitting the xyz form." When the customer sends a new email into the topic, iService will then send the standard acknowledgment that says "We got your question."
7	Ticket Body	The ticket body can be preset by combining the form inputs into your own customer format. Or, the customer can type the full question body themselves in a text are input. If you use a preset ticket body, provide a name for the template in the Interaction Body Name input.
8	Result Name	You can save the ID for the interaction created with a friendly name, and then use it in other workflow steps.

Adding the Customer Ticket action

Step 3 - Add the required inputs

Now we'll add all the required input fields to the form. The minimum required inputs for the ticket action are:

1.Email address

2.Topic

3.Subject

4.Ticket Body

In our example, we also add some static HTML to the top of the form. Add these inputs to your form and arrange them as desired with the field input size and your custom labels. Select the inputs from the Add Control to Panel section shown below. In the example, we use a Multiline Plain Text area for the ticket body. You could also use the Multiline Rich Text input if you want to provide an editor.

After the inputs are added to the form and arranged in the proper order, the submit form looks like the below.

A completed customer submit form

Step 4 - Load and test the form

You're done! You can load the form from the URL specified and submit it as a test.

The URL for your form

Please enable JavaScript to view this site.

iService User Guide

Submission Panels