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

Question

我正在将联系表 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>

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

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

因此，我在另一位开发人员的帮助下发现的解决方案完全超出了 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);
});

然后，您需要在 Contact Form 7 设置中更新表单的 Mail 部分，以包含一个名为 ShoppingCart 的新变量：

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

Answer 2

你展示的两个例子是

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 );