Learning about Forms: Form Components

Learning about Forms: Form Components

Learning about Forms: Form Components

Form Component Types

Date | E-mail | Fieldset | File | Grid | Hidden | Markup | Number | Page Break | Select Options | Textarea | Textfield | Time

Date

Provides month, day and year drop-down fields, as well as a pop-up calendar, for date input.

Example of Date form component

E-mail

Provides a field for e-mail address input, and validates the submitted value is an e-mail address. 

Example of E-mail form component

Back to top

Fieldset

Used for grouping form components; use the drag-and-drop handle to arrange components that are part of the group as child items of the fieldset.

File

Provides a file upload for attaching files to form submissions.

Grid

Provides a grid formatted field for radio button (single selection) or check box (multiple selection) input. Questions are formatted as rows, and responses are formatted as columns. All questions in the grid component have the same options for a response. Create separate grid components for differents sets of responses.

Back to top

Hidden

Provides a hidden field for internal content entry. Label and text in hidden field will not be displayed on the webform, but will be included in the data saved. A Hidden field does not provide for any input by the webform submitter. 

Markup

Provides a field for content entry by the form creator. Content in the markup field will be displayed on the webform. Markup fields are typically used for text, links, or images to be displayed within the webform components - i.e. for additional instructions. A Markup field does not provide for any input by the webform submitter. 

Number

Provides a field for number input.  

Page Break

Provides a field for number input.  

Back to top

Select Options

Provides a select field for text input. Radio buttons are provided for single value selection. Check boxes and list boxes are provided for multiple value selection. 

Radio buttons:            

List Box:

KNOWN BUG for Select Options: Double Label display (the question appears twice)

All Select Options form components will display the label twice (the label is the name of the form component). To avoid the duplicate display of the label, follow the instructions below to enable the workaround: 
  1. From the Form Components tab of your webform, Edit the form component label so that the Label Display is now set to None rather than it's default setting: Above. This will remove the label entirely (removing the duplication, too).
  2. Then, create the form component type, Markup, with the same title as the original form component ("How did you hear about us?"), but the form key must differ to avoid duplication of form keys.
    1. After adding a label name and unique form key to this Markup form component, this is the step where you change the text editor from WYSIWYG to Full HTML.
    2. In order to get it to still look like a label, and, more importantly, read as a label by the browser, you would use the following (w/ the red text being required and the green text being your customizable text): 
      1. <label>Component Label<span class="form-required">*</span></label>
        1. The HTML text above is for a required field. If your Markup/Select Options is not a required question, remove this portion before pasting into your text editor: 

          <span class="form-required">*</span>

      2. You can also add a description below, for example:
        <label>Component Label <span class="form-required">*</span></label>
        <p class="description">Description</p>

Back to top

Textarea

Provides a field for number input.  

Example of Text area form component

Textfield

Provides a field for number input.  

Example of Textfield form component

Time

Provides a field for number input.  

Example of Time form component

Back to top

MyLO FAQ Category: