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

Posted 2023-03-05

【中文标题】提交时将 HTML 添加到联系表格 7 电子邮件

【英文标题】：Add HTML to Contact Form 7 Email on Submit

【发布时间】：2019-11-22 09:35:06

【问题描述】：

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

【问题讨论】：

你的表单有wpcf7-form这个类吗？您没有显示任何表单代码

是的，这是表单的默认类——在我的使用中，开始标签为：<form action="/cart/#wpcf7-f8938-p5-o1" method="post" class="wpcf7-form" novalidate="novalidate" _lpchecked="1">

你能把完整的表格贴在原帖上吗？

我认为这将有助于诊断问题

第二个错误是有道理的，你得到的 innerHTML 应该是一个字符串，而不是一个节点，所以它会抛出一个 TypeError

【参考方案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 事件侦听器，因此如果他们可以在从表单提交发送电子邮件之前允许对电子邮件进行一些自定义，那就太好了。

【参考方案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 );

【讨论】：

节点是carttable，注意我没有使用.innerHTML，和他的代码不同

你将附加它的自我

所以，只要附加表单，您的修复就可以工作——我在提交后将它输出到我的控制台，并且表格肯定会作为表单中的最后一个元素附加。但这并不能解决我正在寻找答案的主要问题，即如何将表格添加到表单在提交时发送的电子邮件中。该解决方案需要了解 Contact Form 7 的运作方式，至少比我的要强，这不会花太多时间。