Elementor Pro表单提交出现parsererror，无法显示成功消息

我开发了一款WordPress插件，用来捕获Elementor Pro表单的提交数据，把数据发送到外部数据库，同时保存表单提交响应。目前表单提交成功，数据已经推送到数据库，但前端没显示自定义成功消息，反而出现parsererror，而且已经开启了表单小部件的自定义消息选项。

插件代码如下：

<?php

/**
 * Plugin Name: Elementor API Capture
 * Description: Custom plugin to capture Elementor form submissions and send to API.
 * Version: 1.1
 */

// Hook into Elementor form submission
add_action('wp_ajax_elementor_pro_forms_send_form', 'capture_elementor_form_submission');
add_action('wp_ajax_nopriv_elementor_pro_forms_send_form', 'capture_elementor_form_submission');

function capture_elementor_form_submission()
{
    // Access the form data submitted by Elementor
    $post_data = $_POST['form_fields'];
    // print_r($post_data);die;

    /*
     * 🔺 Your API Request Logic Here 🔺
     * Prepare data to send to the API
     */

    $siteName = $_SERVER['SERVER_NAME'];
    // echo $siteName;
    $post_data['source'] = $siteName;
    // print_r($post_data);die;

    // Make the API request
    $response = wp_remote_post('api-end-point', array(
        'body' => $post_data
        // 'headers' => array('Content-Type' => 'application/json'),
    ));

    // print_r($response);die;

    // Check for API request success
    if (is_wp_error($response)) {
        // Handle API request error
        echo 'API Request Error: ' . $response->get_error_message();
    } else {
        // API request successful
        $api_response = json_decode(wp_remote_retrieve_body($response), true);
        echo 'API Response: ' . json_encode($api_response);
    }
    /*
     * 🔺 END HERE 🔺
    */

    // Continue with Elementor's form submission handling
    include_once(plugin_dir_path(__FILE__) . 'elementor-pro/modules/forms/classes/ajax-handler.php');
    $ajax_handler = new ElementorPro\Modules\Forms\Classes\Ajax_Handler();
    $ajax_handler->ajax_send_form();

    // Make sure to exit to prevent further processing of Elementor's form submission
    exit;
}

问题原因 #

Elementor Pro的表单AJAX请求要求返回标准JSON格式响应，但你的代码在API请求前后直接输出了字符串（比如echo 'API Request Error: ...'和echo 'API Response: ...'），这些输出会破坏Elementor需要的JSON结构，导致前端解析失败出现parsererror。另外，直接包含Elementor的Ajax处理文件并实例化的方式，也会干扰原生响应流程。

修复方案 #

1. 改用Elementor官方钩子 #

放弃直接挂钩wp_ajax_elementor_pro_forms_send_form，使用Elementor提供的elementor_pro/forms/new_record钩子——这个钩子在表单验证通过、即将保存记录时触发，不会干扰原生AJAX响应逻辑。

2. 修改后的插件代码 #

<?php

/**
 * Plugin Name: Elementor API Capture
 * Description: Custom plugin to capture Elementor form submissions and send to API.
 * Version: 1.2
 */

// 使用Elementor官方钩子捕获表单提交
add_action('elementor_pro/forms/new_record', 'capture_elementor_form_submission', 10, 2);

function capture_elementor_form_submission($record, $handler)
{
    // 转换Elementor字段格式为数组
    $form_fields = $record->get('fields');
    $post_data = [];
    foreach ($form_fields as $field) {
        $post_data[$field['id']] = $field['value'];
    }

    // 添加来源站点信息
    $post_data['source'] = $_SERVER['SERVER_NAME'];

    // 发送请求到外部API
    $response = wp_remote_post('api-end-point', [
        'body' => $post_data,
        // 如果API要求JSON格式，取消下面注释并调整body为json_encode($post_data)
        // 'headers' => ['Content-Type' => 'application/json'],
        // 'body' => json_encode($post_data),
    ]);

    // 错误处理：记录到WordPress日志，不直接输出
    if (is_wp_error($response)) {
        error_log('Elementor Form API Error: ' . $response->get_error_message());
        // 如需阻止成功消息展示，可取消下面注释
        // $handler->add_error('api_error', '提交失败，请稍后重试');
    } else {
        $api_response = json_decode(wp_remote_retrieve_body($response), true);
        error_log('Elementor Form API Response: ' . print_r($api_response, true));
    }

    // 无需手动调用Elementor的AJAX处理，原生流程会自动继续
}

3. 验证设置 #

确认表单小部件的自定义成功消息已正确配置，同时排查是否有其他插件或自定义JS干扰表单的AJAX响应解析。

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