Nuxt3应用中Contact Form 7返回验证错误问题排查

开发基于无头WordPress后端的Nuxt3应用，底部集成新闻通讯订阅功能，使用Contact Form 7 + Flamingo插件收集邮箱。

• Insomnia测试接口时，请求成功，邮箱正常存入WordPress
• 前端提交时收到验证错误，提示your-email字段未填写，错误响应如下：

{
    "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;
    }

已确认请求payload携带your-email字段值，求排查问题。

1. 移除手动设置的Content-Type头 #

当使用FormData作为请求体时，浏览器会自动生成包含boundary的Content-Type头（格式类似multipart/form-data; boundary=----WebKitFormBoundaryXXX）。手动设置'Content-Type': 'multipart/form-data'会丢失关键的boundary参数，导致WordPress后端无法正确解析表单数据，进而认为your-email字段为空。

修改前端代码，删除headers中的Content-Type配置：

const res = await $fetch<NewsletterResponse>(`${runtimeConfig.public.NEWSLETTER_ENDPOINT}`, {
  method: 'POST',
  // 移除这一行 headers: { 'Content-Type': 'multipart/form-data' },
  body,
});

2. 确认email.value的实际有效值 #

虽然你确认payload携带字段，但建议在body.append前打印email.value，验证提交时该值是否确实为有效的邮箱字符串，而非undefined、空字符串或其他无效值：

console.log('提交的邮箱值：', email.value); // 新增这行调试
body.append('your-email', email.value);

可能的场景：输入框绑定逻辑有误，或提交时输入框内容还未同步到email.value。

3. 核对Contact Form 7的表单配置 #

• 确认WordPress后台中Contact Form 7的表单字段名与前端提交的your-email完全一致（注意大小写、下划线等细节）
• 检查该字段的验证规则，是否设置了特殊的格式要求（比如必须包含特定域名），导致即使有值也被判定为无效

内容的提问来源于stack exchange，提问作者J. Jackson