I'm currently in the process of setting up a functional contact form on my website by following the guidance provided in this article link. However, the tutorial includes a php script to manage the post data, and I am using create-react-app and unsure how to integrate the mailer.php file into the project.
Contact Form:
<form id="contact-form" name="c-form" method="post" action="mailer.php">
<div className="input-field">
<input
id="first_name"
type="text"
className="validate"
name="first_name"
required/>
<label for="first_name">Name</label>
</div>
<div className="input-field">
<input id="sub" type="text" className="validate" name="sub"/>
<label for="sub">Subject</label>
</div>
<div className="input-field">
<input id="email" type="email" className="validate" name="email" required/>
<label for="email">Email</label>
</div>
<div className="input-field">
<textarea
id="textarea1"
className="materialize-textarea"
name="message"
required></textarea>
<label for="textarea1">Message</label>
</div>
<div className="contact-send">
<button
id="submit"
name="contactSubmit"
type="submit"
value="Submit"
className="btn waves-effect">Send
</button>
</div>
</form>
PHP Mailer Script:
<?php
// Processing only POST requests.
if ($_SERVER["REQUEST_METHOD"] == "POST") {
// Extracting form fields and eliminating whitespace.
$name = strip_tags(trim($_POST["name"]));
$name = str_replace(array("\r","\n"),array(" "," "),$name);
$email = filter_var(trim($_POST["email"]), FILTER_SANITIZE_EMAIL);
$message = trim($_POST["message"]);
// Checking if the necessary data was sent to the mailer.
if ( empty($name) OR empty($message) OR !filter_var($email, FILTER_VALIDATE_EMAIL)) {
// Returning a 400 (bad request) response code and exiting.
http_response_code(400);
echo "Oops! There was an issue with your submission. Please fill out the form and try again.";
exit;
}
// Setting the recipient email address.
// FIXME: Update this to your preferred email address.
$recipient = "<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="4b213b24393f2439392e2a277c7c0b2c262a222765282426">[email protected]</a>";
// Setting the email subject.
$subject = "New contact from $name";
// Creating the email content.
$email_content = "Name: $name\n";
$email_content .= "Email: $email\n\n";
$email_content .= "Message:\n$message\n";
// Creating the email headers.
$email_headers = "From: $name <$email>";
// Sending the email.
if (mail($recipient, $subject, $email_content, $email_headers)) {
// Setting a 200 (ok) response code.
http_response_code(200);
echo "Thank You! Your message has been sent.";
} else {
// Setting a 500 (internal server error) response code.
http_response_code(500);
echo "Oops! Something went wrong and we couldn't send your message.";
}
} else {
// If not a POST request, set a 403 (forbidden) response code.
http_response_code(403);
echo "There was a problem with your submission, please try again.";
}
?>
ReactJS Component:
componentDidMount() {
var $form = $("#contact-form");
var formData = $form.serialize();
$form.submit(function (event) {
// Preventing the browser from submitting the form.
event.preventDefault();
// TODO
$.ajax({
type: 'POST',
url: $form.attr('action'),
data: formData,
success: function (response) {
console.dir(response);
},
fail: function (err) {
console.dir(err);
}
});
});
}
Issue:
Upon submitting the form, I encounter a
POST http://localhost:3000/mailer.php 404 (Not Found)error. How can I resolve this and get it functioning properly?