如何根据 Contact Form 7 的 API 响应实现动态重定向-php教程-PHP中文网

如何根据 Contact Form 7 的 API 响应实现动态重定向

本文介绍如何在 contact form 7 提交后，基于服务器端 php 处理的 api 响应结果（如成功/失败、跳转路径等），安全、可靠地实现前端 javascript 动态重定向，避免依赖不稳定的客户端响应解析。

本文介绍如何在 contact form 7 提交后，基于服务器端 php 处理的 api 响应结果（如成功/失败、跳转路径等），安全、可靠地实现前端 javascript 动态重定向，避免依赖不稳定的客户端响应解析。

Contact Form 7（CF7）默认仅支持静态重定向（通过「Additional Settings」中的 on_sent_ok，但该方式已弃用且不兼容 AJAX 模式）。若需根据后端 API 调用结果（例如支付状态、用户权限校验、第三方服务返回码）进行条件跳转，必须将服务端逻辑与前端事件精准联动。核心难点在于：AJAX 提交后的响应对象（event.detail) 默认不包含自定义 PHP 数据——而直接在 JS 中解析 .wpcf7-response-output 文本或隐藏字段既脆弱又易被篡改。

✅ 正确解法是利用 CF7 官方提供的钩子 wpcf7_before_send_mail + add_result_props() 方法，将 PHP 层判定的结果以结构化方式注入到最终的 AJAX 响应中，再在前端 wpcf7mailsent 事件中安全读取：

步骤一：PHP 端 —— 注入自定义响应属性

在主题的 functions.php 或插件文件中添加：

add_action('wpcf7_before_send_mail', 'inject_api_redirect_data');
function inject_api_redirect_data($contact_form) {
    $submission = WPCF7_Submission::get_instance();
    if (!$submission) return;

    // 示例：调用你的业务 API（此处简化为模拟响应）
    $api_response = wp_remote_post('https://your-api.com/validate', [
        'body' => ['email' => $submission->get_posted_data()['your-email']]
    ]);

    if (is_wp_error($api_response)) {
        // 可选：记录错误或设置 fallback
        return;
    }

    $body = json_decode(wp_remote_retrieve_body($api_response), true);

    // 根据 API 结果设置重定向逻辑（支持任意键值对）
    if (!empty($body['redirect_url'])) {
        $submission->add_result_props([
            'redirect_url' => esc_url_raw($body['redirect_url']),
            'redirect_delay' => (int) ($body['delay'] ?? 0),
            'redirect_type' => 'success'
        ]);
    } elseif (!empty($body['error_code'])) {
        $submission->add_result_props([
            'redirect_url' => home_url('/error/'),
            'redirect_type' => 'error'
        ]);
    }
}

⚠️ 注意事项：

必须使用 esc_url_raw() 过滤 URL，防止 XSS；

add_result_props() 接收的数组会自动合并进 CF7 的最终 JSON 响应（event.detail.apiResponse）；

该方法仅在 wpcf7_before_send_mail 钩子中有效，且要求 CF7 ≥ 5.3+。

步骤二：JavaScript 端 —— 在 wpcf7mailsent 中读取并跳转

在页面中添加以下脚本（建议置于 wp_footer 或独立 JS 文件）：

document.addEventListener('wpcf7mailsent', function(event) {
    const apiResponse = event.detail.apiResponse || {};

    // 安全检查：确保 redirect_url 存在且为合法 URL
    if (apiResponse.redirect_url && 
        typeof apiResponse.redirect_url === 'string' && 
        /^https?:\/\//.test(apiResponse.redirect_url)) {

        const delay = parseInt(apiResponse.redirect_delay) || 0;

        if (delay > 0) {
            setTimeout(() => {
                window.location.href = apiResponse.redirect_url;
            }, delay * 1000);
        } else {
            window.location.href = apiResponse.redirect_url;
        }
    }
}, false);