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