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.