...
Forms in XperienCentral are created using the Interactive Forms component. To open the Interactive Forms user interface, navigate to Configuration >Interactive > Interactive Forms.
The Interactive Forms user interface consists of the following parts:
The "Forms" menu contains commands for managing forms;
...
| Property | Description |
|---|---|
| Title | The text that appears next to the date field in the step pane and in the form on the frontend. |
| 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 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. Note: GX highly recommends that all form fragment identifiers be unique. |
| Precondition | The precondition decides in what situations the form element will show for to the website visitor. The precondition is further described in the section Form Element Precondition. |
| 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 is expected input. 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. |
...
Password Form Element
The Password form element allows website visitors to enter a password. The entry is masked for privacy. The Password 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 frontend. |
| 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 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. Note: GX highly recommends that all form fragment identifiers be unique. |
| Precondition | The precondition decides in what situations the form element will show for to the website visitor. The precondition is further described in the section Form Element Precondition. |
| 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 is expected input. 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. |
...
...
Text Area Form Element
...
| Property | Description |
|---|---|
| Title | The text that appears next to the password input field in the step pane and in the form on the frontend. |
| 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 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. Note: GX highly recommends that all form fragment identifiers be unique. |
| Precondition | The precondition decides in what situations the form element will show for to the website visitor. The precondition is further described in the section Form Element Precondition. |
| 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 is expected input. 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. |
| Height | Specifies the height of the input box for the Textarea element. What the value represents (pixels, characters, etc.) is determined by your presentation. |
...
Radio Form Element
The Radio form element allows the website visitor to choose an item from a list by selecting the radio button next to their choice — With this form element only one item can be selected. The radio 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 frontend. |
| Required field | Specifies whether the field is required. |
| Identifiers | Special identifiers that can be saved to the form session and in form logic (JavaScript). See Scripting in Forms for complete information on using identifiers. Click here for information about renaming an identifier. |
| Choice 1 | The text that will appear next to the first radio button choice. |
| Choice 2 | The text that will appear next to the second radio button choice. |
| Add item | Allows you to add additional items to the list presented to the website visitor. |
| 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 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. Note: GX highly recommends that all form fragment identifiers be unique. |
| Precondition | The precondition decides in what situations the form element will show for to the website visitor. The precondition is further described in the section Form Element Precondition. |
| 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 is expected input. 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. |
...
Checkbox Form Element
The Checkbox form element allows the website visitor to select one or more items from a list. The Checkbox 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 frontend. |
| Required field | Specifies whether the field is required. |
| Identifiers | Special identifiers that can be saved to the form session and in form logic (JavaScript). See Scripting in Forms for complete information on using identifiers. Click here for information about renaming an identifier. |
| Option 1 | The text that will appear next to the first checkbox choice. |
| Option 2 | The text that will appear next to the checkbox radio button choice. |
| Add item | Allows you to add additional items to the list presented to the website visitor. |
| 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 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. Note: GX highly recommends that all form fragment identifiers be unique. |
| Precondition | The precondition decides in what situations the form element will show for to the website visitor. The precondition is further described in the section Form Element Precondition. |
| 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 is expected input. 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. |
...
Drop-down Form Element
The Drop-down form element allows the website visitor to select an item from a drop-down list. The Drop-down form element contains the following basic properties:
| Property | Description |
|---|---|
| Title | The text that appears next to the password input field in the step pane and in the form on the frontend. |
| Required field | Specifies whether the field is required. |
| Identifiers | Special identifiers that can be saved to the form session and in form logic (JavaScript). See Scripting in Forms for complete information on using identifiers. |
| Choice 1 | The text that will appear next to the first checkbox choice. |
| Choice 2 | The text that will appear next to the checkbox radio button choice. |
| Add item | Allows you to add additional items to the list presented to the website visitor. |
| 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 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. Note: GX highly recommends that all form fragment identifiers be unique. |
| Precondition | The precondition decides in what situations the form element will show for to the website visitor. The precondition is further described in the section Form Element Precondition. |
| 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 is expected input. 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. |
...
Upload Form Element
The Upload form element allows a website visitor to upload a file from their local computer or network to your website. The Upload form element contains the following properties:
...
- The directories where uploads may be stored must first be configured in the Setup Tool. By default, no valid file upload directories are configured. See file_upload_valid_directories for more information.
- By default, the Upload File element has the Check File Type and Check File Extension validations assigned to it. These cannot be removed and for security reasons, GX strongly recommends that you fill in the valid fields for these validations.
...
E-mail Form Element
The E-mail form element allows a website visitor to enter their e-mail address. The E-mail 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 frontend. |
| 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 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. Note: GX highly recommends that all form fragment identifiers be unique. |
| Precondition | The precondition decides in what situations the form element will show for to the website visitor. The precondition is further described in the section Form Element Precondition. |
| 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 is expected input. 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. |
...
Columns Form Element
By default, form elements appear in a step stacked one on top of the other, from top to bottom. The Columns form element allows you to place (and display) form elements side by side:
...
To add form elements to a column, you must first add the elements to the form and the use drag and drop to place them in the Columns form element.
...
Section Form Element
The Section form element is a container into which you can place two or more elements. This makes it possible to create groupings of form elements that you can easily move from one part of a step to another in one action. The idea is similar to a Form Section except that it cannot be reused in more than one step or form.
The Section 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 frontend. |
| 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. Note: GX highly recommends that all form fragment identifiers be unique. |
| Precondition | The precondition decides in what situations the form element will show for to the website visitor. The precondition is further described in the section Form Element Precondition. |
| 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. |
...
Form Section Element
Use the Form Section element to insert a form section into a form. A form section is a sub-form that you can reuse in two or more forms. This is especially useful when you have several forms that differ slightly from each other but still contain an identical group of form elements. Creating and managing form sections is described in the section Form sections. The Section 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 frontend. |
| 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 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. Note: GX highly recommends that all form fragment identifiers be unique. |
| Precondition | The precondition decides in what situations the form element will show for to the website visitor. The precondition is further described in the section Form Element Precondition. |
| 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 frontend. |
| 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 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. Note: GX highly recommends that all form fragment identifiers be unique. |
| Precondition | The precondition decides in what situations the form element will show for to the website visitor. The precondition is further described in the section Form Element Precondition. |
| 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 frontend. |
| 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 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. Note: GX highly recommends that all form fragment identifiers be unique. |
| Precondition | The precondition decides in what situations the form element will show for to the website visitor. The precondition is further described in the section Form Element Precondition. |
| 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.
...
| 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 front-end. |
| 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. Note: GX highly recommends that all form fragment identifiers be unique. |
| Precondition | The precondition decides in what situations the form element will show for to the website visitor. The precondition is further described in the section Form Element Precondition. |
| 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:
...