如何在Contact Form 7（CF7）邮件中发送HTML元素值

嘿，这个需求其实用CF7自带的机制就能轻松搞定，不用绕远路，我给你拆解成几个简单步骤：

1. 在CF7表单中添加隐藏字段 #

首先，你需要在CF7的表单编辑界面里，加入一个隐藏字段，用来承接页面上price输入框的值。这个字段的name属性是关键，CF7会通过它来识别并传递数据：

<input type="hidden" name="hidden-price" id="hidden-price" />

（这里的name可以自定义，但要和后面邮件里的短代码对应上）

2. 用JS同步price值到隐藏字段 #

接下来写一段简单的JS，把页面上price输入框的值同步到刚才的隐藏字段里。因为你提到是通过按钮设置price的值，所以可以把同步逻辑加在按钮的点击事件里，或者监听price输入框的变化实时同步：

// 确保DOM加载完成后再执行代码
document.addEventListener('DOMContentLoaded', function() {
  const priceInput = document.getElementById('price');
  const hiddenPriceInput = document.getElementById('hidden-price');
  
  // 方式1：监听price输入框的变化，实时同步
  priceInput.addEventListener('input', function() {
    hiddenPriceInput.value = this.value;
  });

  // 方式2：如果是通过按钮设置price值，就在按钮的点击函数里加这行
  // 假设按钮id是set-price-btn
  // document.getElementById('set-price-btn').addEventListener('click', function() {
  //   hiddenPriceInput.value = priceInput.value;
  // });
});

3. 在CF7邮件模板中调用该字段 #

最后，打开CF7的邮件编辑界面，在你想要显示价格的位置，插入和隐藏字段name对应的短代码：

用户选择的价格：[hidden-price]

这样当表单提交时，price输入框的值就会通过隐藏字段传递到邮件里了。

小提示 #

• 确保隐藏字段的name和邮件里的短代码完全一致（大小写敏感）
• 如果你的JS是放在外部文件里，要确保它在页面元素加载完成后执行，避免找不到DOM元素的问题

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