如何获取Elementor表单提交记录的DB ID并在感谢页展示给用户

解决方案 #

Form_Record 实例内置公开方法 get_id() 可直接返回提交记录对应的数据库自增ID，该方法未在官方文档明确标注但在Elementor Pro所有支持表单提交功能的版本中均可稳定使用。

你可以直接修改现有钩子代码，把DB ID加入返回数据：

New Record action

add_action( 'elementor_pro/forms/new_record', function( $record, $handler ) {
    // 校验表单名称
    $form_name = $record->get_form_settings( 'form_name' );

    // 替换为你自己配置的表单名称
    if ( 'New Form' !== $form_name ) {
        return;
    }

    // 获取提交记录DB ID
    $submission_db_id = $record->get_id();

    $raw_fields = $record->get( 'fields' );
    $fields = [];
    foreach ( $raw_fields as $id => $field ) {
        $fields[ $id ] = $field['value'];
    }

    // 组装返回数据，将DB ID一并返回给前端
    $response_data = [
        'submission_ref_id' => $submission_db_id,
        'form_fields' => $raw_fields
    ];
    $handler->add_response_data( true, $response_data );

}, 10, 2 );

场景1：提交后在当前页展示参考ID

On Submit success 事件处理

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
jQuery( document ).ready(function( $ ){
    jQuery( document ).on('submit_success', function(event, response){
        // 读取返回的DB ID
        const refId = response.data.submission_ref_id;
        // 示例：将ID插入到页面的提示区域展示
        $('.submit-success-notice').append(`<p>你的参考ID为：${refId}</p>`);
    });
});
</script>

场景2：提交后跳转到独立感谢页展示参考ID

修改前端事件代码，将ID作为URL参数传递到感谢页：

jQuery( document ).on('submit_success', function(event, response){
    const refId = response.data.submission_ref_id;
    // 替换为你实际的感谢页地址
    window.location.href = `/thank-you-page?ref_id=${refId}`;
});

在感谢页中直接读取URL参数ref_id的值，即可展示给用户。

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