Contact Form 7 (cf7) Repeater

Installing and Activating the plugin.

Download the zip file from your account after completing the purchase and upload it to your website, Then under “Contact” click license and insert your repeater license from the email you received or from your account order.

Creating your first repeater

Edit the contact form that you wish to add a field repeater for it, you should see a new tab called repeater, click on this tab and setup the fields like you normally do with Contact Form 7.

Add as much repeaters as you want, then go back to the Form tab to add your created repeater to the form, you should see a repeater field button next to the text, textarea, file etc.. fields, click on it.

  • The below video is for version 1.0, the newer version come with same setup however an email field was added to setup your email part of the repeater and it should be filled the same way as Contact form 7 mail field to receive emails.
  • One other issue is that when you use field names that conflict with the html attribute name, example 
    [text* name]

    will break the repeater since “name” is a preserved attribute name.

Setup your repeater:

Repeater Buttons:

Enter your labels for adding and removing the panel, please be aware that this field doesn’t accept spaces, however _ character will be transformed to space on the frontend, it also allows you to decode the text in case you need to use icons or html with the buttons, you can use the service here to encode your text, and don’t forget to check the base64decode so that the repeater knows that the text is encoded.

Repeater Options:

Index – This field is required and will throw an error if not set, the index must be 0 for the first repeater, 1 for the second etc…

Minimum – This field will control how many panels to show as minimum, this should be less than or equal to the Initial option.

Maximum – This field will control how many panels to show as maximum, this should be greater than or equal to the Minimum option.

Initial – This field will control how many panels to show as initial, this should be greater than or equal to the Minimum option, if not, the minimum option wins.

Advanced Customization

Javascript Events:

Event: wpcf7-panel-created
fires when a new repeater panel is created.

Sample Code:

jQuery(document).on('wpcf7-panel-created', function(event, repeater, html) {
console.log(jQuery(".wpcf7-repeater-" + repeater.id + " .wpcf7-repeater-item").get(repeater.item - 1));
});

Event: wpcf7-panel-removed
fires when a new repeater panel is removed.

Sample Code:

jQuery(document).on('wpcf7-panel-created', function(event, repeater) {
console.log(jQuery(".wpcf7-repeater-" + repeater.id + " .wpcf7-repeater-item"));
});