本文介绍了如何使用 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 响应的数据。
这段代码将在邮件发送成功后，将 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，可以方便地在前端进行进一步的处理和展示。
