联系表单 7 在 Nuxt3 应用程序中返回验证错误

Question

我正在为一个使用无头 Wordpress 实例作为后端的客户端构建一个 Nuxt3 应用程序。页脚中有新闻通讯注册功能，因此我安装了 Contact Form 7 和 Flamingo 插件来捕获电子邮件。

当我在 Insomnia 中测试端点时，我得到了成功的结果，并且可以验证电子邮件是否存储在 Wordpress 中。但是，当我通过应用程序提交时，我收到验证错误：

{
    "contact_form_id": 921,
    "status": "validation_failed",
    "message": "One or more fields have an error. Please check and try again.",
    "invalid_fields": [
        {
            "field": "your-email",
            "message": "Please fill out this field.",
            "idref": null,
            "error_id": "-ve-your-email"
        }
    ],
    "posted_data_hash": "",
    "into": "#"
}

这是我正在运行的从前端提交的代码：

try {
      const runtimeConfig = useRuntimeConfig();
      const body = new FormData();

      body.append('your-email', email.value);
      body.append('your-subject', 'Newsletter Subscription');
      body.append('your-message', 'A user has subscribed to the newsletter.');
      body.append('your-name', 'Corporation USA');

      const res = await $fetch<NewsletterResponse>(`${runtimeConfig.public.NEWSLETTER_ENDPOINT}`, {
        method: 'POST',
        headers: { 'Content-Type': 'multipart/form-data' },
        body,
      });
      console.log({ res });
      email.value = '';
    } catch (err: any) {
      console.log({ err });
    } finally {
      submitting.value = false;
    }

我已验证电子邮件已通过密钥

your-email

传递到有效负载。这里可能有什么问题？

Answer 1

实施 Cloudflare 安全性并禁用 reCAPTCHA 后，我遇到了 Contact Form 7 插件的问题，指示“一个或多个字段有错误。请检查并重试。”然而，解决方案很简单：通过在表单中的提交按钮之前添加 Cloudflare Turnstile，一切都恢复正常运行。我很欣赏无缝集成！如果您需要进行类似的调整，请记住修改表单模板以在提交操作之前包含 Cloudflare Turnstile [cf7-simple-turnstile]。现在一切都很顺利，谢谢！