How to include a php script in react app

Question

I'm trying to get a working contact form on my website and am following this article's guide. The guide gives a php script to handle the post, but I'm using a create-react-app and I don't know how to include the mailer.php file into the project.

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>

mailer.php

<?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 = "[email protected]";

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

?>

reactjs

componentDidMount() {

    var $form = $("#contact-form");
    var formData = $form.serialize();

    $form.submit(function (event) {
        // Stop 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);
            }
        });

    });

}

problem

whenever I submit the form I get a

POST http://localhost:3000/mailer.php 404 (Not Found)

error. How do I get this working.

Answer 1

create-react-app is an amazing piece of software which helps developers start up a front-end application with little need for configuration. However, it does not have php with it.

Here is how you can make it work

1. The first thing you have to do is try to ensure you have a php server running. Follow this tutorial if you need help in that. Lets say that you managed to get your php page working at http://your-host/mail.php.

2. After having visited http://your-host/mail.php to ensure its working, send the data async