4.8. Forms

If the Form and Form Section content types have been installed, you can create reusable online forms for your CMS. You can use forms to collect user information (such as name and address), and specify the action that will be taken when the user clicks the Submit button.

If different forms include duplicate pieces of information, such as name and address, you can create a Form Section. A Form Section lets you create and organize pieces of forms, or components, that you can reuse when creating forms. For example, creating a Form Section for contact information is useful for many types of forms, because you will typically always collect the same contact information such as name, address, phone number, and so on, in many forms you create.

For most widgets, you add information in Option Value/Option Label pairs. The value is the internal value that is analyzed. The label identifies the widget when the form is displayed to the user and is also passed through for analysis. You can use any value you like, but information is generally easier to analyze if the data is identical in both fields.

All widgets (or form elements) that will be visible to the user include a Name parameter. This prevents mistakes, because like items (such as checkboxes) are grouped together. For example, if you were to create a group of checkboxes without the same name, each option/value pair would be analyzed separately. The CMS prevents this from happening by requiring the name of the widget when you create it.

While there is no required order for entering information into the CMS, you have to add a form or form section to your CMS before you can add it to a content item.

4.8.1. Using Form Widgets

You can add the following widgets to a form and form section. Some of the widgets are standard HTML form elements, while others are custom form elements designed specifically for the CMS.

Checkbox group

Checkboxes allow the user to select multiple options. For example,to ask users to tell you how they contact your support department, you might include Telephone, Website, and Email, letting them select all that apply.

Data Driven Select Box

This custom form widget displays a list of all registered users or all installed packages. More data options may be added in the future.

Date field

This custom widget adds a date field to the form or form section. Use this when you want to add a date field for the user to fill in (for example, to specify when a subscription should start).

Hidden ID Generator field

This custom widget produces a hidden form field that is populated with a unique integer value every time the form is submitted.

Hidden field

Hidden fields are used most often with different scripting languages (such as Perl and PHP) to pass information to the server when the form is analyzed. For example, if you are creating a form that uses a script on your server to validate information, you might pass values to the script that could only come from your form. (This type of script is used to prevent hackers from using scripts to send spam.)

Multiple select box

Use this widget when you want a drop-down list with a minimum of four labels to be displayed on the screen. You can set the parameters so that users can select more than one value in this widget, which makes it very similar to checkboxes. However, a multiple select box uses less space on your form and can be used to help control the layout.

Up to four labels are displayed in a multiple select box. If you enter more than four label/option pairs, a drop-down arrow is displayed so that users can see the remaining entries. If you enter fewer than four label/option pairs, the remaining lines are blank in the list. In this case, you might want to use a Single Select Box, which allows multiple lines, but only displays one on the form.

Password field

While not a secure password entry field, this widget lets you add a password-entry field to your form. For example, you could add a password that track user logs into the website by saving the value entered here in the user's cookie file. The next time the user logs into the website, the password is typed into the password field. Passwords are displayed on the user's screen as a series of asterisks.

To add a secure password to the form, you must use a scripting language such as Perl or PHP.

Radio group

Radio groups let users select one option from a group. Once they select that option, they cannot select any others, unless they want to change their answer.

Single select box

Use this widget when you want a single-line drop-down list to be displayed on the screen.

To use more than one label/option pair, click the drop-down arrow so that users can see the remaining entries. If you are entering more than four label/option pairs, you might want to use a Multiple Select Box.

Submit button

Once users finish filling in the form, they must submit it to be analyzed. Typically, you add the Submit button at the bottom of the form, which will use the assigned action to process the form. Use the Actions authoring step to assign the action (confirmation email, simple email, templated email, URL redirect, or XML email). Refer to Section 4.8.2 Applying Form Actions.

Text area

Text area and text field widgets are similar in functionality, because they both let you add text boxes to your form where users can type information. They differ in size: text area lets you specify the number of lines of the text area, while a text field is only one line.

When adding a text area, you must also specify the width of the field (how many characters can be displayed on the screen) and the height (how many lines can be displayed). If the user adds more text than the text area can display, scroll bars are added so that they can view the rest.

