Creating Forms

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.

In This Topic

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.

The Interactive Forms user interface consists of the following parts:

The "Forms" menu contains commands for managing forms;

• Drop-down list for selecting the set language version of the form.
• The "Forms" pane where all forms and categories are shown.
• The categories in which forms are organized.
• The "Form Sections" pane where all the form sections and categories are shown.

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

1. Highlight "New Form" in the "Title" text box.
2. Enter a title for the form.
3. Click [Apply] or press <Alt-S>. Notice that the title of the form is now reflected in the "Forms" pane.

Adding Form Elements to a Step

Each step in a form contains one or more form elements. The form elements are the basis of the interface of the form with which the website visitor interacts. After initially creating a new form, the first step contains no form elements and is blank. Proceed as follows:

1. In the "Step Properties" section, highlight "Step 1" in the "Title" text box.
2. Enter a new title for the step.
3. Click [Apply] or press <Alt-S>. Notice that the title of the step is now reflected in the title of the step tab.

The construction of the interface of a form involves adding form elements to one or more steps. The "Step" pane provides a WYSIWYG overview of how the form elements will appear to the website visitor on the frontend of your website. That is, the order of the form elements as they appear in a step in the "Step" pane (from top to bottom) is exactly how they will appear in the actual form.

There are two ways to add a form element to a step:

• Clicking a form element icon. The form element clicked is always added as the bottom-most step in the form.
• Dragging a form element icon onto the "Step" frame. The form element is added to the form at the place where you drop it.

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.

When a form element is added to a step, the basic properties for the form element can be defined. For example, when you click on a Date form element in a step, its properties appear in the "Properties" section. By default, XperienCentral gives each form element the title "<step name> <Input x>" where x increases by a value of 1 each time a new form element is added. In almost all cases you should change the title of a form element to something meaningful if the titles are shown in the form on the frontend. Because of this default naming scheme, you may sometimes see that a new step added using drag and drop does not seem to have a logical digit. For example, if you add an eighth step between steps 3 and 4 using drag-and-drop, it is named "step 8" — this is nevertheless correct because it was the eighth step added to the form.

To show all properties for a form element, click the expand icon. The full set of properties then appears. Each of the standard form elements is described in the following sections. The frontend examples of how the form elements will look to website visitors will not appear exactly as shown because the presentation you will see is based on your corporate style.

Text Form Element

The Text form element is a field in a form where text can be entered. Use this element to allow website visitors to enter text, for example a first or last name, city, and so forth. A mix of numbers and letters are acceptable in a Text form element. The Text form element contains the following properties:

Number Form Element

The Number form element is a field in a form where numbers can be entered. As its name suggests, only integers are valid in this field. A decimal point is accepted but commas are not. If a website visitor enters text in a number field, an error message will appear indicating that the field contains invalid input. The Number form element contains the following properties:

Date Form Element

The Date form element allows a website visitor to select a date from a date picker. The Date form element contains the following properties:

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:

Text Area Form Element

The Textarea form element allows website visitors to enter multiple lines/paragraphs of text. The Textarea form element contains the following basic properties:

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

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:

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:

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:

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:

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:

The Column form element has the following properties:

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:

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 multiple 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:

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:

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.

By default the Next Button will navigate to the next Form Step as defined in the form. If the routing should be different, then this can be configured through "Handlers and Routers" (see Routers).

The Next Button form element contains the following properties:

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.

The "Back" button form element contains the following properties:

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:

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:

Back to top

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:

1. Hover the mouse over the "copy" icon in the upper right corner of a form element:
   
   
    
   
   
   
2. Click the ‘Copy to Clipboard’ icon. 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.

Pasting from the Interactive Forms Clipboard

1. To paste a form element, handler, router or condition from the Clipboard in a form step, 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:
   
   
   
   
   
   
   
2. Select the item that you want to paste in the form.
3. To paste all items, select "Place all elements" from the menu.
4. To empty the Clipboard, select "Empty clipboard" from the menu.

Back to top