| Anchor | ||||
|---|---|---|---|---|
|
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.
| 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. |
Forms in XperienCentral are created using the Interactive Forms component. To open the Interactive Forms user interface, navigate to Configuration > Interactive Forms.
The Interactive Forms user interface consists of the following parts:
...
To create a new form, follow these steps, navigate to Forms > New.
The "Forms" interface consists of the following parts:
...
- 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
...
| Property | Description | ||
|---|---|---|---|
| Title | The text that appears next to the text input field in the step pane and in the form on the front-end. | ||
| Required field | Specifies whether the field is required. | ||
| Show title | Specifies whether to show the title of the form element in the step pane and in the form on the front-end. | ||
| Design template | Specifies the design template to use to render the form element on the front-end. 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. | ||
| Help text | In this field you can enter text that displays next to the form element in the form in order to provide useful information on what input is requested/expected. How/whether this text appears in the form is controlled by your presentation. | ||
| Extra text | This is extra text that you can show by a form element to provide extra guidance regarding what the expected input is. How/whether this text appears in the form is controlled by your design template. | ||
| Prefilling | Prefilling determines the initial value of this form element for the website visitor. Prefilling is further described in the section and Prefilling a Form Element. | ||
| Validations | Select one or more validator(s) to evaluate the input received by a form element in order to ensure that it conforms to the constraints you indicate. See the section Form Element Validations for complete information on using the validators. | ||
| 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 element presentation as a custom data attribute of the form element itself. The attribute name is data-fragment-tag. When filling out this property for a form element, the attribute is added to the presentation and can be used by external applications like GX Software's BlueConic. | ||
| Maximum length | Specifies the maximum number of characters that will be accepted for the Text, Password, Textarea, and Email form elements. | ||
| Width | Specifies the width of the input box for the Text, Number, Password, Textarea, and Email form elements. What the value represents (pixels, characters, etc.) is determined by your presentation. |
...
| Property | Description | ||
|---|---|---|---|
| Title | The text that appears next to the password input field in the step pane and in the form on the front-end. | ||
| Required field | Specifies whether the field is required. | ||
| Show title | Specifies whether to show the title of the form element in the step pane and in the form on the front-end. | ||
| Design template | Specifies the design template to use to render the form element on the front-end. 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. | ||
| Help text | In this field you can enter text that displays next to the form element in the form in order to provide useful information on what input is requested/expected. How/whether this text appears in the form is controlled by your presentation. | ||
| Extra text | This is extra text that you can show by a form element to provide extra guidance regarding what the expected input is. How/whether this text appears in the form is controlled by your design template. | ||
| Prefilling | Prefilling determines the initial value of this form element for the website visitor. Prefilling is further described in the section and Prefilling a Form Element. | ||
| Validations | Select one or more validator(s) to evaluate the input received by a form element in order to ensure that it conforms to the constraints you indicate. See the section Form Element Validations for complete information on using the validators. | ||
| 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 element presentation as a custom data attribute of the form element itself. The attribute name is data-fragment-tag. When filling out this property for a form element, the attribute is added to the presentation and can be used by external applications like GX Software's BlueConic. | ||
| Maximum length | Specifies the maximum number of characters that will be accepted for the Text, Password, Textarea, and Email form elements. | ||
| Width | Specifies the width of the input box for the Text, Number, Password, Textarea, and Email form elements. What the value represents (pixels, characters, etc.) is determined by your presentation. |
...
| Property | Description | ||
|---|---|---|---|
| Title | The text that appears next to the password input field in the step pane and in the form on the front-end. | ||
Show title | Specifies whether to show the title of the form element in the step pane and in the form on the front-end. | ||
| 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 element presentation as a custom data attribute of the form element itself. The attribute name is data-fragment-tag. When filling out this property for a form element, the attribute is added to the presentation and can be used by external applications like GX Software's BlueConic. |
...
| Property | Description | ||
|---|---|---|---|
| Title | The text that appears next to the password input field in the step pane and in the form on the front-end. | ||
| Show title | Specifies whether to show the title of the form element in the step pane and in the form on the front-end. | ||
| Design template | Specifies the design template to use to render the form element on the front-end. 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 element presentation as a custom data attribute of the form element itself. The attribute name is data-fragment-tag. When filling out this property for a form element, the attribute is added to the presentation and can be used by external applications like GX Software's BlueConic. |
...
...
Repeat Form Element
The Repeat form element repeats a form section the number of times selected by a website visitor. This is useful for a form that requests repeated information. The Repeat form element contains the following properties:
| Property | Description | ||
|---|---|---|---|
| Title | The text that appears next to the password input field in the step pane and in the form on the front-end. | ||
| Select Form Section | A drop-down list from which you can select the repeating form section. | ||
| Show title | Specifies whether to show the title of the form element in the step pane and in the form on the front-end. | ||
| Design template | Specifies the design template to use to render the form element on the front-end. 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 element presentation as a custom data attribute of the form element itself. The attribute name is data-fragment-tag. When filling out this property for a form element, the attribute is added to the presentation and can be used by external applications like GX Software's BlueConic. | ||
| Maximum number of repeats | For the Repeat form element, specify the maximum number of times the specified form section can be repeated. | ||
| Prefix for repeat | The text that will be prefixed to each repeat. This text will be visible for the website visitor. |
...
Next Button Form Element
The Next Button form element navigates website visitors to the following step in a form. If the Next Button is on the final step in a form, it essentially functions as a "Finish" button.
...
| Property | Description | |||||
|---|---|---|---|---|---|---|
| Title | The text that appears next to the password input field in the step pane and in the form on the front-end. | |||||
| Show title | Specifies whether to show the title of the form element in the step pane and in the form on the front-end. | |||||
| Design template | Specifies the design template to use to render the form element on the front-end. 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 element presentation as a custom data attribute of the form element itself. The attribute name is data-fragment-tag. When filling out this property for a form element, the attribute is added to the presentation and can be used by external applications like GX Software's BlueConic. |
...
...
Back Button Form Element
The Back Button form element navigates a website visitor to the step he was on before he entered the current step.
| 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 will be routed back to step 1 because at that point the history of visited steps is not available anymore. |
...
The "Back" button form element contains the following properties:
| Property | Description | ||
|---|---|---|---|
| Title | The text that appears next to the password input field in the step pane and in the form on the front-end. | ||
| Show title | Specifies whether to show the title of the form element in the step pane and in the form on the front-end. | ||
| Design template | Specifies the design template to use to render the form element on the front-end. 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 element presentation as a custom data attribute of the form element itself. The attribute name is data-fragment-tag. When filling out this property for a form element, the attribute is added to the presentation and can be used by external applications like GX Software's BlueConic. |
...
...
Paragraph Form Element
The Paragraph form element allows you to enter text in a form step. The text you enter can be instructional or provide other types of information regarding the interactive form the website visitor is filling in. The Paragraph form element contains the following properties:
| Property | Description | ||
|---|---|---|---|
| Title | The text that appears next to the text input field in the step pane and in the form on the front-end. | ||
| Required field | Specifies whether the field is required. | ||
| Show title | Specifies whether to show the title of the form element in the step pane and in the form on the front-end. | ||
| Design template | Specifies the design template to use to render the form element on the front-end. 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. | ||
| Help text | In this field you can enter text that displays next to the form element in the form in order to provide useful information on what input is requested/expected. How/whether this text appears in the form is controlled by your presentation. | ||
| Extra text | This is extra text that you can show by a form element to provide extra guidance regarding what the expected input is. How/whether this text appears in the form is controlled by your design template. | ||
| Prefilling | Prefilling determines the initial value of this form element for the website visitor. Prefilling is further described in the section and Prefilling a Form Element. | ||
| Validations | Select one or more validator(s) to evaluate the input received by a form element in order to ensure that it conforms to the constraints you indicate. See the section Form Element Validations for complete information on using the validators. | ||
| 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 element presentation as a custom data attribute of the form element itself. The attribute name is data-fragment-tag. When filling out this property for a form element, the attribute is added to the presentation and can be used by external applications like GX Software's BlueConic. |
...
...
Overview Form Element
The Overview form element summarizes in a table the form elements that appear in a step and the names of the subsequent steps. The Overview form element contains the following properties:
| Property | Description | ||
|---|---|---|---|
| Title | The text that appears next to the password input field in the step pane and in the form on the front-end. | ||
| Show title | Specifies whether to show the title of the form element in the step pane and in the form on the front-end. | ||
| Design template | Specifies the design template to use to render the form element on the front-end. 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 element presentation as a custom data attribute of the form element itself. The attribute name is data-fragment-tag. When filling out this property for a form element, the attribute is added to the presentation and can be used by external applications like GX Software's BlueConic. |
...
Using the Form Element Clipboard
...
- Hover the mouse over the "copy" icon in the upper right corner of a form element:
- Click the ‘Copy to Clipboard’ icon. In Internet Explorer, the Clipboard icon will fade out and in and will be presented in an ‘enabled’ state. 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. - To place a form element from the Clipboard in a 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 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 elements, select Place all elements from the menu.
- To empty the Clipboard, select Empty clipboard from the menu.