Multi Select field

This documentation page is for Quform version 1 and may not be applicable for Quform 2 click here to visit the documentation for Quform 2.

continents

In the next major update this field type will be built into the plugin, in the meantime you can convert a Select Menu to a Multi Select with a bit of JavaScript.

Step 1

Add a Select Menu element to the form and customize it as needed.

Step 2

Add an HTML element to the form (from the “More” tab where you add elements) and enter this code as the content:

1
2
3
4
5
6
7
8
9
10
11
<script>
    jQuery(function ($) {
        var $select = $('.iphorm_1_1');
 
        $select.attr({
            name: $select.attr('name') + '[]',
            size: 5,
            multiple: true
        });
    });
</script>
<script>
    jQuery(function ($) {
        var $select = $('.iphorm_1_1');

        $select.attr({
            name: $select.attr('name') + '[]',
            size: 5,
            multiple: true
        });
    });
</script>
  • On line 3, replace iphorm_1_1 with the unique ID of the Select Menu from Step 1

Step 3

You will need to disable Uniform as it’s not compatible with this modification. Go to Form Builder – Settings – Style and untick Use Uniform then Save.

Be inspired. © 2024 ThemeCatcher Ltd. 20-22 Wenlock Road, London, England, N1 7GU | Company No. 08120384 | Built with React | Privacy Policy