Use Select2 for Contact Form 7 dropdowns - When a Contact Form 7 form has a dropdown, enable Select2 so that the elements are searchable. https://www.damiencarbery.com/2023/12/use-select2-for-contact-form-7-dropdowns/

cf7-form.txt

<p>Experiment with <a href="https://contactform7.com/2023/06/20/setting-upper-limit-of-checkbox-selection/">Schema-Woven Validation</a> and limiting the number of checkboxes that can be clicked.</p>

<label> Your name
    [text* your-name] </label>

<label> Your email
    [email* your-email] </label>

[select your-country class:enable-select2 "China" "India" "San Marino" "Adélie penguin" "Emperor penguin" "Gentoo penguin" "Little penguin" "Humboldt penguin" "Southern rockhopper penguin" "Galapagos penguin"]

[select second-country "Not Select2" "India" "San Marino" "Adélie penguin" "Emperor penguin" "Gentoo penguin" "Little penguin" "Humboldt penguin" "Southern rockhopper penguin" "Galapagos penguin"]

[group other-country]
[select your-other-country class:enable-select2 class:another-class "Ireland" "France" "San Marino" "Adélie penguin" "Emperor penguin" "Gentoo penguin" "Little penguin" "Humboldt penguin" "Southern rockhopper penguin" "Galapagos penguin"]
[/group]

[checkbox your-penguins "Adélie penguin" "Emperor penguin" "Gentoo penguin" "Little penguin" "Humboldt penguin" "Southern rockhopper penguin" "Galapagos penguin"]

[submit "Submit"]

enable-select2-on-contact-form-7-dropdowns.php

<?php
/*
Plugin Name: Use Select2 for Contact Form 7 dropdowns
Plugin URI: https://www.damiencarbery.com/2023/12/use-select2-for-contact-form-7-dropdowns/
Description: When a Contact Form 7 form has a dropdown, enable Select2 so that the elements are searchable.
Author: Damien Carbery
Version: 0.1
*/


defined( 'ABSPATH' ) || exit;


class UseSelect2ForContactForm7Dropdowns {
	// Initialize any plugin variables.
	public function __construct() {
		$this->init();
	}


	// Set up WordPress specfic actions.
	private function init() {
		add_action( 'wp_head', array( $this, 'check_for_cf7_form' ) );
	}


	// Search post content to see if it has a [contact-form-7] shortcode.
	// If so, then add a filter.
	function check_for_cf7_form() {
		global $post;
		
		if ( has_shortcode( $post->post_content, 'contact-form-7' ) ) {
			// Run the filter after the [contact-form-7] shortcode is processed.
			add_filter( 'the_content', array( $this, 'look_for_cf7_select' ), 20 );
		}
	}


	// Look for a <select> element with 'enable-select2' class.
	// If found then load Select2 js and css in footer and add an action.
	function look_for_cf7_select( $content ) {
		$re = '/<select class=".*enable-select2.*"/U';
		if ( preg_match( $re, $content ) ) {
			add_action( 'wp_footer', array( $this, 'cf7_activate_select2' ) );
			wp_enqueue_style( 'select2', 'https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/css/select2.min.css', array(), null );
			wp_enqueue_script( 'select2', 'https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/js/select2.min.js', array(), null, array( 'in_footer' => true, ) );
		}
		return $content;
	}


	// This action initialises Select2 on <select> elements with 'enable-select2' class.
	function cf7_activate_select2() {
?>
	<script>
	jQuery( document ).ready( function() {
		jQuery('.wpcf7-select.enable-select2').select2();
	});
	</script>
<?php
	}
}
$UseSelect2ForContactForm7Dropdowns = new UseSelect2ForContactForm7Dropdowns();