WP / Elementor 拦截表单并使用数据重定向答案

【问题标题】：WP / Elementor Intercept Form and Redirect with DataWP / Elementor 拦截表单并使用数据重定向
【发布时间】：2018-10-12 22:07:16
【问题描述】：

我有一个内置在 Elementor 中的表单，我希望拦截、处理数据并转发给第三方，然后随后在“确认”卡上显示数据。

我能够将整个过程构建为单个页面，将每个页面设置为使用 CSS 显示无，然后在收到 AJAX 响应时使用 JS 显示/隐藏。这并不理想，因为它会在 JS 关闭时中断。

我找不到合适的 Elementor 钩子和使用 PHP 填充新页面的方法，有人有这方面的经验吗？

【问题讨论】：

标签： wordpress woocommerce wordpress-hook elementor

【解决方案1】：

有几种方法可以将数据从 Elementor 网络表单 POST 到另一个 url。

其中一个正在使用许多 API 集成，例如 Mailchimp、ActiveCampaign、Zapier 等（请参阅https://docs.elementor.com/article/281-form-faq）和（https://docs.elementor.com/category/405-integrations）

另一种（非常有限的方法）是在提交后使用表单的操作并选择“重定向”，然后使用每个字段的短代码作为 url 中的单独数据字符串，例如：

mysite.com/thank-you?fname=[field id="fname"]&lname=[field id="lname"]

您甚至可以在 Elementor 中构建您的 /thank-you/ 页面以获取该数据并使用表单字段数据填充 Elementor 元素，例如文本、标题、链接等。例如，我可以在 /thank-you/ 页面上放置一个文本元素并选择动态而不是在文本区域中输入，然后从动态下拉列表中选择“请求参数”，对于“类型”选择 GET，对于参数名称使用您唯一的 url 键，例如 fname、lname 等。您甚至可以设置前缀、后缀甚至后备文本。

最后，这里是一篇关于如何后端代码在外部传递数据的文章 (https://developers.elementor.com/forms-api/#Form_New_Record_Action)。

// 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' );

    // Replace MY_FORM_NAME with the name you gave your form
    if ( 'MY_FORM_NAME' !== $form_name ) {
        return;
    }

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

    // Replace HTTP://YOUR_WEBHOOK_URL with the actuall URL you want to post the form to
    wp_remote_post( 'HTTP://YOUR_WEBHOOK_URL', [
        'body' => $fields,
    ]);
}, 10, 2 );

还有一个线程，其中包含更多使用该模板作为入门模板与不同 API 集成的示例 (https://github.com/elementor/elementor/issues/2397)

【讨论】：