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.

<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>

Edit this form in the form tester

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>