Frequently Asked Questions

You can add that JS through your theme OR use some plugin like Simple Custom CSS and JS.

Can I change the add/remove buttons?

Yes, you can use the available hooks to achieve that.

How can I display the group index number in the form?

In the Form tab, add an element to hold the group index. In this example, it'll be a <span> with the group-index class:

[field_group emails id="emails-groups" tabindex:1]
	<p>Group #<span class="group-index"></span></p>
	<label>Your Email (required)[email* your-email]</label>
	[radio your-radio use_label_element default:1 "radio 1" "radio 2" "radio 3"]
	[select* your-menu include_blank "option1" "option 2"]
	[checkbox* your-checkbox "check 1" "check 2"]
[/field_group]

And then add this CSS snippet to your code:

.wpcf7-field-groups {
	counter-reset: repeatable-fields-counter;
}
.wpcf7-field-group {
	counter-increment: repeatable-fields-counter;
}
.group-index:after {
	content: counter(repeatable-fields-counter);
}

Props robhuska via this comment.

Alternatively, you can add this to your JavaScript code. It uses the wpcf7-field-groups/change jQuery event.

jQuery(function($) {
	$('.wpcf7-field-groups').on('wpcf7-field-groups/change', function() {
		var $groups = $(this).find('.group-index');
		$groups.each(function() {
			$(this).text($groups.index(this) + 1);
		} );
	}).trigger('wpcf7-field-groups/change');
});