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.”
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.
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;
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.