React项目中Netlify表单已识别但提交无法被捕获的问题求助

我使用Netlify表单已有一段时间，十分认可它的功能。这是我首次在React项目中集成该表单，按照官方指南配置后，表单已在Netlify控制台被识别，但提交操作无任何反应，控制台也未记录错误日志。我尝试调整相关属性仍无法解决问题，不知从何排查。

站点地址：eddie-traylor.netlify.app/
GitHub仓库地址：github.com/naughty-cat-team/eddie-traylor

body标签下的index.html代码 #

<form name="contact" netlify netlify-honeypot="bot-field" hidden>
    <input type="text" name="name" />
    <input type="email" name="email" />
    <input type="tel" name="phone" />
    <textarea name="message"></textarea>
  </form>

Contact表单组件代码 #

import { useForm } from "react-hook-form";

const Contact = () => {
  const {
    register,
    handleSubmit,
    formState: { errors },
  } = useForm();
  const onSubmit = (data) => window.location.replace("/thankyou");

  return (
    <div className="px-6 mx-auto md:px-8 max-w-[1110px]">
      <div className="bg-white p-6 xl:px-10">
        <div className="hero-bg md:flex md:items-start xl:mt-10">
          <div className="pt-[50px] px-6 text-white md:px-10 md:basis-1/2">
            <h2>CONTACT</h2>
            <p className="mt-4">
              Lorem, ipsum dolor sit amet consectetur adipisicing elit. Esse nam, beatae quas dolorum cum temporibus? Veniam ullam quibusdam nam! Sint delectus fugit eveniet
              blanditiis quas ratione animi vero cum.
            </p>
          </div>

          <form method="post" name="contact" onSubmit={handleSubmit(onSubmit)} className="contact px-6 pb-[70px] md:px-10 md:basis-1/2 md:pt-[50px]">
            <input type="hidden" name="form-name" value="contact" />
            <div className="mb-[50px] space-y-[14px]">
              <div className="relative w-full">
                <input
                  type="text"
                  name="name"
                  {...register("name", {
                    required: "Required",
                  })}
                  placeholder="Name"
                  className={`${errors.name ? "border-red placeholder:text-red/50" : ""}`}
                />
                {errors.name && <p className="absolute bottom-5 text-[12px] leading-[18px] tracking-[.08px] text-red right-4 md:right-6 italic">{errors.name.message}</p>}
              </div>
              <div className="relative">
                <input
                  type="email"
                  name="email"
                  {...register("email", {
                    required: "Required",
                    pattern: {
                      value: /[a-zA-Z0-9+_.-]+@[a-zA-Z0-9.-]+$/,
                      message: "Invalid",
                    },
                  })}
                  placeholder="Email Address"
                  className={`${errors.email ? "border-red placeholder:text-red/50" : ""}`}
                />
                {errors.email && <p className="absolute bottom-5 text-[12px] leading-[18px] tracking-[.08px] text-red right-4 md:right-6 italic">{errors.email.message}</p>}
              </div>
              <div>
                <input type="tel" name="phone" {...register("phone")} placeholder="Phone" />
              </div>
              <div className="relative">
                <textarea
                  type="text"
                  name="message"
                  cols="30"
                  rows="4"
                  {...register("message", {
                    required: "Required",
                  })}
                  placeholder="Your Message"
                  className={`${errors.message ? "border-red placeholder:text-red/50" : ""}`}
                ></textarea>
                {errors.message && <p className="absolute bottom-5 text-[12px] leading-[18px] tracking-[.08px] text-red right-4 md:right-6 italic">{errors.message.message}</p>}
              </div>
            </div>
            <button type="submit" className="btn text-center text-white w-[170px] h-auto md:w-auto">
              Submit
            </button>
          </form>
        </div>
      </div>
    </div>
  );
};

export default Contact;

排查与解决方案 #

1. 补全蜜罐字段 #

你在index.html的表单中声明了netlify-honeypot="bot-field"，但React表单里没有对应的输入框。Netlify会验证这个字段，只有为空时才会接受提交，缺失会导致提交被拦截。在React表单内添加隐藏的蜜罐字段：

<input type="text" name="bot-field" className="hidden" aria-hidden="true" />

2. 修复提交逻辑冲突 #

你的onSubmit直接跳转页面，跳过了Netlify的默认提交流程。修改为先触发表单提交，再执行跳转：

const onSubmit = async (data, e) => {
  // 保留Netlify的默认提交逻辑
  await e.target.submit();
  // 提交成功后跳转感谢页
  window.location.replace("/thankyou");
};

如果需要更可控的提交方式，也可以用Netlify的API手动提交数据：

const onSubmit = async (data) => {
  const formData = new FormData();
  Object.keys(data).forEach(key => formData.append(key, data[key]));
  formData.append("form-name", "contact");

  try {
    await fetch("/", {
      method: "POST",
      headers: { "Content-Type": "application/x-www-form-urlencoded" },
      body: new URLSearchParams(formData).toString()
    });
    window.location.replace("/thankyou");
  } catch (error) {
    console.error("提交失败:", error);
  }
};

3. 检查表单属性与控制台配置 #

• 确保React表单上添加netlify属性，或保持index.html中隐藏表单的netlify属性不变，且两个表单的name一致（当前已满足）。
• 登录Netlify控制台，进入站点的Forms页面，确认contact表单的字段与前端输入框完全匹配，提交通知、存储等配置未被禁用。

4. 用开发者工具排查网络请求 #

打开浏览器开发者工具的Network标签，提交表单时查看是否有POST请求发送到站点根路径：

• 若无请求，说明前端提交逻辑未触发；
• 若有请求，查看响应状态码和内容，判断是否存在后端配置错误。

内容的提问来源于stack exchange，提问作者Brenden