WordPress Contact Form 7自定义复选框如何将数据传递到邮件？

核心问题排查 #

你的自定义代码存在2个关键属性缺失，导致CF7无法收集复选框提交的值：

• 复选框<input>标签没有配置name属性，CF7依赖name属性匹配字段收集提交数据
• 复选框<input>标签没有设置value属性，勾选后没有对应内容可传递
  另外如果邮件模板未添加对应字段的输出标签，也会导致接收到的邮件不显示勾选内容。

修复步骤 #

1. 修正复选框HTML代码 #

修改后的完整代码如下，新增了必填的name、value属性，同时修正了原代码的标签嵌套错误：

<span class="wpcf7-form-control-wrap your-services">
<span class="wpcf7-form-control wpcf7-checkbox">
  <span class="wpcf7-list-item">
    <label class="custom-control custom-checkbox">
      <input type="checkbox" class="custom-control-input" name="your-services[]" value="替换为当前复选框对应的实际服务内容"> Checkbox text
      <span class="custom-control-indicator"></span>
      <span class="wpcf7-list-item-label custom-control-description"></span>
    </label>
  </span>
 </span>
</span>

说明：

• name属性值要和外层wpcf7-form-control-wrap后缀的字段名一致，末尾加[]是为了支持多选场景
• 如果你有多个复选框选项，每个选项的<input>都使用相同的name="your-services[]"，仅修改各自的value属性即可

2. 配置邮件输出模板 #

进入对应CF7表单的编辑页面，切换到「邮件」选项卡，在邮件内容模板的对应位置插入字段标签[your-services]，CF7提交后会自动把所有勾选的复选框值用逗号拼接后替换这个标签。

3. 验证测试 #

保存表单后前端提交测试，检查接收邮件是否正常显示勾选内容。如果仍然异常，可以先使用CF7官方自带的复选框短代码生成功能生成默认代码，确认默认代码可以正常传值后再套入你的自定义样式，避免样式修改时遗漏核心属性。

注意事项 #

外层wpcf7-form-control-wrap后缀的字段名、input的name前缀、邮件模板里的标签名三者必须完全一致，大小写也要匹配，否则会出现数据丢失问题。

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