使用 API 响应填充 Contact Form 7 提交的数据

本文介绍了如何使用 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 响应添加到邮件正文中。

具体步骤

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."

   登录后复制

   这个占位符将在后面的步骤中被 API 响应的内容替换。

2. 使用 wpcf7_before_send_mail 钩子获取 API 数据并替换占位符

   接下来，你需要编写一个函数，挂载到 wpcf7_before_send_mail 钩子上。这个函数将完成以下任务：

   

   AppMall应用商店

   AI应用商店，提供即时交付、按需付费的人工智能应用服务

   56

   查看详情
   • 获取表单提交的数据。
   • 调用 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-youjiankuohaophpcntitle ) { ... }：确保这段代码只在特定的 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 中访问。

3. 在 JavaScript 中监听 wpcf7mailsent 事件

   Contact Form 7 在邮件成功发送后会触发 wpcf7mailsent 事件。你可以在 JavaScript 中监听这个事件，并访问 API 响应的数据。

   <script type="text/javascript">
       document.addEventListener('wpcf7mailsent', function (event) {
           console.log(event.detail.my_api_response);
       }, false);
   </script>

   登录后复制

   这段代码将在邮件发送成功后，将 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中文网其它相关文章！