WordPress Contact 7表单：如何获取自定义HTML标签td中的数据？

嘿，我明白你遇到的麻烦了——你用JS修改了<td id="quadrat">的内容，但Contact Form 7的[quadrat]标签在邮件里是空的，这是因为CF7只认表单字段（比如<input>）的value属性，而不是你直接修改的DOM元素文本。

你页面里的[text quadrat id:quadrat]其实对应一个<input>标签，CF7是从这个input的value里收集数据的，而你之前改的是它外面的<td>，等于没碰CF7真正要读取的数据源，所以邮件里自然拿不到值。

给你几个具体的解决步骤：

• 修改JS逻辑，更新表单字段的value
  把原来只修改<td>文本的代码，改成同时更新对应input的value。比如：

  // 选中CF7生成的input字段（用name属性更可靠）
  const quadratInput = document.querySelector('input[name="quadrat"]');
  // 选中要显示数值的td元素
  const quadratTd = document.getElementById('quadrat');
  // 假设这是你计算出来的面积值
  const calculatedArea = 120; 
  
  // 同时更新input的value和td的显示文本
  quadratInput.value = calculatedArea;
  quadratTd.textContent = calculatedArea;
  

  这样CF7就能从input的value里拿到你设置的数值了。

• 可选：隐藏原始input字段
  如果你不想让用户看到或修改这个input，可以给它加个隐藏类：
  在CF7的表单代码里改成：

  [text quadrat id:quadrat class:hidden-field]
  

  然后加一段CSS：

  .hidden-field { display: none; }
  

  这样用户看不到这个输入框，但JS依然能修改它的value，CF7也能正常收集数据。

• 确保邮件模板标签正确
  检查你的邮件模板里用的是[quadrat]，和你在表单里定义的字段名完全一致（CF7标签建议严格匹配字段名，避免不必要的问题）。

• 提前更新值，避免提交时机问题
  如果你的数值是动态计算的（比如用户输入其他数据后实时计算），可以监听表单的提交事件，在提交前最后更新一次input的value，确保CF7拿到最新值：

  document.querySelector('.wpcf7-form').addEventListener('submit', function() {
      const quadratInput = document.querySelector('input[name="quadrat"]');
      // 这里重新计算一次最新值
      const latestArea = 你的实时计算逻辑;
      quadratInput.value = latestArea;
  });
  

这样调整后，邮件里的[quadrat]标签应该就能正确显示你通过JS设置的数值啦！

内容的提问来源于stack exchange，提问作者Kanissell