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)

    Edit this form in the form tester

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

    Check out this example