Text field

A text field is a one-line text area.

When adding a text field, you must also specify the width of the field (how many characters can be displayed on the screen) and the length (how many characters the user can type into the field), up to 70 characters. To add a field that allows users to add more than 70 characters, use a text area. The user can use their arrow keys to see the text that is not displayed in the text box.

You must also specify the data type of the field. Refer to Section 4.8.3 Applying Data Types to Parameters.

4.8.2. Applying Form Actions

When you add a Submit button to a form, you can apply one of the following actions:

Confirmation email

A Confirmation Email is used to send a note to the user after they submit the form and can include links for follow-up information. For example, you would use a confirmation email to send a "thank you" note to the user for filling out your form. You specify who the email is from, the subject, and the body of the email.

Simple email

A Simple Email sends a notification to you or whoever you designate to indicate that a form was submitted. It includes a subject line (for example, "User Survey Completed") and the form data, specified as key-value pairs. For example, if the form requests the user's name, the simple email will include Name: Joe Bloggs. You specify who the email is to and the subject line.

Templated email

A Templated email sends an email that includes submitted values interpolated with the body text entered when the action was created. For example, if the administrator created an action with the body text of:

The user's name was ::form.title:: ::form.name:: and you can contact them at ::form.email::

The resulting email's body text is:

The user's name was Mr Joe Bloggs and you can contact them at [email protected]

URL redirect

After users click the Submit button, you can specify the page that is displayed in their browser window. For example, you can take them back to your homepage or you could take them to a special page that provides more information, such as a "thank you" message with links to more information.

XML email

An XML email sends an email formatted as an XML document to a designated recipient, typically a remote service that can process XML emails. The results would look something like this:

<form-data>
  <field type="java.lang.String">
    <key>name</key>
    <value>Joe Bloggs</value>
  </field>
  <field type="java.lang.String">
    <key>title</key>
    <value>Mr</value>
  </field>
  <field type="java.lang.String">
    <key>email</key>
    <value>[email protected]</value>
  </field>
</form-data> 

4.8.3. Applying Data Types to Parameters

When you are creating a text field in a form or form section, you can apply a data type. This information is used when the form is analyzed to verify that users entered the correct type of information.

Specify one of the following data types:

Single word

Users can enter one word. They receive an error message if they enter more than one word.

Single line

Users can enter more than one word.

E-mail address

Users must type an email address that includes the @ and a domain name, or an error message is displayed.

Whole number

Users must enter a whole number (integer).

Fractional number

Users can enter a number with a decimal point.

URL

Users must enter a URL, including protocol (http://) and domain name with a valid extension (.com, .net, .org, and so on).

4.8.4. Other Properties of Forms and Form Sections

When entering forms, you can also specify:

Answer Required

If users do not enter or select a value, an error message is displayed.

Default Value

Enter the value to be displayed in the field. Users can change this information when they use the form.

Height

Specify the number of lines to be displayed.

Label

Specify the field's description. This information is displayed on the form.

Max length

Specify the total number of characters that users can enter in the field. If they try to type more than that, an error message is displayed.

Value

For parameters that users can select, enter the value.

Width

Specify the width of the widget that is displayed on the screen. Width is not the same as length, which is the number of characters that the user can enter.

4.8.5. Basic Properties of Forms and Form Sections

The properties for forms and form sections are very similar.

PropertyDescription
Basic PropertiesName
 Title
 Description
ControlsForm Widgets. Refer to Section 4.8.1 Using Form Widgets.
 Form Section
ActionsRefer to Section 4.8.2 Applying Form Actions.
Assign categories 
Attach Files 

Table 4-16. Properties for Form

PropertyDescription
Parent Content TypeContentPage
Lifecycle 
Workflow 
Basic PropertiesName
 Title
 Description
ControlsForm Widgets. Refer to Section 4.8.1 Using Form Widgets.
ActionsRefer to Section 4.8.2 Applying Form Actions
Assign categories 
Attach Files 

Table 4-17. Properties for Form Section