我在我的WordPress网站上用Elementor Pro创建了一个表单。点击按钮后，我可以使用WordPress后端以某种方式处理结果，但同时表单被重新加载，所有字段再次使用默认值。在某些情况下，这会带来很大的阻碍-例如，当你试图构建一个简单的Web应用程序时。
具体来说，我们构建一个表单来添加两个数字（this tutorial）。
前端如下所示：
Adder Form
“结果将显示在此处”元素的HTML代码：

<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){
            document.getElementById("result").innerHTML = response.data['1'].result;
        });
    });
</script>
<p id='result'>The result will appear here.</p>

PHP代码（在代码段WordPress插件中）：

function add_two_numbers($fields) {
    $a = $fields['a'];
    $b = $fields['b'];
    return $a + $b;
}

// A send custom WebHook
add_action( 'elementor_pro/forms/new_record', function( $record, $handler ) {
    // make sure its our form
    $form_name = $record->get_form_settings( 'form_name' );
    if ( 'AdderForm' !== $form_name ) {
        return;
    }
    
    $raw_fields = $record->get( 'fields' );
    $fields = [];
    foreach ( $raw_fields as $id => $field ) {
        $fields[ $id ] = $field['value'];
    }
    
    $output['result'] = add_two_numbers($fields);
    
    $handler->add_response_data( true, $output );
}, 10, 2 );

我一直在努力钻研Elementor文档，设置动态“默认”值，探索表单设置，在谷歌上搜索诸如“Elementor在提交后不重新加载表单”，“Elementor保存默认值表单”等内容，但我什么也没找到。显然，官方的Elementor工具不允许你这样做，在我看来，这很奇怪。
我找到了一个解决方案，希望与其他人分享，但我觉得它并不直观。如果您知道更好的解决方案，或者Elementor的新版本允许您这样做，请随时发表评论。