Support » Plugin: Contact Form 7 - Repeatable Fields » How To Add Incremental Number in Front End

  • Resolved manjeetmca08

    (@manjeetmca08)


    Want To add
    Attendee 1

    Attendee 2

    Attendee 3

    Attendee n

    in the repeatable section

    The page I need help with: [log in to see the link]

Viewing 4 replies - 1 through 4 (of 4 total)
  • 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?

    Plugin Author Felipe Elia

    (@felipeelia)

    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!

    Plugin Author Felipe Elia

    (@felipeelia)

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

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘How To Add Incremental Number in Front End’ is closed to new replies.