How To Add Incremental Number in Front End

Contact Form 7 – Repeatable Fields

[field_group emails id=”emails-groups” tabindex:1]
<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]

is working and
[emails]
GROUP #[group_index]
Checkbox: [your-checkbox]
E-mail: [your-email]
Radio: [your-radio]
Select: [your-menu]
[/emails]

also working
but need

GROUP #[group_index] in front end also.

Hi @manjeetmca08, did you find how to add the field order number to the frontend of the form?

Hi!

The solution is the wpcf7-field-groups/change jQuery event. In order to use it, you can add an element with a certain class, let’s say group-index and use that event to update the group number.

So, you’ll have this in the Mail tab:

[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 you’ll have to add this to your JavaScript code:

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' );
} );

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

Let me know if that worked for you, and please if the plugin helped you somehow remember to leave a review ??

Thanks!

I’m marking this as resolved due to the lack of activity here. I hope the above code helps!