如何通过JQuery Ajax将Contact Form 7多步表单数据发送至PHP文件

首先看你原来的JS代码，有几个明显的逻辑和语法错误导致它不生效，我来一步步帮你修正：

原代码的核心问题 #

• 逻辑判断错误：循环里的if条件试图让一个input[i].name同时等于多个不同的值，这根本不可能成立，所以AJAX请求永远不会触发。
• 语法错误：条件里有多余的&&符号（&&&），这会导致JS报错中断执行。
• 数据格式不匹配：直接把inputs数组传给PHP，和你PHP里期望的键名（比如surname、name）不对应，PHP无法正确解析到对应值。

修正后的JavaScript代码 #

我们需要从CF7提交的所有字段中提取需要的内容，构建成和PHP端匹配的键值对，再发送AJAX请求：

document.addEventListener('wpcf7submit', function(event) {
    // 构建要发送到PHP的数据集，键名和PHP里的$_POST对应
    const formData = {};
    
    // 遍历所有表单字段，提取我们需要的项
    event.detail.inputs.forEach(input => {
        switch(input.name) {
            case 'radio-internet':
                formData.internet = input.value;
                break;
            case 'radio-mobile':
                formData.mobile = input.value;
                break;
            case 'radio-provider':
                formData.provider = input.value;
                break;
            case 'your-surname':
                formData.surname = input.value;
                break;
            case 'your-name':
                formData.name = input.value;
                break;
            case 'your-email':
                formData.email = input.value;
                break;
            case 'your-phone':
                formData.phone = input.value;
                break;
            case 'radio-hours':
                formData.hours = input.value;
                break;
        }
    });

    // 发送AJAX请求，建议用WordPress生成绝对路径避免出错
    jQuery.ajax({
        url: '<?php echo esc_url(site_url('/process.php')); ?>',
        type: 'post',
        data: formData,
        success: function(response) {
            console.log('数据同步成功:', response);
            console.log('lead inserted');
        },
        error: function(xhr, status, error) {
            console.error('同步失败:', status, error);
            console.log(xhr.responseText);
        }
    });
}, false);

对应修正的PHP代码（process.php） #

现在PHP可以正确接收所有字段，和你需要的映射完全对应：

<?php
// 基础请求验证，只允许POST请求
if ($_SERVER['REQUEST_METHOD'] !== 'POST') {
    exit('非法请求');
}

// 接收并整理数据，用??处理字段不存在的情况避免报错
$data = array(
    "internet" => $_POST['internet'] ?? '',
    "mobile" => $_POST['mobile'] ?? '',
    "provider" => $_POST['provider'] ?? '',
    "lastname" => $_POST['surname'] ?? '', // 对应表单的your-surname
    "firstname" => $_POST['name'] ?? '', // 对应表单的your-name
    "email" => $_POST['email'] ?? '', // 对应表单的your-email
    "phone" => $_POST['phone'] ?? '', // 对应表单的your-phone
    "hours" => $_POST['hours'] ?? ''
);

// 这里添加你的业务逻辑，比如保存到数据库、调用外部API等
// 测试阶段可以先打印数据确认接收正常
print_r($data);
?>

额外注意事项 #

• 路径正确性：用site_url()生成绝对路径能避免不同页面下相对路径失效的问题，确保AJAX能正确找到process.php。
• 安全防护：建议添加WordPress的nonce验证，在CF7表单里插入隐藏的nonce字段，JS中一起发送，PHP端验证nonce合法性，防止恶意请求。
• 调试技巧：打开浏览器开发者工具（F12）的Network标签，查看AJAX请求的状态码和响应内容，能快速定位路径错误、字段缺失等问题。

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