Description
This plugin adds repeatable groups of fields to Contact Form 7.
NOTE: Tested with Contact Form 7 5.1.6.
Usage
Form tab
Wrap the desired fields with [field_group your_group_id_here][/field_group]. The shortcode accepts additional parameters, in WP shortcode format and in CF7 fields parameters format as well.
Example:
[field_group emails id="emails-groups" tabindex:1] [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] Mail tab
In the mail settings, wrap the fields with your group id. You can use the [group_index] tag to print the group index and an additional __ to print a field at a specific index.
Example:
The second email entered by the user was: [your-email__2] These were the groups: [emails] GROUP #[group_index] Checkbox: [your-checkbox] E-mail: [your-email] Radio: [your-radio] Select: [your-menu] [/emails] Customizing the add and remove buttons
You can add filters to your theme to customize the add and remove buttons.
Example
// In your theme's functions.php function customize_add_button_atts( $attributes ) { return array_merge( $attributes, array( 'text' => 'Add Entry', ) ); } add_filter( 'wpcf7_field_group_add_button_atts', 'customize_add_button_atts' ); The available filters are:
wpcf7_field_group_add_button_atts
Filters the add button attributes.
Parameters:
* $attributes: Array of attributes for the add button. Keys:
* additional_classes: css class(es) to add to the button
* text: text used for the button
Return value: array of button attributes
wpcf7_field_group_add_button
Filters the add button HTML.
Parameters:
* $html: Default add button HTML
Return value: button HTML
wpcf7_field_group_remove_button_atts
Filters the remove button attributes.
Parameters:
* $attributes: Array of attributes for the remove button. Keys:
* additional_classes: css class(es) to add to the button
* text: text used for the button
Return value: array of button attributes
wpcf7_field_group_remove_button
Filters the remove button HTML.
Parameters:
* $html: Default remove button HTML
Return value: button HTML
Contribute
You can contribute with code, issues and ideas at the GitHub repository.
If you like it, a review is appreciated 
FAQ
-
Yes. You can use
wpcf7_field_group_add_button_atts,wpcf7_field_group_add_button,wpcf7_field_group_remove_button_atts, andwpcf7_field_group_remove_buttonfilters, as shown above. Props to @berniegp. -
Youll have to use the
wpcf7-field-groups/changejQuery event.In the Form tab, add an element to hold the group index. In this example, itll be a
with thegroup-indexclass:[field_group emails id="emails-groups" tabindex:1]Group #
[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 youll 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 JS through your theme OR use some plugin like Simple Custom CSS and JS.
