Enhance Your Forms with Customizable Multiselect Dropdowns

The Stylable Multiselect Dropdown extension lets users pick multiple options from a dropdown and displays their selections as styled buttons. This article explains how to configure the extension and customize its appearance to match your form.

What you’ll learn

• How to configure the multiselect dropdown and its paired button element
• How to customize hover, selection, and text colors using metadata
• How to style the multiselect input to match your other form fields using CSS

What Does This Extension Solve?

This extension solves the issue of basic dropdown limitations. It enables users to select multiple items from a dropdown and dynamically display their selected options as styled buttons. This gives you the freedom to create a more interactive and visually appealing selection experience for your users.

How to Configure your Multiselect Dropdown

1. Add the Dropdown:
   • Add a new Custom Field with Type = Dropdown to your form and configure its dropdown options as needed
   • On the dropdown field, add Field Metadata 
     multiselect : <any value you’d like>
     • The value can be anything that you’d like, e.g., “dropdown_options”
     • If you have multiple dropdowns on the same page that will be multiselect, give each one its own unique value
2. Add a Button Element to the page:
   • To display the selected options, the page will use an invisible button element
   • Add a new button element and place it anywhere on the page – It will not be visible to end users
   • On the button, add metadata 
     multiselect_selections : <the same value as the dropdown> 
     • The value for this metadata will be the same value that was configured in the dropdown metadata in step one; If your dropdown has the metadata multiselect : dropdown_options, then your button will have the metadata multiselect_selections : dropdown_options

And that’s it, your multiselect dropdown is now all set. If you preview the campaign, you’ll be able to see it in action!

Customize Styles

To add further customization to the dropdown, you can add the below metadata to the dropdown field. The value will be the desired color hexcode (e.g., #23cf2c)

• multiselect_hover_bg: Define the background color when hovering over options
• multiselect_hover_color: Define the text color when hovering over options 
• multiselect_selected_bg: Define the background color for selected options
• multiselect_selected_color: Define the text color for selected options

Styling the Multiselect Input to Match Native Form Fields

When using the extension, the dropdown field is enhanced using a third-party library (Select2) to enable multiselect functionality. As part of this behavior, the original Digioh form input is replaced with a styled container element.

Because of this, some native form styling (such as the dropdown arrow, minimum height, or exact border appearance) may look slightly different compared to other standard form fields in your campaign.

The good news is that you can fully control how the multiselect input looks using Form CSS, allowing it to visually match the rest of your form.

How to Adjust the Multiselect Dropdown Styling

To customize the appearance of the multiselect input (for example, restoring the dropdown arrow or matching the height of other fields), add custom CSS to your form.

Where to Add the CSS

In your Digioh campaign editor:

1. Navigate to the Form tab

2. Click on the Form sub-tab

3. Scroll to Form CSS and toggle it on (if disabled)

4. Paste your custom CSS here

Sample CSS: 

Below is an example CSS snippet that:

• Adds a dropdown arrow indicator

• Ensures the multiselect field height matches standard Digioh inputs

• Preserves proper spacing and alignment

• Updates the font for the dropdown options

You can adjust values (or add additional CSS styling) as needed to match your brand’s form styling.

/* Ensure relative positioning for the multiselect container */
.select2-container--default .select2-selection--multiple {
  position: relative;
  padding-right: 30px; /* Space for dropdown arrow */
}

/* Add dropdown arrow */
.select2-container--default .select2-selection--multiple::after {
  content: '';
  position: absolute;
  right: 10px;
  top: 50%;
  width: 0;
  height: 0;
  pointer-events: none;
  transform: translateY(-50%);
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 6px solid #666;
}

/* Match standard input height */
.select2-selection {
  min-height: 45px !important;
}


/* Dropdown options list font*/
.select2-results__option {
  font-family: 'Raleway', sans-serif !important;
  font-size: 16px !important;
}

/* Selected choice tags font*/
.select2-selection__choice {
  font-family: 'Raleway', sans-serif !important;
  font-size: 16px !important;
}

/* Input area font*/
.select2-search__field {
  font-family: 'Raleway', sans-serif !important;
  font-size: 16px !important;
}