Form Elements

Overview

Form elements are used to construct an LDP Form. Form elements can be added, configured, and deleted to create custom forms, polls, and surveys that web site visitors can complete. Email messages can be configured to send the contents of the form to a recipient by email. The results can also be saved to a database. The preview of a form includes a summary, the elements, and the XML used in the form. In order to create an LDP Form, LDP must first be activated.

For more information, visit the Assets & LDP page.

Eight elements are available to add to an LDP form and each has a unique functionality. These elements are explained on this page:

Adding form elements to an asset is accomplished either by dragging the element onto the Elements panel from the Elements toolbar, or by clicking the element's name or plus sign. Once the element has been added to the Elements panel, the text details can be added and it can be reordered by dragging it to the new location and dropping it into place.

Elements Toolbar & Panel

For an example of a created form, view the Form Example Image.

The numbered items on the image are explained below.

Form Elements

Single-Line Text Field

A single-line, text-field element provides users with one line on which to input data. Additionally, it can be used with the Advanced field attributes: legend, addclass, size, or fieldset to create specific elements. When used with legend, the default text that is entered is used to create text on a page, such as the title of the form or a disclaimer at the end of the form that does not include an input field. 

Elements Toolbar & Panel

How it appears when creating the form:

Elements Toolbar & Panel

Multi-Line Text Field

A multi-line text field element provides users with a multi-line text field in which to input data. It is similar to the single-line text field element, except that the input field can take more input and can be configured to appear larger. This is done with the use of the cols and rows attributes in the Advanced field.

Elements Toolbar & Panel

Elements Toolbar & Panel

Radio Buttons

Radio button elements allow users to create a form element with multiple, predefined items of which one and only one can be selected by the user. Click the Add button next to Items in order to add a radio button with text.

Form Radio Button Example

Elements Toolbar & Panel

 

For the Advanced field, dataset, addclass, and the fieldset attributes can be used with radio buttons.

Checkboxes

The Checkboxes element can be used to create a form element with multiple, predefined items of which none, one, or more than one can be selected by the user. Click the Add button next to Items in order to add each checkbox and define the text. Preselecting one or more checkbox items when creating or editing the form, will preselect the items on the published page also.

Checkboxes Example

Elements Toolbar & Panel

For the Advanced field, dataset, addclass, and the fieldset attributes can be used with radio buttons.

Note: If a checkbox element is made "required," then users filling out the form will have to select every checkbox item for the form to accept it as completed. Therefore, making a checkbox element required is not recommended.

Drop-Down

Drop-down form elements provide users with the ability to select an item from a list of pre-defined options using a drop-down style menu. Click the Add button to add each item.

Elements Toolbar & Panel

Drop-down Element

For the Advanced field, dataset, addclass, and the fieldset attributes can be used with radio buttons.

Multi-Select

The Multi-Select form element includes the ability to select multiple items using the keyboard shortcut (CTRL + click [PC]). 

Elements Toolbar & Panel

Multi-Select Element

For the Advanced field, dataset, addclass, and the fieldset attributes can be used with radio buttons. Predefined datasets may be added that automatically input items to be selected, and are defined in the XSL. For example, the dataset "state" is defined to input the fifty states of America.

Date/Time Picker

The Date/Time Picker element provides users with the ability to select a calender date and/or time of day, often utilized in situations such as purchasing tickets or selecting an attendance date.

Date-Time Picker

Date/Time Picker Element

The Format dropdown provides the option to toggle between a date and time picker, just date, and just time. The Default Date/Time field allows a default time to be displayed when the form loads.

Instructional Text

The Instructional Text element provides a mini WYSIWYG editor that allows for the configuration of text to be displayed in the form.

Instructional Text Element

 

Unlike other elements in the form, this element does not allow for data submission.

Element Attributes Reference 

Several of the attributes used for the form elements have the same functionality, no matter which element it is used within. The attributes defined with the form create the nodes in the XML and define what is presented to the user on the form.

The system removes the following five characters from the radio button, checkboxes, drop-down, and multi-select element entries when saving to the database: [ ] ‘ / \

