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.

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.

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.

In this section

Adding Form Elements to a Step
Using the Form Element Clipboard

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 front-end 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 front-end. 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 front-end 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.