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

This solution explains how to set up a popup form on a collection page with a multi-select field that has a pre-selected option using Webflow, often with the aid of custom interactions and code.

1. Set Up Your Collection Page and Popup Form

• Create or open your collection page in Webflow.
• Add a popup form element that will appear when a user clicks a trigger (like a button).
• Use Webflow Interactions to create the open/close animation for the popup.

2. Build Your Multi-Select Field

• In your popup form, add a form element to include your multi-select field.
• Since default Webflow select elements support only single-selection, consider using:
 - Checkboxes: Style a series of checkboxes to act as a multi-select.
 - Custom Multi-Select Libraries: Integrate a library (e.g., Choices.js) to provide a dropdown that supports multiple selections.

3. Implement a Pre-Selected Option

• If you’re using checkboxes, simply check the box for the option you want pre-selected.
• If you integrate a multi-select library or use a custom select element:
 - Include custom JavaScript in your Site or Page Settings that targets the field and sets the desired option as selected on page load (e.g., using jQuery to add the “selected” attribute or call the library’s API command for default selection).
 - Place this code in the before section so it runs after Webflow loads.

4. (Optional) Bind CMS Data to Your Field Options

• If your multi-select options come from your CMS, bind the elements in Webflow so that they populate dynamically.
• Use custom code if necessary to parse and set dynamic default values based on your collection data.

5. Test and Publish

• Preview the collection page to ensure the popup opens correctly.
• Verify that the multi-select field displays the right options and that the pre-selected option is active.
• Adjust the custom code or interactions as needed, then publish your site.

Summary

This solution involves setting up a collection page with a popup form, using either styled checkboxes or a custom multi-select library to implement a multi-select field, and adding custom code to ensure a pre-selected option is active when the form loads.