Проблема с формой Gatsby Netlify, не получающей представления

Question

Я получил форму Netlify, работающую и принимающую заявки, но как только я начал настраивать AJAX в соответствии с https://docs.netlify.com/forms/setup/, я не могу понять, почему заявки не принимаются.

Вещи, которые я пробовал:

1. Удаление скрытого ввода "имя формы"
2. Удаление рекапчи
3. Запуск "Гэтсби чистый"
4. Удаление атрибута метода открывающего тега формы (метод: "POST")
5. Удаление атрибута действия из открывающего тега формы и установка его непосредственно в handleSubmit:.then(() => navigate("/thank-you/"))

Мы очень ценим любые предложения или исправления!

contact-form.js:

      import React, { setState } from "react"
import styled from "styled-components"
import Recaptcha from "react-google-recaptcha"
import { navigate } from "gatsby"
import { Button, Col, Form, Row } from "react-bootstrap"
import { breakpoints } from "../utils/breakpoints"

const RECAPTCHA_KEY = process.env.GATSBY_RECAPTCHA_KEY

export default function ContactForm() {
  const [state, setState] = React.useState({})
  const recaptchaRef = React.createRef() // new Ref for reCaptcha
  const [buttonDisabled, setButtonDisabled] = React.useState(true)

  const handleChange = e => {
    setState({ ...state, [e.target.name]: e.target.value })
  }
  const encode = data => {
    return Object.keys(data)
      .map(key => encodeURIComponent(key) + "=" + encodeURIComponent(data[key]))
      .join("&")
  }
  const handleSubmit = e => {
    e.preventDefault()
    const form = e.target
    const recaptchaValue = recaptchaRef.current.getValue()

    fetch("/", {
      method: "POST",
      headers: { "Content-Type": "application/x-www-form-urlencoded" },
      body: encode({
        "form-name": "contact",
        "g-recaptcha-response": recaptchaValue,
        ...state,
      }),
    })
      .then(() => navigate(form.getAttribute("action")))
      .catch(error => alert(error))
  }
  return (
    <Form
      name="contact"
      method="POST"
      netlify
      action="/thank-you"
      netlify-honeypot="bot-field"
      data-netlify-recaptcha="true"
      onSubmit={handleSubmit}
    >
      <Row>
        <Col md={12}>
          <h3>Message Us</h3>
        </Col>
      </Row>
      <Row>
        <Col md={6}>
          <Form.Group hidden>
            <Form.Label htmlFor="bot-field">
              Bot Field: Humans do not fill out!
            </Form.Label>
            <Form.Control name="bot-field" />
            <Form.Control name="form-name" value="contact" />
          </Form.Group>
          <Form.Group>
            <Form.Label htmlFor="first-name">First Name</Form.Label>
            <Form.Control
              required
              size="lg"
              type="text"
              name="first-name"
              onChange={handleChange}
            />
          </Form.Group>
        </Col>
        <Col md={6}>
          <Form.Group>
            <Form.Label htmlFor="last-name">Last Name</Form.Label>
            <Form.Control
              required
              size="lg"
              type="text"
              name="last-name"
              onChange={handleChange}
            />
          </Form.Group>
        </Col>
      </Row>
      <Row>
        <Col md={6}>
          <Form.Group>
            <Form.Label htmlFor="email">Email</Form.Label>
            <Form.Control
              required
              size="lg"
              type="email"
              name="email"
              onChange={handleChange}
            />
          </Form.Group>
        </Col>
        <Col md={6}>
          <Form.Group>
            <Form.Label htmlFor="phone">Phone (Optional)</Form.Label>
            <Form.Control
              size="lg"
              type="tel"
              name="phone"
              onChange={handleChange}
            />
          </Form.Group>
        </Col>
      </Row>
      <Row>
        <Col md={12}>
          <Form.Group>
            <Form.Label htmlFor="message">Message</Form.Label>
            <Form.Control
              required
              as="textarea"
              rows="3"
              placeholder="Enter your message here."
              name="message"
              onChange={handleChange}
            />
          </Form.Group>
        </Col>
      </Row>
      <Row>
        <Col md={12}>
          <FormControls>
            <Recaptcha
              ref={recaptchaRef}
              sitekey={RECAPTCHA_KEY}
              size="normal"
              id="recaptcha-google"
              onChange={() => setButtonDisabled(false)} // disable the disabled button!
              className="mb-3"
            />
            <div>
              <Button className="mr-3" type="reset" value="Eraser">
                Clear
              </Button>
              <Button type="submit" disabled={buttonDisabled}>
                Send
              </Button>
            </div>
          </FormControls>
        </Col>
      </Row>
    </Form>
  )
}
const FormControls = styled.div`
  display: flex;
  align-items: center;
  flex-direction: column;
  @media ${breakpoints.sm} {
    flex-direction: row;
    justify-content: space-between;
  }
  button[disabled] {
    cursor: not-allowed;
  }

gatsby-config:

      require("dotenv").config({
  path: `.env.${process.env.NODE_ENV}`,
})
module.exports = {
  siteMetadata: {
    title: `...`,
    description: `...`,
    author: `...`,
  },
  flags: {
    DEV_SSR: false,
  },
  plugins: [
    `gatsby-plugin-gatsby-cloud`,
    `gatsby-plugin-image`,
    `gatsby-plugin-sharp`,
    `gatsby-plugin-styled-components`,
    `gatsby-plugin-typography`,
    `gatsby-plugin-react-helmet`,
    `gatsby-transformer-sharp`,     
  },
}

Answer 1

Ваше управление состоянием выглядит хорошо, обязательно иметь (и проверять) входное значение скрытых полей, которое должно точно соответствовать имени формы в JSX, а также на панели инструментов Netlify. Предполагая, что все правильно названо, я считаю, что ваша проблема связана с Form компонент, который должен выглядеть так:

      <Form
  name="contact"
  method="POST"
  action="/thank-you"
  data-netlify-honeypot="bot-field"
  data-netlify-recaptcha="true"
  data-netlify="true"
  onSubmit={handleSubmit}
>

Обратите внимание data-netlify-honeypot а также data-netlify значение.

Дополнительные ссылки для основы вашей установки:

• https://www.gatsbyjs.com/docs/building-a-contact-form/
• https://www.seancdavis.com/blog/how-to-use-netlify-forms-with-gatsby/
• https://medium.com/@szpytfire/setting-up-netlify-forms-with-gatsby-and-react-5ee4f56a79dc