本文档旨在指导开发者如何利用 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 ) );
}
}代码解释：
- add_action( 'wpcf7_before_send_mail', 'Kiri_cf7_api_sender' );: 将自定义函数 Kiri_cf7_api_sender 绑定到 wpcf7_before_send_mail 钩子，在邮件发送前执行。
- if ( 'Quote_form' === $contact_form->title ) {: 检查当前处理的表单是否为 "Quote_form"，确保代码只在特定表单上执行。
- $submission = WPCF7_Submission::get_instance();: 获取当前表单提交的实例。
- $posted_data = $submission->get_posted_data();: 获取用户提交的表单数据。
- API 请求逻辑: 根据表单数据 $urltest 的值，构建 API URL，并使用 wp_remote_post 发起 API 请求。
- $mail = $contact_form->prop( 'mail' );: 获取 Contact Form 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) 解码。
- $contact_form->set_properties( array( 'mail' => $mail ) );: 更新 Contact Form 7 的邮件属性，将修改后的邮件正文应用到邮件发送过程中。
- $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 响应数据。
<script type="text/javascript">
document.addEventListener('wpcf7mailsent', function (event) {
console.log(event.detail.my_api_response);
}, false);
</script>这段 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 响应，从而实现更灵活的表单处理逻辑。 请务必根据实际需求调整代码，并注意安全性和性能优化。
