Example

I’m a big fan of learning by example, if you are too, you should probably go here: https://conditional-fields-cf7.bdwm.be/javascript-events-example/

Group events

wpcf7cf_show_group – this event is triggered each time a group is shown. The target of the event is the group HTML element.

// Example usage
jQuery('form').on('wpcf7cf_show_group', function(e) {
  console.log('group was revealed');
  console.log(e.target);
});

// Example usage
jQuery('form').on('wpcf7cf_show_group', function(e) {
  console.log('group was revealed');
  console.log(e.target);
});

wpcf7cf_hide_group – this event is triggered each time a group is shown. The target of the event is the group HTML element.

// Example usage
jQuery('form').on('wpcf7cf_hide_group', function(e) {
  console.log('group was hidden');
  console.log(e.target);
});

Repeater events

wpcf7cf_repeater_added – this event is triggered each time a repeater gets added. The target of the event is newly created the sub_repeater HTML element.

// Example usage
jQuery('form').on('wpcf7cf_repeater_added', function(e) {
  console.log('an additional sub_repeater was created and added');
  console.log(e.target);
});

wpcf7cf_repeater_removed – this event is triggered each time a repeater gets added. The target of the event is the sub_repeater HTML element.

// Example usage
jQuery('form').on('wpcf7cf_repeater_removed', function(e) {
  console.log('the last sub_repeater just got removed');
  console.log(e.target);
});

Multistep events

wpcf7cf_change_step – this event is triggered each time you go from one step to another. The target of the event is the current step HTML element. The event is called with 2 additional parameters: previousStep (1-based index of the step that was active before the event) and currentStep (1-based index of the newly active step)

// Example usage
jQuery('form').on('wpcf7cf_change_step', function(e, previousStep, currentStep) {
  console.log('We moved from step '+ previousStep + ' to step ' + currentStep);
  console.log(e.target);
});