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

Question

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

<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只能return一个节点，我试过：

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

但这 return 错误：

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

事实上，鉴于插件的功能，我不知道这种方法是否甚至会导致将 table 的 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() return是一个数组，这意味着你必须使用第一个元素（[0]），但不要使用document.getElementById("carttable").innerHTML，因为那不是 return 节点，它 return 是节点内的文本，所以它看起来像这样

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 调用序列化表单之前捕获提交，并将 table 解析为新数组以推送到电子邮件正文：

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 设置中更新表单的邮件部分，以包含一个名为 ShoppingCart 的新变量：

这么简单的DOMretrieval/injection，却费了那么大的功夫，真是可惜了。由于他们在提交之前弃用了 Javascript 包含以支持 DOM 事件侦听器，如果他们可以允许在从表单提交发送电子邮件之前对电子邮件进行一些自定义，那就太好了。

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

Add HTML to Contact Form 7 Email on Submit

html

javascript

php

wordpress

contact-form-7