本文旨在指导开发者如何利用 Contact Form 7 插件，在表单提交前通过 API 请求获取数据，并将这些数据动态地填充到邮件正文中。我们将通过修改邮件模板，并使用 `wpcf7_before_send_mail` 钩子函数来实现这一功能，同时也会介绍如何在 JavaScript 中获取 API 响应，以便进行进一步处理。
动态填充邮件正文：使用 API 响应
Contact Form 7 是一款强大的 WordPress 表单插件，但有时我们需要在表单提交后，根据一些外部数据（例如 API 响应）来动态修改邮件内容。以下介绍一种实现此目标的方法，它主要通过在邮件模板中使用占位符，并在 wpcf7_before_send_mail 钩子函数中进行替换。
1. 修改 Contact Form 7 邮件模板
首先，在 Contact Form 7 的邮件选项卡中，找到邮件正文部分。在这里，你可以添加一个占位符，用于稍后替换为 API 响应的内容。例如：
尊敬的 [your-name]，
这是邮件正文...
{{api_response}}
"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."在这个例子中，{{api_response}} 就是我们将要替换的占位符。
2. 使用 wpcf7_before_send_mail 钩子函数
接下来，我们需要使用 wpcf7_before_send_mail 钩子函数来在邮件发送前修改邮件内容。将以下代码添加到你的 functions.php 文件或自定义插件中：
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']; // Not sure if this should be a form field, or just some kind of option field.
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 );
}
}
// Get the email tab from the contact form.
$mail = $contact_form->prop( 'mail' );
// Retreive the mail body, and string replace our placeholder with the field from the API Response.
// Whatever the api response is within the $body - if you have to json decode or whatever to get it.
$mail['body'] = str_replace( '{{api_response}}', $body['field'] , $mail['body'] );
// Update the email with the replaced text, before sending.
$contact_form->set_properties( array( 'mail' => $mail ) );
// Push a response to the event listener wpcf7mailsent.
$submission->add_result_props( array( 'my_api_response' => $body ) );
}
}这段代码首先检查表单的标题是否为 'Quote_form'。如果是，它会获取表单提交的数据，并根据 urltest 字段的值来确定要调用的 API 地址。然后，它调用 API 并获取响应，并将响应存储在 $body 变量中。
关键部分是：
$mail = $contact_form->prop( 'mail' );
$mail['body'] = str_replace( '{{api_response}}', $body['field'] , $mail['body'] );
$contact_form->set_properties( array( 'mail' => $mail ) );这段代码获取邮件的配置，使用 str_replace 函数将 {{api_response}} 占位符替换为 $body['field'] 的值（这里假设 API 响应是一个数组，并且你需要获取 field 键对应的值。你需要根据实际的 API 响应结构进行调整）。最后，它使用 set_properties 函数更新邮件配置，确保修改后的邮件内容被发送。
3. 在 JavaScript 中获取 API 响应
除了修改邮件内容，有时我们还需要在客户端 JavaScript 中获取 API 响应，以便进行进一步的处理。Contact Form 7 提供了一个 wpcf7mailsent 事件，可以在邮件发送成功后触发。我们可以监听这个事件，并获取 API 响应。
将以下代码添加到你的主题或插件的 JavaScript 文件中：
<script type="text/javascript">
document.addEventListener('wpcf7mailsent', function (event) {
console.log(event.detail.my_api_response);
}, false);
</script>这段代码监听 wpcf7mailsent 事件，并在控制台中打印出 event.detail.my_api_response 的值。my_api_response 是我们在 PHP 代码中使用 add_result_props 函数添加的自定义属性。
注意事项
- 确保你的 API 地址是正确的，并且 API 能够正常响应。
- 根据实际的 API 响应结构，修改 $body['field'] 中的键名。
- 如果 API 响应是 JSON 格式的字符串，你需要使用 json_decode() 函数将其转换为 PHP 数组。
- 在生产环境中，应该对 API 请求进行错误处理，以防止出现意外情况。
- 'Quote_form' === $contact_form->title 这行代码检查表单标题。确保它与你实际使用的表单标题匹配。
总结
通过以上步骤，你可以使用 Contact Form 7 通过 API 响应动态填充邮件内容，并在 JavaScript 中获取 API 响应，从而实现更灵活的表单处理逻辑。这种方法可以应用于各种场景，例如根据用户输入动态生成报价单、发送个性化邮件等。记住，根据你的实际需求调整代码，并进行充分的测试，以确保一切正常运行。
