Contact Form 7多步表单提交前预览数据并实现确认发送功能咨询

1. 多步表单最后一步配置（确认页结构） #

先将多步表单的最后一步设置为纯信息确认页，无需添加额外输入字段，仅保留三个核心元素：

• 数据展示容器：添加自定义类cf7-confirm-data，用于渲染用户之前填写的所有内容
• 「修改信息」按钮：直接使用Contact Form 7 Multi-Step Forms插件自带的上一步类型按钮，点击即可自动跳转回之前的步骤修改内容
• 「确认提交」按钮：给按钮添加自定义类cf7-confirm-submit，同时新增一个隐藏字段cf7_confirm_trigger，默认值设为0，作为后端判断是否触发邮件发送的标识

2. 前端实现填写数据回显 #

添加JS代码，监听多步表单切换事件，进入最后一步时自动拉取所有已填数据渲染到展示容器：

// 监听多步表单步骤切换事件
document.addEventListener('wpcf7_multistep_before_step_change', function(e) {
  // 替换为你自己表单的最后一步序号，可在控制台打印e.detail.next_step获取实际值
  const finalStepNum = 3;
  if (e.detail.next_step === finalStepNum) {
    const formData = new FormData(e.target);
    let showHtml = '<h4>您填写的信息如下：</h4><ul>';
    // 自定义字段名映射，将后台字段名替换为用户易懂的中文名称
    const fieldMap = {
      'your-name': '姓名',
      'your-email': '邮箱',
      'your-phone': '联系电话'
      // 按自己的表单字段补充
    };
    // 遍历表单字段，过滤插件自带的系统参数
    for (let [key, value] of formData.entries()) {
      if (!key.startsWith('_wpcf7') && !key.startsWith('multistep') && key !== 'cf7_confirm_trigger') {
        const fieldName = fieldMap[key] || key;
        showHtml += `<li><strong>${fieldName}：</strong>${value}</li>`;
      }
    }
    showHtml += '</ul>';
    document.querySelector('.cf7-confirm-data').innerHTML = showHtml;
  }
});

// 监听确认提交按钮点击，修改隐藏字段标识
document.querySelector('.cf7-confirm-submit').addEventListener('click', function() {
  document.querySelector('input[name="cf7_confirm_trigger"]').value = 1;
});

3. 后端实现条件发送邮件逻辑 #

使用wpcf7_before_send_mail钩子判断用户是否点击了确认提交按钮，仅当标识为1时才触发邮件发送：

add_action('wpcf7_before_send_mail', 'cf7_conditional_send_mail', 10, 3);
function cf7_conditional_send_mail($contact_form, &$abort, $submission) {
    $posted_data = $submission->get_posted_data();
    // 未点击确认提交按钮时终止邮件发送
    if (empty($posted_data['cf7_confirm_trigger']) || $posted_data['cf7_confirm_trigger'] != 1) {
        $abort = true;
        return;
    }
    // 此处可添加自定义邮件内容修改逻辑，比如将所有填写数据插入邮件正文
}

4. 注意事项 #

• 若需要确认提交后跳转到成功页，可在Contact Form 7表单的「附加设置」栏添加配置：on_sent_ok: "location='你的成功页URL'"
• 表单字段较多时，注意补充fieldMap里的字段映射关系，避免前端展示后台原始字段名
  内容的提问来源于stack exchange，提问作者Максим Грабов