如何将Contact Form7数据传递到PHP多步骤表单？第三步数据无法填充

一、代码中的明显错误 #

你在booking.php的JS代码里存在变量匹配错误：

1. 定义了firstNameField，但赋值时误用了不存在的fields.pickField，还引用了未定义的PHP变量$pickup_location，应改为fields.firstNameField和$customer_name
2. lastNameField赋值时误用了不存在的fields.dropField和未定义的$drop_location，应改为fields.lastNameField和$customer_lname
3. 日期字段赋值代码缺失开头双引号：fields.dateField.value = <?php echo esc_js($date_445) ; ?>"; 需修正为fields.dateField.value = "<?php echo esc_js($date_445) ; ?>";

二、核心问题：AJAX加载的字段无法在初始DOM加载时获取 #

你的预订表单通过AJAX切换步骤，第三步的姓名字段在页面初始加载（DOMContentLoaded触发时）并不存在于DOM中，导致document.querySelector无法找到这些字段，自然无法填充数据。

三、修复方案 #

1. 修正代码变量错误并适配AJAX加载场景 #

替换booking.php中的对应代码：

<?php
session_start(); // 确保Session启用
$date_445 = isset($_SESSION['cf7_data']['date_445']) ? $_SESSION['cf7_data']['date_445'] : '';
$pick_time = isset($_SESSION['cf7_data']['pick_time']) ? $_SESSION['cf7_data']['pick_time'] : '';
$customer_name = isset($_SESSION['cf7_data']['customer_name']) ? $_SESSION['cf7_data']['customer_name'] : '';
$customer_lname = isset($_SESSION['cf7_data']['customer_lname']) ? $_SESSION['cf7_data']['customer_lname'] : '';
?>
<script>
document.addEventListener("DOMContentLoaded", function() {
  // 处理第一步的日期、时间字段
  const dateField = document.querySelector('input[name="name_of_date_input"]');
  const timeField = document.querySelector('input[name="name_of_time_input"]');
  
  if (dateField && !dateField.value) {
    dateField.value = "<?php echo esc_js($date_445) ; ?>";
  }
  if (timeField && !timeField.value) {
    timeField.value = "<?php echo esc_js($pick_time) ; ?>";
  }

  // 用MutationObserver监听DOM变化，等待第三步字段加载
  const observer = new MutationObserver((mutations) => {
    mutations.forEach(mutation => {
      if (mutation.addedNodes.length) {
        const firstNameField = document.querySelector('input[name="name_of_username_input"]');
        const lastNameField = document.querySelector('input[name="name_of_userlastname_input"]');
        
        // 仅当字段为空时填充数据
        if (firstNameField && !firstNameField.value) {
          firstNameField.value = "<?php echo esc_js($customer_name) ; ?>";
        }
        if (lastNameField && !lastNameField.value) {
          lastNameField.value = "<?php echo esc_js($customer_lname) ; ?>";
        }

        // 字段全部找到后停止监听，避免重复执行
        if (firstNameField && lastNameField) {
          observer.disconnect();
        }
      }
    });
  });

  // 替换为你的预订表单容器选择器（比如表单父元素的ID/类）
  const formContainer = document.querySelector('#booking-form-wrapper');
  if (formContainer) {
    observer.observe(formContainer, { childList: true, subtree: true });
  }
});
</script>
<?php
echo do_shortcode('[booking_form_id="10"]');
?>

2. 确保Session功能正常 #

在custom-function.php的最开头添加session_start();，否则无法存储和读取CF7提交的会话数据。

3. 可选：使用表单自定义事件优化监听 #

如果你的预订表单插件提供了步骤切换的自定义事件（比如booking-step-changed），可以替换MutationObserver部分代码，更高效：

// 替换MutationObserver相关代码
document.addEventListener('booking-step-changed', function(e) {
  // 假设事件返回当前步骤，比如e.detail.step === 3时代表第三步加载完成
  if (e.detail.step === 3) {
    const firstNameField = document.querySelector('input[name="name_of_username_input"]');
    const lastNameField = document.querySelector('input[name="name_of_userlastname_input"]');
    
    if (firstNameField && !firstNameField.value) {
      firstNameField.value = "<?php echo esc_js($customer_name) ; ?>";
    }
    if (lastNameField && !lastNameField.value) {
      lastNameField.value = "<?php echo esc_js($customer_lname) ; ?>";
    }
  }
});

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