如何在Contact Form7提交后跳转到接口返回的动态URL

问题分析 #

原代码使用wpcf7_before_send_mail钩子，该钩子在后台执行，无法直接触发前端跳转。CF7默认采用AJAX提交，需通过前端JS监听提交成功事件结合后台传递跳转URL的方式实现需求。

解决方案步骤 #

1. 修改后台钩子代码，提取并传递跳转URL #

更新functions.php中的代码，在API请求成功后解析响应提取跳转URL，并通过CF7的AJAX响应传递给前端：

// 启动会话，用于临时存储跳转URL
add_action('init', function() {
    if (!session_id()) {
        session_start();
    }
});

add_action('wpcf7_before_send_mail', 'send_order_data_to_api', 10, 3);
function send_order_data_to_api($contact_form, $abort, $submission) {
    $wp_form = WPCF7_ContactForm::get_current();
    $order_id = $submission->get_posted_data('order_id');

    if ($wp_form->id() == 860 && !empty($order_id)) {
        $admin_url = $submission->get_posted_data('admin_url');
        $admin_username = $submission->get_posted_data('admin_username');
        $admin_pass = $submission->get_posted_data('admin_pass');
        $email = $submission->get_posted_data('email');
        $note = $submission->get_posted_data('note');
        $order = wc_get_order($order_id);
        //$url = "https://qa-dashboard.wordpressfaster.com/api/v1/signup-user";
        $url = "https://api.npoint.io/a2275b7debf2832643bb";
        $product = $product_id = $product_name = $qty = "";

        foreach ($order->get_items() as $item_id => $item) {
            $product = $item->get_product();
            $product_id = $product->get_id();
            $product_name = $item->get_name();
            $qty = $item->get_quantity();
        }

        $order_data = $order->get_data(); 

        $response = wp_remote_post($url, array(
            'headers'     => array(
                //'Authorization' => "Token my_token",
                'Content-Type'  => 'application/json; charset=utf-8',
            ),
            'body' => json_encode(array(
                "firstName" => $order->get_billing_first_name(),
                "lastName" => $order->get_billing_last_name(),
                "email" => $order->get_billing_email(),
                "company" => $order->get_billing_company(),
                "address1" => $order->get_billing_address_1(),
                "address2" => $order->get_billing_address_2(),
                "city" => $order->get_billing_city(),
                "state" => $order->get_billing_state(),
                "postcode" => $order->get_billing_postcode(),
                "country" => $order->get_billing_country(),
                "phone" => $order->get_billing_phone(),
                "transactionId" => $order->get_transaction_id(),
                "orderId" => $order->get_id(),
                "currency" => $order->get_currency(),
                "total" => $order->get_total(),
                "productId" => '43',
                "planName" => $product_name,
                "quantity" => $qty,
                "contactEmail" =>  $email,
                "contactFirstName" => $order->get_billing_first_name(),
                "contactLastName" => $order->get_billing_last_name(),
                "contactPassword" => $admin_pass,
                "contactCompany" => $order->get_billing_company(),
                "contactAddress" => $order->get_billing_address_1(),
                "contactCity" => $order->get_billing_city(),
                "contactState" => $order->get_billing_state(),
                "contactPostcode" => $order->get_billing_postcode(),
                "contactCountry" => $order->get_billing_country(),
                "contactPhone" => $order->get_billing_phone(),
                "adminUrl" => $admin_url,
                "adminUsername" => $admin_username,
            )),
            'method'      => 'POST',
            'data_format' => 'body',
        ));

        if (is_wp_error($response)) {
            $error_message = $response->get_error_message();
            throw new Exception($error_message);
        } else {
            // 解析API响应，提取跳转URL（假设响应字段为redirect_url，需根据实际返回调整）
            $response_body = wp_remote_retrieve_body($response);
            $response_data = json_decode($response_body, true);
            
            if (!empty($response_data['redirect_url'])) {
                $_SESSION['cf7_redirect_url'] = $response_data['redirect_url'];
            }
        }
    }
}

// 将跳转URL添加到CF7的AJAX响应中
add_filter('wpcf7_ajax_json_echo', 'add_redirect_url_to_cf7_response', 10, 2);
function add_redirect_url_to_cf7_response($items, $result) {
    if (!empty($_SESSION['cf7_redirect_url'])) {
        $items['redirect_url'] = $_SESSION['cf7_redirect_url'];
        // 销毁会话变量，避免重复跳转
        unset($_SESSION['cf7_redirect_url']);
    }
    return $items;
}

2. 添加前端JavaScript实现跳转 #

在主题functions.php中添加以下代码，或直接在页面模板/自定义HTML中插入：

add_action('wp_footer', 'cf7_redirect_after_submit');
function cf7_redirect_after_submit() {
    ?>
    <script>
    document.addEventListener('wpcf7submit', function(event) {
        // 检查AJAX响应中是否包含跳转URL
        if (event.detail.apiResponse && event.detail.apiResponse.redirect_url) {
            window.location.href = event.detail.apiResponse.redirect_url;
        }
    }, false);
    </script>
    <?php
}

关键说明 #

• 会话存储：用$_SESSION临时保存跳转URL，确保AJAX请求与前端页面共享数据，用完即销毁避免重复跳转。
• CF7响应扩展：通过wpcf7_ajax_json_echo钩子向CF7的AJAX返回数据中添加自定义字段，让前端能获取跳转地址。
• 前端事件监听：wpcf7submit是CF7提交成功后触发的事件，通过event.detail.apiResponse读取后台返回的跳转URL并执行跳转。

注意事项 #

• 需确保API返回的JSON数据包含redirect_url字段（字段名不同时需修改代码中对应键名）。
• 若站点禁用CF7 AJAX提交，可改用wpcf7_mail_sent钩子，直接调用wp_redirect()并执行exit()终止脚本。
• 测试时开启调试模式，检查API响应解析、会话变量存储是否正常。

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