Status 404 () when submit form using react.js stateful component

Hi everyone,
I hope you are all well and in health.
I am currently having issues with a stateful react contact form in neatly. I am getting the console output of: ‘Failed to load resource: the server responded with a status of 404 ()’.
does anyone know anything about it?
please find the code below

import React from “react”;

import ReactFormValidation from “react-form-input-validation”;

import ‘./ValidationForm.css’;

const encode = (data) => {

return Object.keys(data)

  .map(key => encodeURIComponent(key) + "=" + encodeURIComponent(data[key]))

  .join("&");

}

class ValidationForm extends React.Component {

constructor(props) {

super(props);

this.state = {

  fields: {

    customer_name: "",

    customer_Surname: "",

    email_address: "",

    phone_number: "",

    house_address: "",

    pickupTratment: "",

    comments: "",

    AddOns: []

  },

  errors: {}

};

this.form = new ReactFormValidation(this, { locale: "en" });

this.form.useRules({

  customer_name: "required|username_available",

  email_address: "required|email",

  house_address: "required|address",

  phone_number: "required|numeric|digits_between:10,12",

  pickup_time: "required|date",

  pickup_treatment: "requred|treatmet",

   comments: "required|max:200",

 

});

   onsubmit = ( event) => {

 

  fetch("/", {

    method: "POST",

    headers: { "Content-Type": "application/x-www-form-urlencoded" },

    body: encode({ "form-name": "contact", ...this.state })

  })

    .then(() => alert("Success!"))

    .catch(error => alert(error));

  event.preventDefault();

}





ReactFormValidation.registerAsync('username_available', function(username, attribute, req, passes) {

  setTimeout(() => {

    if (username === "foo")

      passes(false, 'Username has already been taken.'); // if username is not available

    else

      passes();

  }, 1000);

});

let messages = ReactFormValidation.getMessages('en');

messages.required = 'Whoops, :attribute field is required.';

ReactFormValidation.setMessages('en', messages);

ReactFormValidation.useLang('en')

}

// when submit btn is clicked

render() {

return (

 

    <div className="container">

      <form

        method="POST"

        type="file"

       data-netlify="true"

        name="contact"

        className="myForm"

        autoComplete="off"

        onSubmit={this.handleSubmit}

      >

        <p>

        <h3 className="text-centre-form">Book your treatment!</h3>

          <label>

            Name

            <input

              type="text"

              name="customer_name"

              onBlur={this.form.handleBlurEvent}

              onChange={this.form.handleChangeEvent}

              value={this.state.fields.customer_name}

              // To override the attribute name

              data-attribute-name="Customer Name"

              data-async

            />

          </label>

          <label className="error">

            {this.state.errors.customer_name

              ? this.state.errors.customer_name

              : ""}

          </label>

        </p>

        <p>

          <label>

            Surname

            <input

              type="text"

              name="customer_Surname"

              onBlur={this.form.handleBlurEvent}

              onChange={this.form.handleChangeEvent}

              value={this.state.fields.customer_surname}

              // To override the attribute name

              data-attribute-name="Customer Surname"

              data-async

            />

          </label>

          <label className="error">

            {this.state.errors.customer_Surname

              ? this.state.errors.customer_Surname

              : ""}

          </label>

        </p>

        <p>

          <label>

            Phone

            <input

              type="tel"

              name="phone_number"

              onBlur={this.form.handleBlurEvent}

              onChange={this.form.handleChangeEvent}

              value={this.state.fields.phone_number}

            />

          </label>

          <label className="error">

            {this.state.errors.phone_number

              ? this.state.errors.phone_number

              : ""}

          </label>

        </p>

        <p>

          <label>

            Email

            <input

              type="email"

              name="email_address"

              onBlur={this.form.handleBlurEvent}

              onChange={this.form.handleChangeEvent}

              value={this.state.fields.email_address}

            />

          </label>

          <label className="error">

            {this.state.errors.email_address

              ? this.state.errors.email_address

              : ""}

          </label>

        </p>

        <p>

        <label>

            Address

            <input

              type="text"

              name="house_address"

              onBlur={this.form.handleBlurEvent}              

              onChange={this.form.handleChangeEvent}

              value={this.state.fields.house_address}

            />

          </label>

          <label className="error">

            {this.state.errors.house_address

              ? this.state.errors.house_address

              : ""}

          </label>

        </p>

       

        <p>

          <label>

            Pickup treatments

          

            <select

              id="pickup_treatment"

              name="pickup_tratment"

              value={this.state.fields.pickup_treatment}

              onChange={this.form.handleChangeEvent}

              onBlur={this.form.handleBlurEvent}

            >

              <option value="Waxing">Waxing</option>

              <option value="Facial">Facial</option>

              <option value="Massage">Massage</option>

              <option value="Yoga">Yoga</option>

              <option value="Manicure">Manicure</option>

              <option value="Pedicure">Pedicure</option>

              <option value="">Shellac Manicure</option>

              <option value="Yoga">Shellac Pedicure</option>

            </select>

          </label>

          <label className="error">

            {this.state.errors.pickup_place

              ? this.state.errors.pickup_place

              : ""}

          </label>

        </p>

        <fieldset>

          <legend>Add ons treatments</legend>

          <p>

            <label className="choice">

              {" "}

              <input

                type="checkbox"

                name="AddOns"

                onChange={this.form.handleChangeEvent}

                value="shellac removal"

              />{" "}

              Shellac removal{" "}

            </label>

          </p>

          <p>

            <label className="choice">

              {" "}

              <input

                type="checkbox"

                name="addOns"

                onChange={this.form.handleChangeEvent}

                value="Nails Repeir"

              />{" "}

              Nails Repeir{" "}

            </label>

          </p>

          <p>

            <label className="choice">

              {" "}

              <input

                type="checkbox"

                name="addOns"

                onChange={this.form.handleChangeEvent}

                value="wax"

              />{" "}

              Upper lips wax{" "}

            </label>

          </p>

          <label className="option">

            {this.state.errors.addOns

              ? this.state.option.addOns

              : ""}

          </label>

        </fieldset>

        <p>

          <label>

            Pickup Date

            <input

              type="date"

              name="pickup_time"

           

              onChange={this.form.handleChangeEvent}

              onBlur={this.form.handleBlurEvent}

              value={this.state.fields.pickup_time}

            />

           

          </label>

          <label className="error">

            {this.state.errors.pickup_time

              ? this.state.errors.pickup_time

              : ""}

          </label>

        </p>

        <p>

          <label>

            Specify treatment

            <textarea

              type="file"

              name="comments"

              maxLength="200"

              value={this.state.fields.comments}

          

              onChange={this.form.handleChangeEvent}

              onBlur={this.form.handleBlurEvent}

            ></textarea>

          </label>

          <label className="error">

            {this.state.errors.comments

              ? this.state.errors.comments

              : ""}

          </label>

        </p>

        <p>

        <button className="form-button" type="submit">Submit Booking</button>

        </p>

      </form>

    </div>

);

}

}

