How can I make the 'Select2' jQuery plugin work properly inside a Webflow form? I have included the necessary links to select2.min.js and select2.min.css, but it does not function as expected within Webflow. Outside of Webflow, it works fine. What could be causing this conflict?

TL;DR

Use Webflow’s built-in jQuery and avoid adding another version.
Load Select2 CSS in the <head> and JS before </body> using CDN links.
Wrap your Select2 init code in Webflow.push() to run after DOM loads.
Assign a custom class to the select element and target it accurately.
Re-initialize Select2 if using page transitions or animations.

If Select2 is not working correctly inside your Webflow form, even though it works outside of Webflow, there are likely issues related to timing, jQuery version conflicts, or improper DOM targeting within Webflow’s environment.

1. Verify jQuery Compatibility

Webflow already includes jQuery (v3.5+) by default. Including another version manually can cause conflicts.
Remove any extra jQuery script tags you may have added if you're relying on Webflow’s built-in jQuery.
Also, ensure your Select2 version is compatible with jQuery 3.5+.

2. Ensure Scripts Run After Webflow Loads the DOM

Webflow structures its pages in such a way that DOM elements may not be fully available when your custom scripts run.
To fix this, your Select2 init code should be wrapped inside:

$(document).ready(function() { ... }); or
Webflow.push(function() { ... }); (Webflow’s custom document ready wrapper)

Example:

Use this snippet inside an Embed element placed before the closing </body> tag:

<script>
  Webflow.push(function() {
    $('.your-select-class').select2();
  });
</script>

Replace .your-select-class with the exact class assigned to the select field you want enhanced.

3. Load Select2 CSS and JS Correctly

Ensure you added the CDN links to select2.min.css and select2.min.js:
Place the CSS link in the Page Settings → Inside <head> tag.
Place the JS script just before the closing </body> tag in Page Settings, or in an Embed component at the bottom of the page.
Example URLs from CDN:
CSS: https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css
JS: https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js

4. Make Sure the Select Field Exists and Has the Correct Class

In Webflow, assign a custom class to the <select> element (e.g., select2-field).
In your script, use the full class selector: $('.select2-field').select2();
Avoid using Webflow’s built-in form styling that might obscure or override your custom Select2 styles.

5. Avoid AJAX/PJAX Page Interference

If you're using Webflow’s built-in page loading animations or the “barba.js support”, such features might destroy and re-render the DOM after page load.
In such cases, you may need to re-initialize Select2 after specific page transitions.

Summary

To make Select2 work inside Webflow:

Do NOT load another jQuery version—use Webflow’s built-in one.
Use Webflow.push() to delay init until the page is fully ready.
Properly load the Select2 CSS and JS from a CDN.
Target the correct element with a custom class in your script.
Handle dynamic content issues, especially with single-page or animated transitions.

This should make your Select2 plugin behave the same inside Webflow as it does outside.

Webflow Resources

Webflow templates

Webflow inspiration

Rate this answer