Реагировать на ошибку 404 при отправке формы с помощью Netlify Forms

Question

Я следовал документации netlify для создания простой контактной формы на своем веб-сайте. Но когда я отправляю форму, я получаю ошибку 404 в консоли.

Вот сайт предварительного просмотра: https://deploy-preview-5--florent-vandroy.netlify.app/

Вот мой код:

      import React from "react"
import {Row, Col, Form, Button, Alert} from "react-bootstrap"
import axios from "axios"
import * as qs from "query-string"

export default class Contact extends React.Component {

    constructor(props) {
        super(props)
        this.domRef = React.createRef()
        this.state = { feedbackMsg: null, variant: 'info' }
    }
    
      handleSubmit(event) {
        this.setState({
            feedbackMsg: "Envoi en cours..",
            variant: 'info'
        })
        event.preventDefault()
        const formData = {}
        Object.keys(this.refs).map(key => (formData[key] = this.refs[key].value))

        const axiosOptions = {
            url: window.location.href,
            method: "post",
            headers: { "Content-Type": "application/x-www-form-urlencoded" },
            data: qs.stringify(formData),
        }


        axios(axiosOptions)
            .then(response => {
                this.setState({
                    feedbackMsg: "Votre demande a bien été envoyé.",
                    variant: 'success'
                })
                this.domRef.current.reset()
            })
            .catch(err =>
                this.setState({
                    feedbackMsg: "Une erreur s'est produite.",
                    variant: 'danger'
                })
            )
      }

    render() {
        return (
            <div>
                <h2>Me contacter.</h2>
                <Row>
                    <Col xs={12} md={12}>
                    Actuellement, le développement web n'étant pas ma seule activité. Il est plus facile pour moi de communiquer par email : <a href="mailto:[e-mail]">[e-mail]</a>. <br />Vous pouvez également remplir le formulaire de contact ci-dessous.
                    </Col>
                </Row>
                <Row>
                    <form ref={this.domRef} name="Contact Form" method="POST" data-netlify="true" onSubmit={event => this.handleSubmit(event)}>
                        <input type="hidden" name="form-name" value="Contact Form" />
                        <Form.Group>
                            <Form.Label>Votre prénom / nom</Form.Label>
                            <Form.Control ref="name" name="name" />
                        </Form.Group>
                        <Form.Group>
                            <Form.Label>Votre adresse email</Form.Label>
                            <Form.Control ref="email" type="email" name="email" />
                        </Form.Group>
                        <Form.Group>
                            <Form.Label>Votre message</Form.Label>
                            <Form.Control ref="message" as={"textarea"} rows={"5"} name="message" />
                        </Form.Group>

                        {this.state.feedbackMsg && <Alert className={"mt-5"} variant={this.state.variant}>{this.state.feedbackMsg}</Alert>}
                        
                        <Button type="submit" size={"lg"} className={"mt-5"}>Envoyer mon message</Button>
                    </form>
                </Row>
            </div>
        )
    }
}

Контактная форма фактически обнаруживается Netlify, когда предварительный просмотр построен, я получил это в журналах netlify:

      2:49:27 PM: Detected form fields:
 - name
 - email
 - message

Моя форма также указана в формах netlify.

Но когда я отправляю, ничего не происходит, 404, и данные формы не добавляются в пользовательский интерфейс форм Netlify.

Answer 1

Это связано с тем, что ваше модальное окно не отображается в сборке.

Netlify проанализирует ваш HTML, чтобы найти тег data-netlify="true". Но в сборке нет тега, потому что JavaScript добавит модальное окно, когда пользователь нажимает кнопку, а не во время сборки.

Чтобы решить проблему, следуйте этому обходному пути. Добавьте простую HTML-форму в ваш public/index.html, как показано ниже, и обязательно скройте ее.

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

Затем в вашей форме JSX (исходная форма) добавьте это<input type="hidden" name="form-name" value="value_of_name_attribute_in_form_tag" />

Вы можете получить полную информацию по ссылке ниже.

https://www.netlify.com/blog/2017/07/20/how-to-integrate-netlifys-form-handling-in-a-react-app/

Answer 2

Проблема с вашим запросом заключается в том, что вы устанавливаете в заголовке тип запроса как application/x-www-form-urlencoded , и сервер ожидает данные в кодировке формы, но код отправляет данные в кодировке JSON .

Замените эту часть вашего кода, и он должен работать:

      const axiosOptions = {
  url: window.location.href,
  method: "post",
  headers: { "Content-Type": "application/x-www-form-urlencoded" },
  data: new URLSearchParams(formData).toString(),
};