Format posted data in contact form 7 array - wordpress

Question

I created a contact form 7 tag called [pureair] in which I display a calculator.
The user can add rooms and windows to calculate the needed values.
The form is located inside a Wordpress plugin boilerplate partial
<div id="depcore-pureair-caclulator" class='depcore-pureair-caclulator'>
<section class="room" data-room-number='1'>
<h3 class="room-title"><?= __('Room', 'depcore-pureair') ?></h3>
<div class="room-fields">
<p class="form-field"><label for="room-height-1"><?= __('Height', 'depcore-pureair') ?></label><input type="number" class='room' name="pureair[][room-height-1]" id="room-height-1" min=1 step=1> cm</p>
<p class="form-field"><label for="room-width-1"><?= __('Width', 'depcore-pureair') ?></label><input type="number" class='room' name="pureair[][room-width-1]" id="room-width-1" min=1 step=1> cm</p>
<p class="form-field"><label for="room-length-1"><?= __('Length', 'depcore-pureair') ?></label><input type="number" class='room' name="pureair[][room-length-1]" id="room-length-1" min=1 step=1> cm</p>
<p class="calculation-result"><label><?= __('Volume', 'depcore-pureair') ?></label> <span></span>m<sup>3</sup></p>
</div>
<div class="windows">
<h3 class="window-title"><?= __('Glass', 'depcore-pureair') ?></h3>
<div class="window" data-window-number="1">
<p class="form-field"><label for="room-1-window-1-height"><?= __('Height', 'depcore-pureair') ?></label><input class='window' type="number" name="pureair[][room-1-window-1-height]" id="room-1-window-1-height" min=1 step=1> cm</p>
<p class="form-field"><label for="room-1-window-1-width"><?= __('Width', 'depcore-pureair') ?></label><input class='window' type="number" name="pureair[][room-1-window-1-width]" id="room-1-window-1-width" min=1 step=1> cm</p>
<p class="window-calculation-result"><label><?= __('Surface area', 'depcore-pureiar') ?></label><span></span>m<sup>2</sup></p>
<div class="window-actions">
<div class="remove-window depcore-remove-button"><svg viewBox='0 0 30 29'>
<use xlink:href='#minus-icon'></use>
</svg><span><?= __('Remove window', 'depcore-pureair') ?></span></div>
<div class="add-window depcore-add-button"><svg viewBox='0 0 30 29'>
<use xlink:href='#plus-icon'></use>
</svg><span><?= __('Add window', 'depcore-pureair') ?></span></div>
</div>
</div>
</div>
<div class="depcore-pureair-warning">
<p><?= __('This area is too small to effectively clear the room. Add a window', 'depcore-pureiar') ?></p>
</div>
<div class="room-actions">
<div class="add-room depcore-add-button"><svg viewBox='0 0 28 29'>
<use xlink:href='#plus-icon'></use>
</svg><span><?= __('Add room', 'depcore-pureair') ?></span></div>
<div class="remove-room depcore-remove-button"><svg viewBox='0 0 28 29'>
<use xlink:href='#minus-icon'></use>
</svg><span><?= __('Remove room', 'depcore-pureair') ?></span></div>
</div>
</section>
</div>
I'm using the filter $this->loader>add_filter('wpcf7_special_mail_tags', $plugin_admin, 'calculator_wpcf7_pureair_mail_tag', 10, 3 ); to display the fields inside the email
public function calculator_wpcf7_pureair_mail_tag($output, $name, $html){
$name = preg_replace('/^wpcf7\./', '_', $name); // for back-compat
$submission = WPCF7_Submission::get_instance();
if (! $submission) {
return $output;
}
if ('pureair' == $name) {
return $submission->get_posted_data("pureair");
}
return $output;
}
The problem is that the values in the email are displayed as a coma separated string (for example 270,200,300).
I've tried to use the $this->loader>add_filter('wpcf7_posted_data', $plugin_admin, 'calculator_wpcf7_posted_data'); filter but then all the values are removed.
What I would like to achieve is to loop through the array and create a formatted result inside email message with the data. For example
Room 1 height: 270cm, width: 200cm, length: 400cm
Windows:
1: height: 90cm, width: 110cm
Cost: xxx
Room 2 ...
I've searched but cannot find ho to get the values as array inside the filter.
After some digging into the suggestion from Howard E. I've tried to use the wpcf7_before_send_mail as follows just to test if I can change the values
$submission = WPCF7_Submission::get_instance();
if ($submission) {
$posted_data = $submission->get_posted_data();
foreach ($posted_data as $key => $value) {
if($key == 'pureair') $posted_data['pureair'] = "<table><thead><tr><th>test</th></thead></table>";
if($key == "your-name") $posted_data['your-name'] = "blabla#pl.pl";
}
}
But this doesn't work. Any idea why?

Answer 1

One way to achieve a similar result if to use the Smart Grid-layout extension. It allows you to build a repetitive tabbed form sections as well as repetitive table of fields construct (see this online tutorial on how to achieve this).
Your form would have a repetitive tabbed section of rooms, 1 tab per room, with the fields height/length/width, as well as a table construct within each tab for windows. The table would have window-height/window-width in each row, allowing a user to add multiple windows to each room. In addition each tab could also have a read-only room-cost field.
Your users would then be able to add several tabs of rooms, and in each tab the dimensions of the room as well as multiple rows of windows. Each time a new row is added to the table construct by the user, an event is fired on the table, allowing you to display a calculated value in your room-cost field based on the added rooms/windows.
When the form is submitted, the table fields are submitted as an array of rooms, and an array of arrays of windows. You can filter the way these fields are displayed in the notification email (see this tutorial) as an HTML <table/>, which is the only way to display tables structures in HTML mail body, something like this
add_filter( 'cf7sg_mailtag_pureair', 'filter_cf7_mailtag_pureair', 10, 3);
function filter_cf7_mailtag_pureair($tag_replace, $submitted, $cf7_key){
//$submitted an array of submitted fields
if('my-pureair-form'==$cf7_key ){
$tag_replace = '<table>'.PHP_EOL;
foreach($submitted['room-height'] as $idx=>$height){ //tables_to_repair.
$tag_replace .= '<tr><td>Room '.($idx+1).'</td>';
$tag_replace .= '<td>height: '.$height.'cm, width: '.$submitted['room-width'][$idx].'cm, length: '.$submitted['room-length'][$idx].'cm </td>';
foreach($submitted['window-height'][$idx] as $rdx=>$wheight){
$tag_replace .= '<td>Windows: '.($rdx+1).': height: '.$wheight.'cm, width: '.$submitted['window-width'][$idx][$rdx].'cm </td>';
}
$tag_replace .= 'Cost: '.$submitted['room-cost'].'USD</tr>'.PHP_EOL;
}
$tag_replace .= '</table>'.PHP_EOL;
}
return $tag_replace;
}