Developers public requests

Form pre-load request

... watch this space ...

Form client-side JS, HTML, CSS

JS Events fired on the front-end.

Form ready event

$('.cf7-smart-grid form.wpcf7-form').on( 'cf7SmartGridReady', function(e){
   let $form = $(this); //$jquery form object.
   //instantiate your fields here.
 });

Slider multi-step form event

$('.cf7-smart-grid  form.wpcf7-form').on( 'sgSlideChange','.cf7sg-slider-section', function(e){
    //slide indexes are 0 based.
    //e['current'] holds the index of the current slide
    //e['last'] holds the index of the last slide.
    //you can add a CSS id to each div.container.cf7sg-collapsible elements
    //  whithin the div.cf7sg-slider-section element to uniquely identify each slide $slide.attr('id');
    // $form is the form jquery object.
    let $form = $(e.delegateTarget), $slider=$(this), $slide = $(e.target),
        current = e.current, last = e.last;
  });

in case your field needs to be instantiated/configured once visible, then make sure you do so on slide change and test to see if your field i visible $field.is(':visible'); on the new slide.

There are several other events which will be documented here. For now please reach out to me if you need more info.

... watch this space ...

Form submission request

NOTE: The CF7 plugin uses a custom REST api request point to submit the form. This has some limitation as well as obvious advantages.

Logged-in users not accessible.

The CF7 plugin author is not open to collaboration unfortunately and as a result many code issues go unfixed, one such issue is the failure to add a _wpnonce to the AJAX REST requests, resulting in the logged-in users information not being accessible in the server request.

This plugin resolves this by inserting a hidden nonce field to specifically address this issue. Hence get_current_user() will resolve on submission requests.

Data processing & Validation

The CF7 plugin limits validation to the accepted values in a given HTML field, and ensures required fields are filled in.

The Smart Grid gives users another level of validation, namely cross-field validation, allowing a given field value to be validated in the light of the entire submitted data set, this allowing inter-field dependency checks.

This is done using the following filter,

add_filter( 'cf7sg_validate_submission','validate_field_submission',10,3);

a helper code is available from the admin form editor page.

The smart Grid processes the submitted data beyond the CF7 processing for repetitive fields.

The plugin enables repetitive fields within table structures as well as within tabulated sections. (See this video tutorial for more information). Each field within these structures are processed into arrays.

Furthermore, the plugin allows for table structures to appear within tabs, therefore such fields are processed into 2 dimensional arrays.

The plugin track each table field as,

<table-field-name>  //the field in the first row, 0 base.
<table-field-name>_row-1 //the field on the 2nd row
<table-field-name>_row-2 //for the 3rd row and so on

For tabulated fields,

<tab-field-name>  //the field in the first tab, 0 base.
<tab-field-name>_tab-1  //the 2nd tab.
<tab-field-name>_tab-2  //the 3rd tab, and so on

for tables that within tabulated sections,

<tab-table-field-name>  //the field in the first row in the first tab, 0 base.
<tab-table-field-name>_tab-1  //the first row in the 2nd tab.
<tab-table-field-name>_tab-1_row-1  //the 2nd row in the 2nd tab.
<tab-table-field-name>_tab-2_row-3  //the 4th row in the 3rd tab, and so on

When these fields are submitted and processed by the plugin, the row/tab suffix is preserved as the key of an associative array. This permits cross-validation of fields (within the same row/same tab) as explained in the previous section.

The processed data fields are stored in the CF7 form submission object, and can be accessed once the form has been successfully validated which will trigger the wpcf7_before_send_mail hook,

add_action('wpcf7_before_send_mail', 'track_cf7sg_submissions');
function track_cf7sg_submissions($form){
  $submitted = WPCF7_Submission::get_instance();
  $data = $submitted->get_posted_data();
  print_r($data);
}

will print the following,

Array(
[<table-field-name>] => Array(`
  [] => ...//value of the field in the first row.
  [_row-1] => ... //value of the field in the 2nd row.
),
[<tab-field-name>] => Array(
  [] => ...//value of the field in the first tab.
  [_tab-1] => ... //value of the field in the 2nd tab.
),
[<tab-table-field-name>] => Array(
  [] => Array(
     [] =>  ...//value of the field in the first row of the first tab.
     [_row-1] =>  ...//value of the field in the 2nd row of the first tab.
  ),
  [_tab-1] => Array(
     [] => ... //value of the field in the first row of the 2nd tab.
     [_row-1] =>  ...//value of the field in the 2nd row of the 2nd tab.
  ),
),
)