How to set number of repeater entries based on field value

Sometimes you will want to show the number of repeatable fields based on another field in your form, instead of having your user press the Add and Remove until they reach the desired amount. This can be easily achieved with a bit of Javascript and some custom CSS.

Form

    Form Code

    <label>
        How many people would you like to add?
        [select* num-people id:num-people first_as_label "Select number of people" "1" "2" "3" "4" "5" "6" "7"]
    </label>
    [repeater people min:0]
        <label>
            Person {{people_index}}:
            [text person-name]
        </label>
    [/repeater]
    <script>
        (function($){
            $numPeople = $('#num-people');
            $numPeople.on('change',function(){
                wpcf7cf.repeaterSetNumberOfSubs('.wpcf7-form','people',$numPeople.val() || 0);
            });
        })(jQuery)
    </script>
    <style>
        .wpcf7cf_repeater_controls { display:none; }
    </style>

    The JavaScript to set the number of repeater-entries dynamically

    You can use the wpcf7cf.repeaterSetNumberOfSubs to set the number of repeater-entries, with a piece of javascript below that you can append to the end of your form:

    <script>
        (function($){
            $numPeople = $('#num-people');
            $numPeople.on('change',function(){
                wpcf7cf.repeaterSetNumberOfSubs('.wpcf7-form','people',$numPeople.val() || 0);
            });
        })(jQuery)
    </script>

    The CSS to hide the Add and Remove buttons

    Because we are now basing the number of repeater-entries on the num-people field, we should hide the Add and Remove buttons. This can be done by adding this style to the bottom of the form:

    <style>
        .wpcf7cf_repeater_controls { display:none; }
    </style>