allowClear option (Select2) in Forminator

Hello @vivalis,

Thank you for the suggestion!

We already have a new design planned for the “Select” fields in Forminator, which will include the cancel button. However we can’t provide any ETA, I’m afraid.

As a workaround for now, you can add a PHP snippet for converting a “Select” field of your form into the “Multi Select” field:
https://prnt.sc/z3nuTjTu-O80

We recommend to try it on the development/staging site, before applying to your live site.

In order to test this, please create a “Select” field, and add your options. Make sure the field type is “Single“:
https://prnt.sc/R0QfRiSP_x4z

Next, copy the following code into a text editor, and save it as a PHP file, for example, “forminator-multiselect.php“:

<?php
add_action( 'forminator_before_form_render', 'wpmudev_select_field_form_check', 10, 5 );
function wpmudev_select_field_form_check( $id, $form_type, $post_id, $form_fields, $form_settings ) {
	if ( 111 == $id ) { //Please change the form ID
                 add_filter( 'forminator_field_single_markup', 'wpmudev_change_select_markup', 10, 4 );
		?>
                 <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/js/select2.min.js"></script>
                <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/css/select2.min.css"/>
        <style>
        .select2-container{
            width: 100% !important;
        }
        </style>
        <script type="text/javascript">
        jQuery( document ).ready( function($){
            setTimeout(function() {
                $('.forminator-custom-form').trigger('after.load.forminator');
            }, 100);

            $(document).on('after.load.forminator', function(e, form_id) {
                $('#select-1 select').FUIselect2('destroy');
                $('#select-1 select').select2({
                    multiple : true
                });
            });
        });
        </script>
        <?php
	}
}

add_filter( 'forminator_field_single_markup', 'wpmudev_change_select_markup', 10, 4 );
function wpmudev_change_select_markup( $html, $id, $required, $options ) {
    $select_field = 'select-1';
    $select_id = 'field--'.$select_field;
    if ( strpos( $id, $select_id ) !== false ) {
        $html = str_replace( 'name="'.$select_field.'"', 'name="'.$select_field.'[]" multiple', $html );
    }
    return $html;
}

– in the above code change “111” to your form ID (which you can copy from the form shortcode):

if ( 111== $id ) { //Please change the form ID

If your field name is different from “select-1”, edit it on this line, which is close to the end of the snippet:

$select_field = 'select-1';

Upload the saved PHP file to /wp-content/mu-plugins/ directory on the server, to make it run as a must-use plugin.

Please note, that the result may not be visible when previewing the form, in this case, open the page where you paste the shortcode for your form to check it.

I hope this helps. Let us know if you need any further assistance!

Best Regards,
Dmytro