0

我无法通过使用 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”。

感谢您的帮助和时间。

4

1 回答 1

2

您有一个 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". 您可以在有关 reCAPTCHA 2 的 Netlify 文档中找到更多信息。

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

除了标签上的这个配置之外<form>，您还需要设置您的POST操作配置。Netlify 在他们的回复中有点奇怪，a404并不意味着您的表单不存在，这意味着请求失败。我通常应用我发布的确切<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 文章中查看示例。

于 2020-09-06T15:20:45.500 回答