Use the Dropdown Element to create attractive drop-down menus that visitors can easily navigate and select their desired answer from.


For a run-down of the most common options in the Design Panel, click on one of the options below to head to a guide:


In this article


Mapping

Under Mapping, you can map the options of your Dropdown Element to either an Attribute in your APSIS One account, or as a Form response which will be saved as Event Data.

For example, if you'd like to get to know which sport your customers are interested in, you could map the Dropdown Element to a Sports Attribute, and get an overview of whether they like to play tennis, baseball, or basketball. To read more about Attributes, head over to this article.

dropNew1.jpg

Select Attribute from the Data Type drop-down menu to map the Dropdown Element to an Attribute. If you would like to collect the visitors' answers to these options as Event data, select Form response only.

drop8.jpg

Under Option 1 and Option 2, enter the Attribute value for each option. When a visitor selects the option that corresponds with each option, the value you enter here will be added to their APSIS One Profile as a value for the Attribute.

If you choose Form response only, then the response will be saved as Event data.

If the visitor chooses more than one option, multiple values will be added as either an Attribute or Event data, separated by commas ( , ). For example: Sports equals "Tennis", "Baseball", "Basketball".

drop10.jpg

Add Option

Click the Add Option button below, if you'd like to add more options to your Dropdown Element.

drop9.jpg

Style

To manually adjust the style of your Dropdown Element, expand the Style drop-down.

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.

drop11.jpg

Use the color picker to choose a color for the various states of the Dropdown Element.

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.

You can also adjust the Width of the Dropdown Element by expanding the Width drop-down menu.

Select Fit for the Dropdown Element to automatically fit in the center of the Forms & Pages activity.

drop12.jpg

To manually adjust the width, select Fixed from the drop-down menu.

Enter the Width in pixels in the number box, or click, hold and drag the icon to the left to decrease and the right to increase the width in pixels.

drop13.jpg

Multi-Select

For visitors to choose multiple options from your Element, toggle Multi-Select on.

If the visitor chooses more than one option, multiple values will be added to the Attribute, separated by commas ( , ). For example: Sports equals "Tennis", "Baseball", "Basketball".

You can change the color of the options which are multi selected by entering the color code in the HEX box, or clicking on the color picker to select a color.

drop14.jpg

Required Field

Toggle the Required Field switch if this Element should be mandatory. If toggled on, visitors will not be able to submit your form without filling in this field.

check12.jpg

Font Color

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.

drop16.jpg

2. On the inline text editor, click on the color picker button for either the Unchecked or Checked text.

radio12.jpg

3. Use the color picker to choose a color that suits your activity.


Results

Here's a Dropdown Element mapped to different values for the Workshop Attribute.

And a Profile after submitting the Form, with a new Workshop Attribute...

And a Form - Submit Event!

Did this answer your question?