How can I implement a multi-select field with a pre-selected option in a popup form on a collection page using Webflow?

You want to implement a multi-select field with a pre-selected option inside a popup form on a Collection Page in Webflow. Webflow’s native form elements don’t support multi-select fields, so this requires a custom approach using custom HTML and JavaScript.

1. Add a Select Field in Webflow

• Go to your Collection Page and add a form inside a popup element.
• Use an Embed element to insert a <select> field with the multiple attribute:
  ```html
  Option 1 Option 2 Option 3\`\`\`

2. Pre-Select an Option Dynamically

• Add a second Embed element for the following JavaScript:
  ```html```
• Replace "option2" with the value you want pre-selected.

3. Connect Pre-Selected Option to CMS

• If you want the pre-selected option to be dynamic, follow these steps:
• Add a Plain Text field to your Webflow CMS and name it “Default Option”.
• Inside the <script>, replace "option2" with:
  ```js
  var defaultValue = "{{wf {"path":"default-option","type":"PlainText"} }}";
  selectField.value = [defaultValue];
  ```

4. Style the Multi-Select Field (Optional)

• Default browser styling for <select multiple> is not great. Use custom styles:
  ```css
  select[multiple] {
  width: 100%;
  height: auto;
  padding: 10px;
  border-radius: 5px;
  }
  ```

5. Ensure Form Submits Data Properly

• Webflow forms do not handle multi-select inputs well. Instead:
• Add a hidden field named "selected-options" and populate it dynamically:
  ```html
  ```
• The form will submit the selected values as a comma-separated string.

Summary

You added a multi-select field, pre-selected an option dynamically, and ensured form submission works correctly. If you need the pre-selected option to be CMS-driven, you integrated a dynamic “Default Option” field.