React JS and PHP contact form fails - php

Question

I'm having an issue with my website. To give some context, I've worked on it using ReactJS for the front-end and Express for the back-end. BUT, my hosting provider doesn't support Node, so I had to change the back-end part to PHP. I only developed the contact form functionality.
I'm not sure if I'm missing something, but I would like to ask your opinion to continue due to I'm stuck.
Here's the front-end part for Contact.js:
import React, {Component} from 'react';
class Contact extends Component{
render(){
return(
<div>
<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>
</div>
)
}
}
export default Contact;
and also, the back-end part in the PHP file, mailer.php located under /src folder:
<?php
// Only process POST reqeusts.
if ($_SERVER["REQUEST_METHOD"] == "POST") {
// Get the form fields and remove 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"]);
// Check that data was sent to the mailer.
if ( empty($name) OR empty($message) OR !filter_var($email, FILTER_VALIDATE_EMAIL)) {
// Set a 400 (bad request) response code and exit.
http_response_code(400);
echo "Oops! There was a problem with your submission. Please complete the form and try again.";
exit;
}
// Set the recipient email address.
// FIXME: Update this to your desired email address.
$recipient = "*HERE I PLACED MY EMAIL*";
// Set the email subject.
$subject = "New contact from $name";
// Build the email content.
$email_content = "Name: $name\n";
$email_content .= "Email: $email\n\n";
$email_content .= "Message:\n$message\n";
// Build the email headers.
$email_headers = "From: $name <$email>";
// Send the email.
if (mail($recipient, $subject, $email_content, $email_headers)) {
// Set a 200 (okay) response code.
http_response_code(200);
echo "Thank You! Your message has been sent.";
} else {
// Set a 500 (internal server error) response code.
http_response_code(500);
echo "Oops! Something went wrong and we couldn't send your message.";
}
} else {
// 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.";
}
?>
The result is:
POST http://www.*mywebsite.com*/mailer.php 400 (Bad Request)
Any suggestion or recommendation? Thanks in advance!

Answer 1

change mailer.php
$name = strip_tags(trim($_POST["name"]));
to
$name = strip_tags(trim($_POST["first_name"]));