export default ValidationForm;

hey there, not a JS expert, but do you mean to be importing a CSS file :thinking:?

import ‘./ValidationForm.css’;

also, while we are here, definitely watch out for this issue while working with components:

we see this a lot and it can be time consuming to debug!

Hi, thanks for your answer.
No its about forms submission in Netifly.
After I submit my form, I get a console error and it doesn’t submit in the server.
I would like to know what might cause this.

Ah, thanks for that detail! a 404 means we haven’t even processed the form OR you are submitting to a different location than you specified in your action= form parameter in your html.

Take a look at this debugging guide which talks through how to get forms working, and if you don’t find the solution, answer those last couple of questions in the post for us (please - answer here in this thread since we have your context here :)) and we’ll be happy to help troubleshoot further!

Hi Fool, thanks for your answer. I have done what you said, followed the docs, tried all the options for react.js forms, and still doesn’t work. it gives me the same error: Failed to load resource: the server responded with a status of 404 (). I have tried with stateful or stateless forms, same thing.

ok. What is the URL for the HTML file (served from our service) has your form in it, so I can take a look?

Hi Fool,
Thanks for your answer.
All Right that might be the cause then, I totally missed that:" What is the URL for the HTML file (served from our service" What is that? and how do I include it in my project?
would you like me to copy and paste my code? or would you prefer to take a look at my git hub repository?
Thanks

As mentioned in the form debugging article we sent, you MUST deploy an html copy of your form, since that is how our form handling service is configured.

How you do so is up to you. Most site generators do this for you, for instance:

Hi Fool, Iam not using Garsby, it a static react web app it works the same way? please have a look on gitHub https://sarauras1.github.io/mobile-wellness-app/ the form is on contact.js. just in case it more the one thing i am missing.
thanks for your help Fool.

Have you tried running through this walkthrough?

Based on your server error and your code, I would think you are missing the html form. Keep in mind - this is NOT the react form that you have in your code above. This is basically another form that lets netlify identify that you are using a form and to be able to grab the data it needs from there.

1 Like

Hi Guys, It works now thanks for your help :grinning: :grinning: :grinning: :grinning:

1 Like