Netlify-forms 联系表单提交 404 错误

Question

我无法通过使用 Netlify-Forms 提交我的联系页面，我收到 404 错误。

我有以下表格：-

<form name="Portfolio_Contact" 
      method="POST" 
      data-netlify="true"
      data-netlify-honeypot="bot-field"
      action="/thank-you">
    <div className="form-group">
      <input
        type="text"
        name="name"
        placeholder="name"
        className="form-control"
      />
      <input
        type="email"
        placeholder="email"
        name="email"
        className="form-control"
      />
      <textarea
        name="message"
        rows="5"
        placeholder="message"
        className="form-control"
      ></textarea>
      <div data-netlify-recaptcha="true"></div>
    </div>
    <button type="submit" className="submit-btn btn">
      send me your message
    </button>
  </form>

当我提交它时，我首先收到 404 错误，然后按预期获得我的感谢页面。

我做错了吗？我可以在表单部分看到我的“Portfolio_Contact”。

感谢您的帮助和时间。

Answer 1

您有一个 reCAPTCHA 集，但您的表单并不期待它，因为您的 <form> 标记中没有定义它。只需添加：

<form name="Portfolio_Contact" 
      method="POST" 
      data-netlify="true"
      data-netlify-honeypot="bot-field" 
      data-netlify-recaptcha="true"
      action="/thank-you">

发现data-netlify-recaptcha="true"。您可以在Netlify documentation for reCAPTCHA 2找到更多信息。

我在网络上得到这个：- Referrer Policy: strict-origin-when-cross-origin

除了<form> 标签上的这个配置，您还需要设置POST 操作配置。 Netlify 的回复有点奇怪，404 并不意味着您的表单不存在，而是意味着请求失败。我通常应用我发布的确切 <form> 配置，但我添加了一个自定义提交句柄函数来设置请求配置：

<form name="Portfolio_Contact" 
      method="POST" 
      data-netlify="true"
      data-netlify-honeypot="bot-field" 
      data-netlify-recaptcha="true"
      action="/thank-you">
    <div className="form-group">
      <input
        type="text"
        name="name"
        placeholder="name"
        className="form-control"
      />
      <input
        type="email"
        placeholder="email"
        name="email"
        className="form-control"
      />
      <textarea
        name="message"
        rows="5"
        placeholder="message"
        className="form-control"
      ></textarea>
      <div data-netlify-recaptcha="true"></div>
    </div>
    <button type="submit" className="submit-btn btn" onClick={handleSubmit}>
      send me your message
    </button>
  </form>

您的handleSubmit 函数：

  const handleSubmit = event => {
    event.preventDefault();

   // do your verifications and checks
   if(!verified) return false    

    const REQUEST_PARAMETERS = {
      method: `POST`,
      headers: { 'Content-Type': `application/x-www-form-urlencoded` },
      body: encode({ ...data }), //your data here. Needs to have your form-name attribute set
    };

    fetch(`/`, REQUEST_PARAMETERS)
      .then(() => {
        console.log(`OK`);
      })
      .catch(error => alert(error));
  };

注意：您的请求在您的本地环境中不起作用

此配置很重要，因为设置了请求的标头，即您的示例中失败的原因。

您可以在此DEV article 中查看样本。