Advanced repeater example

Delete/insert at any position

Using wpcf7cf.repeaterAddSubAtIndex (link) and wpcf7cf.repeaterRemoveSubAtIndex (link), it’s possible to create some insert and remove links for that will insert / remove a sub-repeater at any given position.

The functions will still respect the min and max properties set for the repeater.
In the example below they are set to min:2 and max:8

Form



    Insert | Remove


    Form Code

    [repeater my-repeater min:2 max:8]
      <label for="txt">Text {{my-repeater_index}}</label>
      [text txt id:txt]
      <a href="#" class="add">Insert</a> | <a href="#" class="remove">Remove</a>
    [/repeater]
    [submit]
    <script>
      (function($){
          $form = $('.wpcf7-form');
          $form.click(function(e){
              const $clickedElement = $(e.target);
              const index = $clickedElement.closest('.wpcf7cf_repeater_sub').index();
              if ($clickedElement.hasClass('add')) {
                  wpcf7cf.repeaterAddSubAtIndex($form, 'my-repeater', index);
                  return false;
              }
              if ($clickedElement.hasClass('remove')) {
                  wpcf7cf.repeaterRemoveSubAtIndex($form, 'my-repeater', index);
                  return false;
              }
          });
      })(jQuery)
    </script>

    Conditional Fields (Text)

    Extra: hide Remove-link if the number of entries is at it’s minimum

    Check out this example