=== Contact Form 7 - Repeatable Fields ===
Contributors: felipeelia
Tags: contact form 7, cf7, repeater, repeatable
Requires at least: 4.6
Tested up to: 4.9.8
Requires PHP: 5.3
Stable tag: 1.1
License: GPLv2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Adds repeatable groups of fields to Contact Form 7.
== Description ==
This plugin adds repeatable groups of fields to Contact Form 7.
**NOTE:** Tested with Contact Form 7 5.0.
== 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](https://developer.wordpress.org/reference/functions/add_filter/) 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](https://github.com/felipeelia/cf7-repeatable-fields).
If you like it, a review is appreciated :)
== Frequently Asked Questions ==
= Can I change the add/remove buttons? =
Yes. You can use `wpcf7_field_group_add_button_atts`, `wpcf7_field_group_add_button`, `wpcf7_field_group_remove_button_atts`, and `wpcf7_field_group_remove_button` filters, as shown above. Props to @berniegp.
= How can I display the group index number in the form? =
You'll have to use the `wpcf7-field-groups/change` jQuery event.
In the Mail tab, add an element to hold the group index. In this example, it'll be a `` with the `group-index` class:
~~~
[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 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 JS through your theme OR use some plugin like [Simple Custom CSS and JS](https://wordpress.org/plugins/custom-css-js/).
== Changelog ==
To read the full list check our changelog.txt
= Latest =
* Replace groups in mail 2 field