Form: Dropdown element
Use the Dropdown Element to create attractive dropdown menus that visitors can easily navigate and select their desired answer from.
In This Article
Dropdown element
Place a Dropdown element into the Canvas and write a text for the headline and for the options directly in the Canvas.
Edit text with Inline text editor.
Font colour for Selected / Non-Selected
You may choose a different font color for when the dropdown text is, or is not, selected.
1. Click on the Dropdown element's text.
2. On the text editor, click the color picker arrow for either the Unchecked or Checked text.
3. Set colour with the colour picker, RGB or hex code.
Dropdown name
Fill out a Dropdown name at the top of the Design panel. The name is internal and will name the Row or Column in the Structure panel to the left.
Style alignment and margins
Style
Line or Box - toggle between Line and Box to choose whether you want your Dropdown element to be styled as text with a line underneath, or text inside a box.
Colour
Set colour for the various states of the Element, with hex code, RGB or colour picker.
Click the X icon next to the icon to make it transparent:
Inactive is a Dropdown element option that is not selected.
Active is a Dropdown element option that has been selected by the user.
Border is the color chosen for the border of the Dropdown element options.
Hover is the color of the options when in a hover state, or when the user's cursor passes over the option.
Width - adjust the width of the Dropdown element.
Fit or Fixed - select Fit to automatically fit the Element in the center of the Form.
Margins (padding) - max 100 pixels.
Alignment - align the element to the left, center or right.
Clone - to copy Element, select Element in the Canvas and click Clone.
Activate Required field if the field is mandatory. If toggled on, visitors will not be able to submit your form without filling out this field.
💡 Tip! The design options work interactively. To change style and margin measurements, hold on to the icon and drag left and right to increase and decrease number of pixels. The sizes will change accordingly in the Canvas!
Mapping
Open the Mapping section on the right. This is where you set the values that will be stored on the Profile that fills out the Form.
1. In the Data type dropdown menu, select how to store the responses. Select Attribute to save the visitors' answers as value for their Profile Attributes.
Select Form response only if you would like to collect the answers as Event data.
2. Add Option values in the Mapping section. Fill out the values under Option 1, Option 2, Option 3 etc. The value you enter here will be added to their Profile as a value for the Attribute (or Event data), when they select the corresponding dropdown option in the form.
Activate the Add multiple feature to paste in many options at once.
Multi-select
For visitors to choose multiple options from your Element, activate Multi-select.
If the visitor chooses more than one option, multiple values will be added to the Attribute, separated by commas ( , ). For example: Sports equals "Tennis", "Gymnastics", "Basketball".
You can change the color of the options which are multi selected. Use hex code, RGB or the colour picker.
Results: Populated Profile
Let's have a look at the result!
This is how the responses are stored in Audience when mapped as "Attribute" versus as "Form response only". In this example the Dropdown element collects how visitors want to join the workshop.
Stored as Attribute
Here, a Dropdown element is mapped to different values for the Workshop Attribute.
This is a Profile view in Audience of a Profile who have submitted the Form, with a new value for Workshop Attribute.
Stored as Form response only
If the Dropdown element instead is mapped to Form response only, the value (Workshop) is saved as Event data. This data is found in Profile view under Form & Page Interactions. Click the Submit activity in the timeline.
