Home
Support Forums

ReactJS Netlify Form POST 404 error

I created a portfolio website using create-react-app. When I submit the form in it no response received and I get this error on console: “POST https://salman-ar.netlify.app/inc/sendEmail.php 404”

I tried many of the stuff in the FAQ. I’ve added a hidden form in index.html and used the functions from the documentation in the js file. I also tried adding hidden input tag along with the functions. Still doesn’t work. I also tried the Gatsby method. Same. Here’s a direct link to the form: Portfolio | Salman. I also get this error in the console, don’t know if it is connected: “Error during service worker registration: TypeError: Failed to register a ServiceWorker for scope (‘mysite’) with script (‘mysite/service-worker.js’): A bad HTTP response code (404) was received when fetching the script.”

Thank you!

Here’s a link to my deployment: https://salman-ar.netlify.app/
My GitHub repo is linked in the script and html lines

Hi @salman-ar-sar,

Welcome to the Netlify community.

As per the Support Guide linked below you cannot POST to a PHP script as Netlify doesn’t support PHP in that manner.

You can use Netlify’s built-in form handling (which based on the page source you have configured through the use of data-netlify="true") or post to a serverless function.

Hope this helps.

But I’m not trying to do that. Maybe the template I’m using is doing it. Could you please show me where the issue? I want to use Netlify’s built-in form handling.

import React, { Component } from "react";

const encode = (data) => {
  return Object.keys(data)
    .map((key) => encodeURIComponent(key) + "=" + encodeURIComponent(data[key]))
    .join("&");
};

class Contact extends Component {
  constructor(props) {
    super(props);
    this.state = {
      form_name: "",
      form_email: "",
      form_subject: "",
      form_message: "",
    };
  }

  handleSubmit = (e) => {
    fetch("/", {
      method: "POST",
      headers: { "Content-Type": "application/x-www-form-urlencoded" },
      body: encode({ "form-name": "contactForm", ...this.state }),
    })
      .then(() => alert("Success!"))
      .catch((error) => alert(error));

    e.preventDefault();
  };

  handleChange = (e) => this.setState({ [e.target.name]: e.target.value });

  render() {
    if (this.props.data) {
      var name = this.props.data.name;
      var street = this.props.data.address.street;
      var city = this.props.data.address.city;
      var state = this.props.data.address.state;
      var zip = this.props.data.address.zip;
      var phone = this.props.data.phone;
      // var email = this.props.data.email;
      var message = this.props.data.contactmessage;
    }
    const { form_name, form_email, form_subject, form_message } = this.state;

    return (
      <section id="contact">
        <div className="row section-head">
          <div className="two columns header-col">
            <h1>
              <span>Get In Touch.</span>
            </h1>
          </div>

          <div className="ten columns">
            <p className="lead">{message}</p>
          </div>
        </div>

        <div className="row">
          <div className="eight columns">
            <form
              id="contactForm"
              name="contactForm"
              onSubmit={this.handleSubmit}
              data-netlify="true"
              data-netlify-honeypot="bot-field"
              method="post"
            >
              <input type="hidden" name="form-name" value="contactForm" />
              <fieldset>
                <div>
                  <label htmlFor="contactName">
                    Name <span className="required">*</span>
                  </label>
                  <input
                    type="text"
                    //   defaultValue=""
                    size="35"
                    id="contactName"
                    name="form_name"
                    value={form_name}
                    onChange={this.handleChange}
                  />
                </div>

                <div>
                  <label htmlFor="contactEmail">
                    Email <span className="required">*</span>
                  </label>
                  <input
                    type="text"
                    //   defaultValue=""
                    size="35"
                    id="contactEmail"
                    name="form_email"
                    value={form_email}
                    onChange={this.handleChange}
                  />
                </div>

                <div>
                  <label htmlFor="contactSubject">Subject</label>
                  <input
                    type="text"
                    //   defaultValue=""
                    size="35"
                    id="contactSubject"
                    name="form_subject"
                    value={form_subject}
                    onChange={this.handleChange}
                  />
                </div>

                <div>
                  <label htmlFor="contactMessage">
                    Message <span className="required">*</span>
                  </label>
                  <textarea
                    cols="50"
                    rows="15"
                    id="contactMessage"
                    value={form_message}
                    name="form_message"
                    onChange={this.handleChange}
                  ></textarea>
                </div>

                <div>
                  <button className="submit">Submit</button>
                  <span id="image-loader">
                    <img alt="" src="images/loader.gif" />
                  </span>
                </div>
              </fieldset>
            </form>

            <div id="message-warning"> Error boy</div>
            <div id="message-success">
              <i className="fa fa-check"></i>Your message was sent, thank you!
              <br />
            </div>
          </div>

          <aside className="four columns footer-widgets">
            <div className="widget widget_contact">
              <h4>Address and Phone</h4>
              <p className="address">
                {name}
                <br />
                {street} <br />
                {city}, {state} {zip}
                <br />
                <span>{phone}</span>
              </p>
            </div>

            {/* <div className="widget widget_tweets">
                  <h4 className="widget-title">Latest Tweets</h4>
                  <ul id="twitter">
                     <li>
                        <span>
                        This is Photoshop's version  of Lorem Ipsum. Proin gravida nibh vel velit auctor aliquet.
                        Aenean sollicitudin, lorem quis bibendum auctor, nisi elit consequat ipsum
                        <a href="#">http://t.co/CGIrdxIlI3</a>
                        </span>
                        <b><a href="#">2 Days Ago</a></b>
                     </li>
                     <li>
                        <span>
                        Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam,
                        eaque ipsa quae ab illo inventore veritatis et quasi
                        <a href="#">http://t.co/CGIrdxIlI3</a>
                        </span>
                        <b><a href="#">3 Days Ago</a></b>
                     </li>
                  </ul>
		         </div> */}
          </aside>
        </div>
      </section>
    );
  }
}

export default Contact;

This is my index.html:

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <meta name="theme-color" content="#000000">
  <link rel="manifest" href="%PUBLIC_URL%/manifest.json">
  <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
  <link rel="stylesheet" href="%PUBLIC_URL%/css/default.css">
  <link rel="stylesheet" href="%PUBLIC_URL%/css/layout.css">
  <link rel="stylesheet" href="%PUBLIC_URL%/css/media-queries.css">
  <link rel="stylesheet" href="%PUBLIC_URL%/css/magnific-popup.css">

  <title>Portfolio | Salman</title>
</head>

<body>
  <noscript>
    You need to enable JavaScript to run this app.
  </noscript>

  <form name="contactForm" netlify netlify-honeypot="bot-field" hidden>
    <input type="text" name="form_name" />
    <input type="text" name="form_email" />
    <input type="text" name="form_subject" />
    <textarea name="form_message"></textarea>
  </form>

  <div id="root"></div>

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
  <script>window.jQuery || document.write('<script src="js/jquery-1.10.2.min.js"><\/script>')</script>
  <script type="text/javascript" src="js/jquery-migrate-1.2.1.min.js"></script>

  <script src="js/jquery.flexslider.js"></script>
  <script src="js/waypoints.js"></script>
  <script src="js/jquery.fittext.js"></script>
  <script src="js/magnific-popup.js"></script>
  <script src="js/init.js"></script>

</body>

</html>

The form submission is handled by an AJAX function in js/init.js.
Look for the following.

/*----------------------------------------------------*/
/*	contact form
------------------------------------------------------*/

$('form#contactForm button.submit').click(function() {

    // rest of the function here...

});

Removing this section of JavaScript should mean the form is then handled by Netlify.

2 Likes

Thank you so much! That worked!

2 Likes