Advanced Components

Webforms come with some complex components that require additional configuration.

To add an advanced component:

1. Navigate to the webform.

2. Click "Webform."

3. Type the name for a new date component in the text box.

4. Select the component type from the "Type" select box.

5. Click "Add."

6. Click "Save component."
   
   

The component types are as follows:

Date and Time

A date component accepts input from the learner in the form of a date.  

A date component accepts input from the learner in the form of a 12-hour format or a 24-hour military format.  

Fieldset

A fieldset can contain other fields. After adding a new fieldset:

1. Configure the additional options that are supported by Fieldset:
   "Collapsible" - If this fieldset is collapsible, the learner may open or close the fieldset by clicking it.
   "Collapsed by default" - Select this option to default the fieldset to "closed." The learner must click the fieldset to see the fields inside.

2. Click the "Save component" button to save the component.

3. Proceed to Reordering webform fields, where fields can be moved into the new fieldset.

Grid

A "grid" field asks the same options for multiple questions. After adding the grid component:

1. In the "options" text area, define a list of possible options. A "safe key" must be associated with each option. For example:
   bad|Bad
   good|Good
   excellent|Excellent

2. In the "questions" text area, define the questions that will be asked. A "safe key" must be associated with each question. For example:
   quality_of_material|How would you rate the quality of this material?
   knowledge_of_topic|How would you rate your knowledge of the topic?

3. Click "Save component."

Hidden

A hidden field stores a value that the learner cannot change. It should only be used in special cases, such as pulling information from a token and injecting it into a field. After adding a hidden component:

1. Unless otherwise specified, "Secure value" should be selected for the "Hidden type" option.

2. In the "Default value" field, a value may be entered that will show up on the webform results. For example, to see the last login date of the submitter in the webform results, enter this for the default value:
   User login time: [current-user:last-login:short]

3. Click "Save component."

When a learner completes the form and submits it, the learner's last login date will be stored with the form's results.

Markup

With the markup component, custom text can display (including HTML) to the learner at any point during the form. Note that the label does not display for markup components. After adding a markup component:

1. In the "Value" text area, enter text to display on the form.

2. Click "Save component."

Page break

A page break "field" can be used to distribute webform fields across multiple pages.

To change how multi-page webforms operate:

1. Click the "Webform" tab.

2. Click the "Form settings" sub tab.

3. Click the "Progress bar" heading.

4. Configure the progress bar behavior.

5. Click "Save configuration."

Select options

A select options component accepts input from the learner in the form of radio buttons, checkboxes, or a dropdown box. After adding a select options component:

1. In the "Options" text area, define a list of possible options. A "safe key" must be associated with each option. For example:
   bad|Bad
   good|Good
   excellent|Excellent

2. Click the "Save component" button to save the component.