本文介绍了如何使用 API 响应动态填充 Contact Form 7 表单提交的数据，并将其添加到邮件正文中。通过 `wpcf7_before_send_mail` 钩子，在邮件发送前获取 API 数据，然后替换邮件模板中的占位符，最终将 API 响应添加到邮件内容中，同时提供将 API 响应推送到 JavaScript 事件 `wpcf7mailsent` 的方法。
Contact Form 7 是 WordPress 中一款流行的表单插件。有时，我们需要在表单提交后，根据用户输入的数据从外部 API 获取信息，并将这些信息添加到邮件正文中。本文将详细介绍如何实现这一功能。
核心思路
核心思路是利用 Contact Form 7 提供的 wpcf7_before_send_mail 钩子，在邮件发送之前拦截表单数据，调用 API 获取数据，然后修改邮件内容，将 API 响应添加到邮件正文中。
具体步骤
在 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."
这个占位符将在后面的步骤中被 API 响应的内容替换。
使用 wpcf7_before_send_mail 钩子获取 API 数据并替换占位符
接下来，你需要编写一个函数，挂载到 wpcf7_before_send_mail 钩子上。这个函数将完成以下任务：
获取表单提交的数据。调用 API 获取响应数据。替换邮件正文中的占位符。更新 Contact Form 7 的邮件属性。
以下是一个示例代码：
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 ) ); }}
代码解释:
add_action( ‘wpcf7_before_send_mail’, ‘Kiri_cf7_api_sender’ );：将 Kiri_cf7_api_sender 函数挂载到 wpcf7_before_send_mail 钩子上。if ( ‘Quote_form’ === $contact_form->title ) { … }：确保这段代码只在特定的 Contact Form 7 表单（这里是 Quote_form）上执行。$submission = WPCF7_Submission::get_instance();：获取当前表单提交的实例。$posted_data = $submission->get_posted_data();：获取表单提交的数据。$name = $posted_data[‘your-name’]; 等：从提交的数据中获取特定字段的值。$response = wp_remote_post( $url ); 和 $body = wp_remote_retrieve_body( $response );：使用 WordPress 的 wp_remote_post 函数调用 API，并获取响应内容。$mail = $contact_form->prop( ‘mail’ );：获取 Contact Form 7 的邮件属性。$mail[‘body’] = str_replace( ‘{{api_response}}’, $body[‘field’] , $mail[‘body’] );：使用 str_replace 函数将邮件正文中的占位符 {{api_response}} 替换为 API 响应的内容。这里假设 API 响应是一个数组，你需要根据实际情况调整 $body[‘field’]。$contact_form->set_properties( array( ‘mail’ => $mail ) );：更新 Contact Form 7 的邮件属性，使修改后的邮件内容生效。$submission->add_result_props( array( ‘my_api_response’ => $body ) );：将 API 响应添加到提交结果属性中，以便在 JavaScript 中访问。
在 JavaScript 中监听 wpcf7mailsent 事件
Contact Form 7 在邮件成功发送后会触发 wpcf7mailsent 事件。你可以在 JavaScript 中监听这个事件，并访问 API 响应的数据。
document.addEventListener('wpcf7mailsent', function (event) { console.log(event.detail.my_api_response); }, false);
这段代码将在邮件发送成功后，将 API 响应的数据打印到浏览器的控制台中。event.detail.my_api_response 包含了我们在 PHP 代码中使用 $submission->add_result_props() 添加的 API 响应数据。
注意事项
确保 API 的 URL 是正确的，并且你的 WordPress 服务器可以访问该 API。根据 API 响应的格式，正确解析 API 响应的内容，并将其插入到邮件正文中。如果 API 调用失败，应该进行错误处理，避免影响邮件发送。根据实际需求，调整代码中的表单名称和字段名称。$urltest = $posted_data[‘dynamichidden-739’]; 这一行代码需要根据实际情况进行调整，确保 $urltest 变量包含正确的 URL 参数。$body[‘field’] 需要根据 API 返回的 JSON 结构进行调整，确保能够正确获取到需要的数据。
总结
通过以上步骤，你可以使用 API 响应动态填充 Contact Form 7 表单提交的数据，并将其添加到邮件正文中。这种方法可以让你在邮件中包含更丰富的信息，提升用户体验。同时，将 API 响应推送到 JavaScript 事件 wpcf7mailsent，可以方便地在前端进行进一步的处理和展示。
以上就是使用 API 响应填充 Contact Form 7 提交的数据的详细内容，更多请关注php中文网其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1324249.html
微信扫一扫 
支付宝扫一扫 
