Ошибка 404 отправки контактной формы Netlify-forms

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, а затем, как и ожидалось, получаю свою страницу с благодарностью.

Я делаю что-то неправильно? Я вижу свой "Портфолио_Контакт" в разделе "Формы".

Спасибо за вашу помощь и время.

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 для 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));
  };

Примечание: ваш запрос не будет работать в вашей локальной среде

Эта конфигурация важна, потому что устанавливает заголовки запроса, что не удается в вашем образце.

Вы можете проверить образец в этой статье для разработчиков.