...
Forms consist of one or more steps, each of which contains form elements. The form elements are the basis of the form's interface. By default, Interactive Forms contains eighteen elements that you can use to build the interface of each step in a form. In addition to the form elements, there are also Handlers, Prehandlers, and Routers that you can define that can execute actions based on what a visitor enters in a form step.
| Note |
|---|
The number of form elements can also be extended by a developer to offer more form options. This section only describes the use of the default Interactive Forms form elements. |
In This Topic
| Table of Contents | ||
|---|---|---|
|
...
Opening Interactive Forms
Forms in XperienCentral are created using the Interactive Forms component. To open the Interactive Forms user interface, navigate to Configuration > Interactive Forms.
...
To create a new form, follow these steps, navigate to Forms > New.
The "Forms" interface consists of the following parts:
- The title of the form. This is the title of the form as it appears in the "Forms" pane.
- Palette containing the form elements used in steps to define the content of the form.
- The step pane in which form elements are arranged.
- The version of the form you are viewing.
- The state of the form. There are three possible states: Development, Active, and Inactive.
- The title of the step.
- Toggle between showing all or a subset of form element properties.
Changing the Title of an Interactive Form
- Highlight "New Form" in the "Title" text box.
- Enter a title for the form.
- Click [Apply] or press <Alt-S>. Notice that the title of the form is now reflected in the "Forms" pane.
In This Topic
| Table of Contents | ||
|---|---|---|
|
...
Adding Form Elements to a Step
...
For example, clicking the Date form element adds it to the step:
To add a form element using drag and drop, click the form element with the left mouse button and keep the left mouse button depressed, drag the form element with help of the "Helper" block onto the "Step" pane and onto the dotted rectangle and then release the left mouse button to drop the form element onto the step.
...
| Note |
|---|
Application Managers
|
...
| Note |
|---|
If the last step in the form has the purpose of thanking the visitor for completing the form, then do not place a "Back" button on this last step. For each visitor, Interactive Forms keeps track of the visited steps, but will clean up this information when showing the last step of a form. If the visitor clicks a "Back" button on the last step, then he they will be routed back to step 1 because at that point the history of visited steps is not available anymore. |
...
| Property | Description | ||
|---|---|---|---|
| Title | The text that appears next to the password input field in the step pane and in the form on the frontend. | ||
| Show title | Specifies whether to show the title of the form element in the step pane and in the form on the frontend. | ||
| Design template | Specifies the design template to use to render the form element on the frontend. This property will only be available if there are two or more design template for the form element. | ||
| Identifier | The unique identifier to use for this form element. The unique identifier is used in expressions for (pre)filling and (pre)conditions. Click here for information about renaming an identifier.
| ||
| Precondition | The precondition decides in what situations the form element will be visible to the website visitor. | ||
| CSS classname | Specifies the CSS class to use for rendering the form element. This option allows you to alter the how selected form elements appear in the form without globally altering the presentation. | ||
| Fragment Tag | A unique tag to identify the form fragment. This tag is rendered in the form fragment presentation as a custom data attribute of the form fragment itself. The attribute name is data-fragment-tag. When filling out this property for a form fragment, the attribute is added to the presentation and can be used by external applications like GX Software's BlueConic. |
...
Using the
...
Interactive Forms Clipboard
You can copy one or more form elements to the Interactive Forms Clipboard and then paste them in the current form or in another form/form section. You can also copy handlers, routers and conditions. To use the Interactive Forms Clipboard, follow these steps:
- Hover the mouse over the "copy" icon in the upper right corner of a form element:
- Click the ‘Copy to Clipboard’ icon. In Firefox, an animation showing a copy of the form element being moved to the Clipboard plays. For example:
A copy of the form element is now stored in the Clipboard and the Clipboard icon turns light blue to indicate it contains one or more items.To place
Pasting from the Interactive Forms Clipboard
- To paste a form element, handler, router or condition from the Clipboard in a form step in a form, click the Clipboard icon. Notice that as you hover the mouse over the Clipboard icon, a tool tip appears that informs you how many elements are currently on the Clipboard:
After you click the Clipboard icon, the contents of the Clipboard and the Clipboard menu display. For example:
- Select the form element from the menu item that you want to paste in the form. The form element will be placed after the last form element in the current step.
- To paste all elementsitems, select "Place all elements" from the menu.
- To empty the Clipboard, select "Empty clipboard" from the menu.
...