Contact Form 7 API 数据自动填充方法

本文档旨在指导开发者如何利用 Contact Form 7 插件，在表单提交前通过 API 请求获取数据，并将这些数据动态地填充到表单的邮件内容中。我们将探讨如何使用 `wpcf7_before_send_mail` 钩子，发起 API 请求，提取响应数据，并将其插入到 Contact Form 7 的邮件模板中，同时还将介绍如何将API响应推送到JavaScript事件 `wpcf7mailsent`。

Contact Form 7 是 WordPress 中一个非常流行的表单插件。有时，我们希望在表单提交之前，根据用户输入或其他条件，从外部 API 获取数据，并将这些数据包含在最终发送的邮件中。本文将详细介绍如何实现这一目标。

步骤 1：配置 Contact Form 7 邮件模板

首先，需要在 Contact Form 7 的邮件设置中定义一个占位符，用于存放从 API 获取的数据。例如，可以在邮件正文中添加 {{api_response}}。

Dear [your-name],

This is the email body...

{{api_response}}

"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."

步骤 2：使用 wpcf7_before_send_mail 钩子

wpcf7_before_send_mail 钩子允许我们在邮件发送之前执行自定义代码。我们需要创建一个函数，该函数会监听这个钩子，发起 API 请求，并将响应数据替换到邮件模板中的占位符。

add_action( 'wpcf7_before_send_mail', 'Kiri_cf7_api_sender' );
function Kiri_cf7_api_sender( $contact_form ) {

    if ( 'Quote_form' === $contact_form->title ) {
        $submission = WPCF7_Submission::get_instance();

        if ( $submission ) {
            $posted_data = $submission->get_posted_data();

            $name    = $posted_data['your-name'];
            $surname = $posted_data['your-name2'];
            $phone   = $posted_data['tel-922'];
            $urltest = $posted_data['dynamichidden-739']; // 可能是表单字段或选项字段

            if ( strpos( $urltest, '?phone' ) !== false ) {
                $url = 'api string';

            } elseif ( strpos( $urltest, '?email' ) !== false ) {
                $url = 'api string';

            } else {
                $url = 'api string';

                $response = wp_remote_post( $url );
                $body     = wp_remote_retrieve_body( $response );

            }
        }
        // 获取 Contact Form 7 的邮件属性
        $mail = $contact_form->prop( 'mail' );
        // 使用 API 响应替换邮件正文中的占位符
        // 注意：如果 API 响应是 JSON 格式，可能需要先解码
        $mail['body'] = str_replace( '{{api_response}}', $body['field'] , $mail['body'] );
        // 更新 Contact Form 7 的邮件属性
        $contact_form->set_properties( array( 'mail' => $mail ) );
        // 将 API 响应添加到 submission 结果中，以便在 JavaScript 中访问
        $submission->add_result_props( array( 'my_api_response' => $body ) );

    }
}

代码解释：

1. add_action( 'wpcf7_before_send_mail', 'Kiri_cf7_api_sender' );: 将自定义函数 Kiri_cf7_api_sender 绑定到 wpcf7_before_send_mail 钩子，在邮件发送前执行。
2. if ( 'Quote_form' === $contact_form->title ) {: 检查当前处理的表单是否为 "Quote_form"，确保代码只在特定表单上执行。
3. $submission = WPCF7_Submission::get_instance();: 获取当前表单提交的实例。
4. $posted_data = $submission->get_posted_data();: 获取用户提交的表单数据。
5. API 请求逻辑: 根据表单数据 $urltest 的值，构建 API URL，并使用 wp_remote_post 发起 API 请求。
6. $mail = $contact_form->prop( 'mail' );: 获取 Contact Form 7 的邮件属性，包括邮件主题、正文等。
7. $mail['body'] = str_replace( '{{api_response}}', $body['field'] , $mail['body'] );: 使用从 API 响应中提取的数据 $body['field'] 替换邮件正文中的占位符 {{api_response}}。注意，你需要根据实际的 API 响应结构调整 $body['field'] 的值。 如果 $body 是 JSON 字符串，你需要先使用 json_decode($body, true) 解码。
8. $contact_form->set_properties( array( 'mail' => $mail ) );: 更新 Contact Form 7 的邮件属性，将修改后的邮件正文应用到邮件发送过程中。
9. $submission->add_result_props( array( 'my_api_response' => $body ) );: 将 API 响应添加到 submission 结果中，以便在 JavaScript 中访问。

步骤 3：在 JavaScript 中访问 API 响应

Contact Form 7 触发 wpcf7mailsent 事件，允许我们在 JavaScript 中处理邮件发送后的逻辑。我们可以监听这个事件，并从 event.detail.my_api_response 中获取 API 响应数据。

这段 JavaScript 代码监听 wpcf7mailsent 事件，并在控制台中打印 API 响应数据。你可以根据需要在 JavaScript 中使用这些数据，例如更新页面内容或发送到数据层。

注意事项

• API 密钥安全： 不要将 API 密钥硬编码到代码中。使用 WordPress 的选项 API 或环境变量来存储和访问 API 密钥。
• 错误处理： 在 API 请求中添加错误处理机制，以处理请求失败的情况。
• 数据验证： 验证从 API 接收到的数据，以确保其格式正确且安全。
• 性能优化： 考虑 API 请求的性能影响。如果 API 请求时间过长，可能会影响用户体验。可以使用缓存机制来减少 API 请求次数。
• 调试： 使用 error_log() 函数或 WordPress 的调试工具来调试代码。
• 占位符: 确保 Contact Form 7 邮件模板中的占位符与代码中使用的占位符一致。

总结

通过使用 wpcf7_before_send_mail 钩子，我们可以轻松地在 Contact Form 7 表单提交之前从 API 获取数据，并将这些数据添加到邮件内容中。同时，通过 wpcf7mailsent 事件，我们可以在 JavaScript 中访问 API 响应，从而实现更灵活的表单处理逻辑。 请务必根据实际需求调整代码，并注意安全性和性能优化。