Other characters such as the @ sign are allowed.

If the disallowed values are inserted into one of the elements, then it will not appear in the form, in the published form, or in the data that are returned.

Label and Name

Available and required for all elements.

By default, the Name field is populated by the value defined by the user in the Label field when adding the element to the form. However, the value of the Name field can be edited by the user, but only at the time of creating the element (before saving the form).

The Name field is limited to 32 characters and can include alpha-numeric characters, but cannot contain spaces or other ASCII characters. The value that is entered in the Label field is truncated within the Name field if it exceeds the 32 character limit and other disallowed characters are automatically removed. The Label itself can include more than 2,000 characters.

Elements Toolbar & Panel

The Name entry is automatically truncated by the system and the form data will break if any two elements have an identical name. Note that two elements can have different labels, but the name will get truncated to create the same value.

Helper Text

Available for all elements. The helper text provides text that will appear under the element in the form, and can be used to provide instructions to users on how to fill out that specific element. In fact, the image below is an example of both the Helper Text field and what helper text might look like in a form.

Helper Text

Items

Available for radio buttons, checkboxes, drop-downs, and multi-select elements. Click the Add button to add the option items as necessary and the label for each. For each element, one or more items (as appropriate) can be preselected for the form. When using a predefined data set in the Advanced field, it is not necessary to add each item individually. This is particularly useful for lengthy lists.

Elements Toolbar & Panel

Required and Required Failure Text

Required is available for all elements, while required failure text is available for single-line and multi-line elements.

Select the Required checkbox in order to compel the user to provide input for the element. The XSL applies a span with the class, required, and prepends an asterisk to the label. The styling for a required element can be modified where it is defined (CSS or XSL). Additionally, when selecting Required, the Required Failure Text field becomes available. Use this field to define the text that provides an error message for the visitor, if the field has not been completed correctly prior to submission.

Required Checkbox and Required Failure Text

Default Text

Optional. Available for single-line and multi-line elements.

Entering a value into the Default Text is optional. If a message is entered it is shown as the initial value for the form element. The message should contain a helpful tip or example of the desired entry format.

Required Checkbox and Required Failure Text

Validation and Additional Validation Messages

Defines a validation method for the element; default is No Validation. Selecting a specific validation method also provides one or more additional fields for further refinement of the validation to be used and for providing the failure text. The failure text can be used in order to give the user a hint about what is required. The options for the Validation field are as follows:

  • None
  • Email Address
  • Minimum Length
  • Regular Expression

Form with Regex Validation

Validation Type Description
None No validation performed, no extra fields.
E-Mail Address This validates the text to ensure that the entry is formatted like an email address. When this is choosen, an additional Failure Text field can be used to provide a message when the input fails validation. Makes the Failure Text field available. E-mail addresses are validated for the @ sign and dot-something.
Minimum Length This allows a number to be input to ensure that a minimum number of characters are included. When this is chosen, an additional Minimum Length field is used to specify the number and the Failure Text field can be used to provide a message when the input fails validation. Makes the Minimum Length/Failure Text field available. The minimum length is entered here as a number and can be 2 or greater.
Regular Expression This allows a regular expression to be input to ensure that the configuration of the input data is as desired. When this is chosen, an additional Validation Regex field is used to specify the regex and the Validation/Failure Text field can be used to provide a message when the input fails validation. For example, if the form requires the entry of the year of birth, it would be within the 1900s or 2000s. A regex that validates for this is: ^(19\d{2}|20[0-1]\d)$ Makes the Regex/Failure Text field available.

The following example shows a group of elements with submitted answers that did not meet the validation requirements.

Form with Regex Validation

This example shows the text that was defined in the Failure Text field with the site styling applied:

Form with Regex Validation

Advanced

Optional, but highly useful for defining and reusing frequently used data. It is available for all elements, but attributes are specific to elements. The Advanced field can be used with predefined attributes. For usage, reference, and examples of attributes, see the Advanced Field Elements topic.