
本文旨在指导开发者如何利用 Contact Form 7 插件,在表单提交前通过 API 请求获取数据,并将这些数据动态地填充到邮件正文中。我们将通过修改邮件模板,并使用 `wpcf7_before_send_mail` 钩子函数来实现这一功能,同时也会介绍如何在 JavaScript 中获取 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 函数添加的自定义属性。
注意事项
总结
通过以上步骤,你可以使用 Contact Form 7 通过 API 响应动态填充邮件内容,并在 JavaScript 中获取 API 响应,从而实现更灵活的表单处理逻辑。这种方法可以应用于各种场景,例如根据用户输入动态生成报价单、发送个性化邮件等。记住,根据你的实际需求调整代码,并进行充分的测试,以确保一切正常运行。
以上就是使用 Contact Form 7 通过 API 响应动态填充数据的详细内容,更多请关注php中文网其它相关文章!
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移,垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是,许多工具可以让 Windows 保持平稳运行。
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号