React error 404 on form submit with Netlify Forms

Question

I followed the netlify documentation for create a simple contact form on my website. But when i submit the form, i got a 404 error in the console.

Here is my code :

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:[email protected]">[email protected]</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>
        )
    }
}

The contact form is actually detected by Netlify, when the preview is build i got this in the netlify logs :

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

My form is listed in the netlify forms too.

But when i submit, nothing happen, 404 and the form data is not added to the Netlify forms UI.

Answer 1

It is due to your modal is not rendered on the build.

Netlify will analyze your HTML to find the data-netlify="true" tag. But on the build, there is no tag because JavaScript will add the modal when the user clicks on the button and not at the build time.

To solve the problem follow this workaround. Add a simple HTML form in your public/index.html as below and make sure to hide it.

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

Then in your JSX form (original form) add this <input type="hidden" name="form-name" value="value_of_name_attribute_in_form_tag" />

You can get full details on the link below.

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

Answer 2

The problem with your request is your are setting in the header the request type as application/x-www-form-urlencoded and the server is expecting form-encoded data, but the code is sending JSON-encoded data.

Replace this part of your code and it should work:

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