Various Form Modules
This section provides the detailed description of the following Form modules:
Form Container
The Form Container is a container module that can contain various form fields and controllers. You can drag and drop the Form Fields modules into the Form Container module to create a form. The Form Container also provides a default submit button at the end of the module.
While configuring the Form Container module, the main tasks include:
- Defining a location to store the form data
- Styling Content
- Setting Analytical Parameters
- Configuring Form Field modules
Prerequisites
Before you begin to use the Form Container module, you must know the following:
- The form layout that you want to create.
- The form fields and controllers that you want to use in this module.
The data collected by the form can be posted on Google docs or to an external URL.
As a mobile site producer, you may require feedback from mobile users about various sites, products or services. It also helps you to build forms with a variety of fields and control options with the Form Container module.
The Form Container module enables you to build the following kinds of forms:
- Contact Us
- Questionnaires
- Surveys
- Sweepstakes
- Feedback
- Callback Pages (executable code that is passed as a parameter to other code)
The module offers the following use cases:
- Build custom forms for collecting structured responses from users
- Collect aggregated form data
- Place in advertisement landing pages to collect the consumer information.
Configuring the Form Container Module
To configure the Form Container module, perform the following steps:
Step 1 In the Modules panel, enter Form Container. The Form Container module appears in the Modules panel.
Step 2 Drag and drop the Form Container module into the Canvas.
Step 3 Drag and drop the Form Field modules into the Form Container module to build appropriate fields and controls for the mobile form.
Step 4 In the edit panel of the each Form Field module, specify the required values in the respective fields, and click Save.
Step 5 In the Edit panel of the Form Container module, specify the required values in the respective fields.
Step 6 Click Save.
Step 7 Click Preview to view the form you have created.
Note If the form container is empty and does not have any form field modules, it will not appear on the mobile web page.The Form Container Module displays the form only when the necessary Form Field modules are configured in the Form Container module.
The Form Container module enables you to:
- Provide a Campaign Name
- Provide a Form ID
- Send form data to E-mail/URL
- Select Time Zone
Form Field Modules
The following are the Form Field modules that can be used in the Form Container module:
Form Container Properties
Main Properties
The M ain properties enable you to specify the basic properties of the module. The following is the list of Form Container Main properties.
Main Properties
|
|
Campaign Name |
An appropriate name in the Campaign Name field. The name you specify is used to identify the campaign in the database. Note If this field is left blank, an error message 'Form Container: Module not configured' appears on the canvas area. |
Form ID |
A unique ID in the Form ID field to identify the form in the database. This property is mandatory. By default, all forms are stored in the Cisco database under auto generated IDs. This property enables you to specify an ID for each form. In case, multiple forms are part of one campaign, the ID helps you identify a form. |
Send form data to E-mail |
To send the form data to an e-mail ID. |
Sender’s E-mail Id |
The e-mail ID to which the data is to be sent. |
E-mail Id |
The e-mail ID from which the data is to be sent. |
Post form data to external URL |
To post data to a external URL. |
External Post URL address |
The external URL address to which the data is to be posted. |
Expire Form on Specific Date |
To expire the form on a specific date. |
Expiry Date for the form |
The expiry date for the form under Expiry Date for the form field. This field is optional. The form automatically expires on the mentioned date. Note An expired form shows a message that indicates the form has expired. |
Select Time zone |
The time zone required. The form expiry date is based on the time zone you select. |
After form submission navigate to URL |
To lead the user to a URL after the form submission. |
Enter URL |
The URL to which the user to be led after form submission. You can also search for a URL by clicking the Browse button available in this field. This URL can be internal or external. |
Show captcha |
To show captcha. |
Background Properties
The Background properties enable you to specify the background properties of the form container. The following is the list of Form Container Background properties.
Background Properties
|
|
Background Color |
The background color for the module. |
Background image options |
Add background image (Touch)— To add image as background for touch mode. You can upload the image using the Upload Image button. Add background image (Non-touch)— To add image as background for non-touch mode. You can upload the image using the Upload Image button. Repeat Horizontally Only— To repeat the background image horizontally only. Use CSS gradient for background (Touch)— To use CSS gradient for background. |
Background gradient color (Top) (Touch) |
The background gradient color at the top for touch mode. |
Background gradient color (Bottom) (Touch) |
The background gradient color at bottom for touch mode. |
Border Properties
The Border properties enable you to specify the border properties for this module. The following is the list of Form Container Border properties..
Border Properties
|
|
Border Color |
The border color for the Form Container. |
Stroke Weight (px) |
The thickness for the border. |
Rounded corners (Px) (Touch) |
The rounded corner effect for the border. |
Corner-radius (Px) (Touch) |
The radius value for rounded corners for touch devices. |
Padding and Margin Properties
The Padding and Margin properties enable you to specify the padding and margin values. The following is the list of Form Container Padding and Margin properties.
Padding and Margin Properties
|
|
Padding (Px) (Touch) |
The space that you want to leave between the content and the module boundary for touch mode. |
Padding (Px) (Non-touch) |
The space that you want to leave between the content and the module boundary for non-touch mode. |
Margin (Px) (Touch) |
The space between the module boundary and the sides of device screen for touch mode. |
Margin (Px) (Non-touch) |
The space between the module boundary and the sides of device screen for non-touch mode. |
Form Checkbox
The Form Checkbox module enables you to add check boxes to the form created using the Form Container.
Main Properties
The Main properties enable you to specify the check box properties. The following is the list of Form Checkbox Main properties.
Main Properties
|
|
Checkboxes label |
The label for the checkboxes. The default is “Select option”. |
Unique Form Field ID (Used as XML Tag) |
The unique ID that can be used to identify the set of check boxes, which the user uses to provide input data into the form. This property is optional. By default, an ID is auto-generated for the check box set. However, you can specify an ID of your choice, if you submit the data to an external database or while generating the XML output of form data. |
Add Checkbox |
To add additional check boxes on the form and specify the text for each checkbox. By default, the module provides three check boxes. |
Make this Field Mandatory |
To make check boxes mandatory fields for the user. |
Form Country Select
The Form Country Select module enables you to add the country select option to the form created using the Form Container module.
Form Country Select Properties
Main Properties
The Main properties enable you to specify the basic module details. The following is the list of Form Country Select Main properties.
Main Properties
|
|
Dropdown - country label |
The label for the drop-down list of countries. |
Unique Form ID (Used as XML Tag) |
The unique ID that can be used to identify the drop-down that the user uses to provide input data into the form. This property is optional. By default, an ID is auto-generated for the drop-down. However, you can specify an ID of your choice, if you submit the data to an external database or while generating the XML output of form data. |
Default Text in Dropdown _ country |
The default text that appears above the list of countries in the drop-down area. The default text the module displays is “ Select”. |
Populate dropdown list with |
The details of the countries that must appear in the drop-down list.
- Default list of countries—Displays the default list of countries. This list is only visible in runtime.
- Custom list of countries— Displays the custom list of countries. You can create the custom list of countries using the Add Country button.
|
Add Country |
To add the name of a country to the list. |
Alphabetically sort links (only applicable in runtime) |
To sort the country list alphabetically in runtime. |
Make this field Mandatory |
To make this field mandatory for the user. |
Form Date Selector
The Form Date Selector module enables you to add a Date Selector option to a form created using the Form Container module.
Form Date Selector Properties
Main Properties
The Main properties enable you to specify the basic date selector details. The following is the list of Form Date Selector Main properties.
Main Properties
|
|
Select Language |
The language in which the month is to be displayed. Language support applies only for names of the month. |
Date Selector label |
The label for the text area on the form. The default is “ Choose date”. |
Unique Form Field ID (Used as XML Tag) |
The unique ID that can be used to identify the date selector, which the user uses to input date into the form. This property is optional. By default, an ID is auto-generated for the text area. However, you can specify an ID of your choice if you submit the data to an external database or while generating the XML output of form data. |
Select Time Zone |
The time zone required. |
Layout Properties
The Layout properties enable you to specify the layout details. The following is the list of Form Date Selector Layout properties.
Layout Properties
|
|
Choose layout |
The appropriate layout for touch and non-touch devices. Date selection dropdown—The Date selection drop-down displays on both touch and non-touch devices. Date picker calendar (Touch only)—The Date picker displays only on touch devices. |
Date Range Properties
The Date Range properties enable you to specify the date range details. The following is the list of Form Date Selector Date Range properties.
Date Range Properties
|
|
Choose type of date range applicable for displaying dates in dropdown/calendar |
The type of date range applicable for displaying dates in drop-down and calendar. The options available are:
- Relative date range
- Fixed date range
By default, “ Relative date range” is selected. |
Relative date range options |
The expected dates under Before today's date and After today's date, in the years, months, and days fields. |
Fixed date range options |
The expected dates under From and To, in the years, months, and days fields. |
Form Dropdown
The Form Drop-down module enables you to add a drop-down option to a form created using the Form Container.
Main Properties
The Main properties enable you to specify the drop-down details. The following is the list of Form Dropdown Main properties.
Main Properties
|
|
Dropdown label |
The name that you want to use for the drop-down list. If no name is specified, the drop-down automatically occupies the space meant for the drop-down label. |
Unique Form Field ID (Used as XML Tag) |
The unique ID that can be used to identify the drop-down that the user uses to provide input data. This field is optional. By default, an ID is auto-generated for the drop-down. However, you can specify an ID of your choice, if you submit the data to an external database or while generating the XML output of form data. |
Default Text in Dropdown |
The default text for drop-down. |
Add Option |
To add additional option fields and to specify the text you want to display for each option. By default, the module provides three option fields. |
Make this field Mandatory |
To make the drop-down a mandatory field for the user. |
Form Email Field
The Form Email Field module enables you to add an e-mail field to a form created using the Form Container.
Form Email Field Properties
Main Properties
The Main properties enable you to specify the e-mail field details The following is the list of Form Email Field Main properties.
Main Properties
|
|
Email Field label |
The label for the E-mail field. |
Unique Form Field ID (Used as XML Tag) |
The unique ID that can be used to identify the E-mail field, which the user uses to provide input data into the form. This property is optional. By default, an ID is auto-generated for the field. However, you can specify an ID of your choice, if you submit the data to an external database or while generating the XML output of form data. |
Make this field Mandatory |
To make the E-mail field mandatory for the user. |
Form Phone Field
The Form Phone Field module enables you to add a phone field to a form created using the Form Container module.
Form Phone Field Properties
Main Properties
The Main properties enable you to specify the phone field details. The following is the list of Form Phone Field Main properties.
Main Properties
|
|
Phone field label |
The label for the phone field. |
Unique Form Field ID (Used as XML Tag) |
The unique ID that can be used to identify the phone field, which the user uses to provide input data into the form. This property is optional. By default, an ID is auto-generated for the field. However, you can specify an ID of your choice, if you submit the data to an external database or while generating the XML output of form data. |
Make this field Mandatory |
To make the phone field mandatory for the user. |
Form Radio Button
The Form Radio button module enables you to add a radio button option to a form created using the Form Container module.
Form Radio Button Properties
Main Properties
The main properties enable you to specify the radio button details. The following is the list of Form Radio Button Main properties.
Main Properties
|
|
Radio buttons label |
A label for the set of radio buttons you want to add to the form. The default is “Select option”. |
Unique Form Field ID (Used as XML Tag) |
The unique ID that can be used to identify the set of radio buttons, which the user uses to input data into the form. This property is optional. By default, an ID is auto-generated for the radio buttons. However, you can specify an ID of your choice, if you submit the data to an external database or while generating the XML output of form data. |
+ Add radio button |
To add additional radio buttons to the form and specify the text for each. By default, the module provides three radio buttons. |
Make this Field Mandatory |
To make the radio buttons field mandatory field for the user. |
Form TextArea
The Form TextArea module enables you to add a text area to a form created using the Form Container.
Main Properties
The main properties enable you to specify the text area details. The following is the list of Form Textarea Main properties.
Main Properties
|
|
Text area label |
The label for the text area on the form. The default is “Enter details”. |
Unique Form Field ID (Used as XML Tag) |
The unique ID to identify the Text Area field that the user uses to provide input text into the form. This property is optional. By default, an ID is auto-generated for the text area. However, you can specify an ID of your choice, if you submit the data to an external database or while generating the XML output of form data. |
Make this Field Mandatory |
To make the Text Area field a mandatory field for the user. |
Minimum Characters |
The minimum number of characters that the user must enter in the text field for the input text to be accepted by the form. |
Maximum Characters |
The maximum number of characters the user can provide input in the field. The maximum number of characters that the user can type in the Text Area is 300. |
Form Text Field
The Form Text Field module enables you to add a text field to a form created using the Form Container.
Form Text Field Properties
Main Properties
The Main properties enable you to specify the text field details. The following is the list of Form Text Field Main properties.
Main Properties
|
|
Text field label |
The label for the Text field that you want to add to the form. The default is “ Enter details”. |
Unique Form Field ID (Used as XML Tag) |
The unique ID for the Text field that can be used to identify the text field that the user uses to provide input data in the form. This property is optional. By default, an ID is auto-generated for the field. However, you can specify an ID of your choice, if you submit the data to an external database or while generating the XML output of form data. |
Make this field Mandatory |
To make the text field mandatory for the user. |
Minimum Characters |
The minimum number of characters that the end user should enter as input data to be accepted by the form. This helps you create fields such as login fields. |
Maximum Characters |
The maximum number of characters that the user can provide as input in the text field. |
Allowed Characters |
To specify the type of characters that the users are allowed to enter in the field. |
Form URL Field
The Form URL Field module enables you to add a URL field to a form created using the Form Container.
Form URL Field Properties
Main Properties
The main properties enable you to specify the URL field details.. The following is the list of Form URL Field Main properties.
Main Properties
|
|
URL field label |
The text that represents the URL field. The default is “ Website ”. |
Unique Form Field ID (Used as XML Tag) |
The unique ID that can be used to identify the URL field, which the user uses to provide input data in the form. This property is optional. By default, an ID is auto-generated for the field. However, you can specify an ID of your choice if you submit the data to an external database or while generating the XML output of form data. |
Add Checkbox |
To add additional check boxes on the form and to specify the text for each check box. By default, the module provides three check boxes. |
Make this Field Mandatory |
To make the URL field mandatory on the form. |
Validation Messages Properties
The Validation Messages properties enable you to specify the validation error messages for the URL. The following is the list of Form URL Field Validation Message properties.
Validation Messages Properties
|
|
URL validation Error Message |
The error message to be shown if the URL is invalid. |