A Combo box
Component lets you display a drop-down list in the form, from where the
contact can select a value from a list. This can be used to
select a country of origin, or the preferred network from a predefined
list of social networks. A combo box is most often used when the
list of possible options is rather long.
When adding a Combo box Component to the form, the following code is added:
A <select> tag is added together with the <option> tag. The ID of the <select> tag is used to identify the component in the list of available components on the right.
Technical Note: When a Combo box Component is added and no form tag is available yet, the system will create the form tag automatically.
The attributes of the <select> tag are completed automatically when the properties are defined.
Combo box properties
Name —
Specify the name of the Combo box Component. This is used to retrieve the
posted value for that combo box. A drop-down list holds all the fields
in the Audience List and linked lists. Select the field that corresponds
to your combo box field (e.g., SUBSCRIBE_SOURCE). In the source code,
after selecting a field there, the following is added:
"[%loadValue(requestValue('SUBSCRIBE_SOURCE'),'SUBSCRIBE_SOURCE','')%]".
A the same time, the Default Value property
is also filled out with this same function.
Default value — The default value displayed in
the combo box field. The Default value property is automatically filled
out after a profile field has been selected for the Name property and
holds the following code:
[%loadValue(requestValue('SUBSCRIBE_SOURCE'),'SUBSCRIBE_SOURCE','')%].
This implies that, when returning to the form after it has been posted
with errors, the posted value will be displayed in the form as the default value for the field SUBSCRIBE_SOURCE,
and if not available, the database value for that field. If neither of
those are available, the form field is left blank.
Multilingual properties
All translatable fields are listed in this section. To define the value in a different language, select the language from the drop-down in the toolbar and enter the translated value.
Label — The label of the Combo box field.
Placeholder text — The default text displayed in the field.
Value - Text — Specify the different values available in the drop-down list of the Combo box. The value is what is stored in the database and is the same for all languages. The text is what is displayed in the drop-down list and can be translated.
Validation rules
Validation rules — These rules validate the posted value and display an error message when validation fails. When multiple rules are defined and more than one fails validation, all the corresponding messages are listed. The validation options differ depending on the type of field.
Click the pencil icon to create a new rule. A dialog is displayed.
The validation rule lets you check if at least one option is selected. The text entered as error message is displayed when validation fails.
When the page is created in multiple languages, the message text for the other languages can be entered straight in this dialog, after selecting the language from the menu:
When done setting the validation rules, click Apply. The rules are now listed in the Validation rules section in the Field properties panel. Clicking a rule will take you straight to the Validation rules dialog where you can make the necessary changes.
Note: When you create or update form validation rules on a page that is already being used inside one or more journeys, those journeys must be published for the changes to take effect.
Copy Combo box Component content to other languages
By default, when adding new Content Components to a message, only the structure of the component is copied automatically to other languages. However, using the function copy content to other languages, you can now copy the component with its content to one or more languages.
This option is available once the component is placed onto the message and multiple languages have been defined for the message.
Click the button Copy content to other languages in the component properties.
A dialog is displayed in which the target languages can be selected.
