Dropdown

Standard HTML select tag with the following configuration tabs:

General

• Name: the name of the form component. This needs to be unique for each form. It can contain only alphanumeric chars. The name of the field is only used for internal reference - it will not be displayed in the front-end area.
• Caption: the caption or label is the text or HTML that is being displayed in the actual form.
• Items: The items of the dropdown should be specified one per line. This too, can incorporate custom scripts in between the code tags.

  The selectable items are composed out of two parts: value and label, separated by the pipeline character (|). For example:
  

  Steve Matt|Steve Matt, marketing director.
  Using this formula, the selection will display Steve Matt, marketing director, but Steve Matt will be stored into the database.

  You can even have an option selected by default, by using the [c] syntax. For example:
  

  Steve Matt|Steve Matt, marketing director[c]

  Or you can choose to disable a particular option, by using the [d] syntax. For example:
  

  Steve Matt|Steve Matt, marketing director[d]

  Select options can also be grouped. Usually the group title can't be selected. The group title should be marked with [g]. Example, on how the Items section will look like:

  • Group name[g]
  • item 1
  • item 2
  
  

  You can use the placeholder {field_name:text} in the Thank You message or Email messages(the value "field_name" should be replaced with the actual name of the field). The placeholder will return the label of the selection and not the actual value of the dropdown.

• Description: text/HTML area that provides a description of the field. This can be useful for providing explanations or indications for that particular field.

In some cases, the first dropdown item should not be allowed as a valid selection and invalidate the form when an user attempts to submit this form. The solution is quite simple, set the field to be required and type the label after the pipeline, for example (notice first item has no value):

• |Please select
• value1|item 1
• value2|item 2
• value3|item 3

Validations

• As a validation rule, this can only be set to be Required or not.
• Validation Message: text / HTML area that will allow you to set up a message that will be displayed if the field validation fails.

Attributes

The Attributes area allows you to add JavaScripts triggers, custom style (for that particular field), impose size restrictions, etc. Anything filled in this area, will be added directly to the HTML tag.

• Size: how many items will be displayed. By default this has an empty value - making it a drop-down element. If a size is specified, this will be displayed as a select list.
• Multiple: yes / no - if enabled, you will be able to have multiple selections by holding the CTRL or SHIFT keys
• Additional Attributes: as with other fiel types, you can use this area to customize the specific form element. For example:
  JavaScript: onchange="your_function();" - this will trigger a JavaScript function a selection will be made.
  CSS: style="width:200px" - the drop-down / select list will have a 200px width.
  Input property: disabled="disabled" - the field will be completely disabled. You will not be able to type in, and its value will not be submitted.

73 persons found this article helpful.

You Should Also Read