将HTML添加到联系表单7提交时发送电子邮件

Question

我正在将Contact Form 7添加到页面上，该页面还具有动态生成的HTML表格，其中包含特定于该用户的数据。当该用户填写表格并提交时，我已将表格设置为将HTML格式的电子邮件发送回给我们。我需要将该表添加为电子邮件中的HTML元素，但是我尝试过的所有方法均无效。假设一个非常基本的表：

<table class="shop_table cart" id="carttable" name="carttable">
  <tbody><tr>
    <th>Company</th>
    <th>Contact</th>
    <th>Country</th>
  </tr>
  <tr>
    <td>Ach zo</td>
    <td>Hans Gruber</td>
    <td>Germany</td>
  </tr>
  <tr>
    <td>El Moctezuma</td>
    <td>Juan Epstein</td>
    <td>Mexico</td>
  </tr>
</tbody>
</table>

如联系表格7的documentation所建议的那样，我曾尝试将此Javascript事件侦听器添加到相关WordPress页面的PHP代码中：

document.addEventListener( 'wpcf7submit', function( event ) {
    var carttable = document.getElementById("carttable").innerHTML;
    document.getElementsByClassName("wpcf7-form").appendChild(carttable);
}, false );

但这会引发错误：

Uncaught TypeError: document.getElementsByClassName(...).appendChild is not a function

由于appendChild只能返回一个节点，因此我尝试：

document.addEventListener( 'wpcf7submit', function( event ) {
    var carttable = document.getElementById("carttable").innerHTML;
    document.getElementsByClassName("wpcf7-form")[0].appendChild(carttable);
}, false );

但这返回了错误：

Uncaught TypeError: Failed to execute 'appendChild' on 'Node': parameter 1 is not of type 'Node'.

实际上，我不知道，考虑到插件的功能，这种方法是否还会导致将表格的HTML添加到我们发送给我们的表单详细信息的电子邮件中，因为它只会收集在邮件设置中为该特定表单标识的特定字段。提交表单时，是否可以直接将HTML附加到该电子邮件中？在此先感谢您提供的任何帮助。

编辑：根据要求，这是我在此页面上使用的Contact 7表单的HTML：

<form action="/cart/#wpcf7-f8938-p5-o1" method="post" class="wpcf7-form" novalidate="novalidate">
<div style="display: none;">
<input type="hidden" name="_wpcf7" value="8938">
<input type="hidden" name="_wpcf7_version" value="5.1.3">
<input type="hidden" name="_wpcf7_locale" value="en_US">
<input type="hidden" name="_wpcf7_unit_tag" value="wpcf7-f8938-p5-o1">
<input type="hidden" name="_wpcf7_container_post" value="5">
</div>
<p><label> Your Name (required)<br>
    <span class="wpcf7-form-control-wrap your-name"><input type="text" name="your-name" value="" size="40" class="wpcf7-form-control wpcf7-text wpcf7-validates-as-required" aria-required="true" aria-invalid="false"); background-repeat: no-repeat; background-attachment: scroll; background-size: 16px 18px; background-position: 98% 50%; cursor: auto;"></span> </label></p>
<p><label> Your Email (required)<br>
    <span class="wpcf7-form-control-wrap your-email"><input type="email" name="your-email" value="" size="40" class="wpcf7-form-control wpcf7-text wpcf7-email wpcf7-validates-as-required wpcf7-validates-as-email" aria-required="true" aria-invalid="false"></span> </label></p>
<p><label> Company<br>
    <span class="wpcf7-form-control-wrap your-company"><input type="text" name="your-company" value="" size="40" class="wpcf7-form-control wpcf7-text" aria-invalid="false"></span> </label></p>
<p><label> Phone<br>
    <span class="wpcf7-form-control-wrap cell"><input type="tel" name="cell" value="" size="40" class="wpcf7-form-control wpcf7-text wpcf7-tel wpcf7-validates-as-tel" aria-invalid="false"></span> </label></p>
<p><label> Your Message<br>
    <span class="wpcf7-form-control-wrap TestTextArea"><textarea name="TestTextArea" cols="40" rows="10" class="wpcf7-form-control wpcf7-textarea wpcf7-validates-as-required" aria-required="true" aria-invalid="false"></textarea></span> </label></p>
<p><input type="submit" value="Send" class="wpcf7-form-control wpcf7-submit"><span class="ajax-loader"></span></p>
<div class="wpcf7-response-output wpcf7-display-none"></div></form>

Answer 1

您显示的两个示例是

document.addEventListener( 'wpcf7submit', function( event ) {
    var carttable = document.getElementById("carttable").innerHTML;
    document.getElementsByClassName("wpcf7-form").appendChild(carttable);
}, false );

document.addEventListener( 'wpcf7submit', function( event ) {
    var carttable = document.getElementById("carttable").innerHTML;
    document.getElementsByClassName("wpcf7-form")[0].appendChild(carttable);
}, false );

document.getElementsByClassName()返回一个数组，这意味着您必须使用第一个元素（[0]），但不要使用document.getElementById("carttable").innerHTML，因为它不会返回节点，它将返回节点内的文本，因此看起来像这样

document.addEventListener( 'wpcf7submit', function( event ) {
    var carttable = document.getElementById("carttable");
    document.getElementsByClassName("wpcf7-form")[0].appendChild(carttable);
}, false );

Answer 2

因此，我能够在另一位开发人员的帮助下发现的解决方案完全不在Contact Form 7提供的事件之内，因为它们都在提交表单后触发。我必须将这段代码添加到我们正在使用的WordPress主题的theme.js文件的末尾： /wp-content/themes/vg-ebuilder/assets/js/theme.js 。这将在序列化以进行Ajax调用之前捕获提交，并将表解析为新数组以发送到电子邮件正文：

jQuery(".wpcf7-form").on('submit', function(event){
var carttable = document.getElementById("carttable");

var cartHTML = document.getElementById("ShoppingCart");
    if (!cartHTML)
{
     cartHTML = document.createElement("INPUT");
     cartHTML.setAttribute("type", "hidden");
        cartHTML.id = "ShoppingCart";
        cartHTML.name = "ShoppingCart";
    }


    var csv = [];
    var rows = carttable.querySelectorAll("table tr");
    var header = [];

    //Build the header
    if (rows.length > 0)
    {
        var headCols = rows[0].querySelectorAll("td, th");
        for (var t = 1; t < headCols.length - 2; t++)
        {
            header.push(headCols[t].innerText);
        }
    }

    //Retrieve the data
for (var i = 1; i < rows.length - 1; i++) {
        var row = [], cols = rows[i].querySelectorAll("td, th");

for (var j = 1; j < cols.length - 2; j++)
{
    if (jQuery(cols[j]).find("INPUT").length > 0)
    {
        row.push(header[j - 1] + ": " + jQuery(cols[j]).find("INPUT").val());
    }
    else
    row.push(header[j - 1] + ": " + cols[j].innerText);
}

        csv.push(row.join("\n"));        
        csv.push("\n");    
        csv.push("-------------------------------------------------------------");    
        csv.push("\n");    
    }

    cartHTML.value = csv.join("\n");

    document.getElementsByClassName("wpcf7-form")[0].appendChild(cartHTML);
});

然后，您需要在“联系表单7”设置中更新表单的“邮件”部分，以包括一个名为ShoppingCart的新变量：

可惜的是，对于这种简单的DOM检索/注入必须付出很多努力。由于在支持DOM事件侦听器之前，他们已弃用Javascript包含，因此，如果他们可以在从表单提交发送电子邮件之前允许对电子邮件进行一些自定义，那就太好了。