Sending Email by using Ajax in an React Contact Form

I have been working on an React site for a while, and I was so happy to finally figure out how to send an email by using ajax on this site. Thought I’d write it down for future/other references. Please let me know if you have any questions or suggestions.

Here is the interface for the contact form.

Here is the basic setup:
Server: Apache + PHP + MySQL (the database is not important here. I am listing the PHP server because I used the mail function in my mailer.php)
mailer.php: Get the data about the email, sanitize it and send the email.
Contact.js: The React Contact form. It also sends the data through an ajax request to the mailer.php.

Here is the code for the form:

<form id=”contactForm” method=”POST” action=”mailer.php” onSubmit={this.handleSubmit}>
<fieldset className=”form-group”>
<label for=”form_name”>Name</label>
<input type=”text” value={this.state.contactName} className=”form-control” id=”form_name” onChange={this.handleNameChange} />
</fieldset>

<fieldset className=”form-group”>
<label for=”form_email”>E-mail:</label>
<input value={this.state.contactEmail} className=”form-control” id=”form_email” type=”email” onChange={this.handleEmailChange} />
</fieldset>

<fieldset className=”form-group”>
<label for=”form_msg”>Message:</label>
<textarea value={this.state.contactMessage} className=”form-control” id=”form_msg” onChange={this.handleMessageChange} ></textarea>
</fieldset>

</form>

Here are the code in mailer.php:

if ($_SERVER[“REQUEST_METHOD”] == “POST”) {

$name = strip_tags(trim($_POST[“form_name”]));
$name = str_replace(array(“\r”,”\n”),array(” “,” “),$name);
$email = filter_var(trim($_POST[“form_email”]), FILTER_SANITIZE_EMAIL);
$message = trim($_POST[“form_msg”]);

// 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 = “example@example.com”;

// Set the email subject.
$subject = “New contact from $name Via React Site”;

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

As you may have already noticed that in the React form Contact.js, there are only three piece of information we need to send, including the sender’s name, email address and message content. When the user click the “Send your message” button, it will trigger the “handleSubmit()” function, which contains the ajax request. Here is the code in the handleSubmit() function.

handleSubmit(event) {

event.preventDefault();
this.setState({ type: ‘info’, message: ‘Sending…’ });

$.ajax({

url: ‘/…./mailer.php’,
type: ‘POST’,
data: {

“form_name”: this.state.contactName,
“form_email”: this.state.contactEmail,
“form_msg”: this.state.contactMessage

},
cache: false,
success: function(data) {

// Success..
this.setState({ type: ‘success’, message: ‘We have received your message and will get in touch shortly. Thanks!’ });

}.bind(this),

error: function(xhr, status, err) {
this.setState({ type: ‘danger’, message: ‘Sorry, there has been an error.  Please try again later or visit us at SZB 438.’ });
}.bind(this)

});

}