Simple PHP contact form not sending when submitted

Question

I have a simple php mail server hookup in my nodeJS site to handle contact messages. For some reason (I am testing it from my local), it doesn't route the message to the assigned email address. I mention running it from local because I have heard that it may not work unless its from my live site running on Heroku. However,I literally cut and pasted the code from another app I have in which it does work from local. Here's the code for the contact_me.php:

<?php
// Check for empty fields
if(empty($_POST['name'])        ||
    empty($_POST['email'])      ||
    empty($_POST['phone'])      ||
    empty($_POST['message'])    ||
    !filter_var($_POST['email'],FILTER_VALIDATE_EMAIL))
    {
    echo "No arguments Provided!";
        return false;
    }

$name = $_POST['name'];
$email_address = $_POST['email'];
$phone = $_POST['phone'];
$message = $_POST['message'];

// Create the email and send the message
$to = 'myapp@gmail.com'; // Add your email address inbetween the ''      replacing yourname@yourdomain.com - This is where the form will send a message to.
$email_subject = "Website Contact Form:  $name";
$email_body = "You have received a new message from your website contact  form.\n\n"."Here are the details:\n\nName: $name\n\nEmail:        $email_address\n\nPhone: $phone\n\nMessage:\n$message";
$headers = "From: noreply@yourdomain.com\n"; // This is the email address the generated message will be from. We recommend using something like noreply@yourdomain.com.
$headers .= "Reply-To:$email_address";
mail($to,$email_subject,$email_body,$headers);
return true;            
?>

I have gotten a little confused somewhere, but it seems that the submit button I created in my html ( id='success' ) should be connected to the $to object somehow so that when the button is clicked, the message is sent to the email address associated with $to . Here's my html. Am I missing something here?

<div class="container">
        <div class="row">
            <div class="col-lg-8 col-lg-offset-2 col-md-10 col-md-offset-1">
                <h2 class="featurette-heading" style="text-align: center;">Message</h2>
                <h3 class="text-muted">Want to book an appointment? Send me a message and I'll contact you. Make sure you include your name, phone number, email, and when you'd like to book. It's that easy!</h3>
                <form name="sentMessage" id="contactForm" novalidate>
                    <div style="background-color: white; border: 1px solid #0085a1;" class="row control-group">
                        <div class="form-group col-xs-12 floating-label-form-group controls">
                            <label></label>
                            <input type="text" class="form-control" placeholder="Name" id="name" required data-validation-required-message="Please enter your name.">
                            <p class="help-block text-danger"></p>
                        </div>
                    </div>
                    <div style="background-color: white; border: 1px solid #0085a1;" class="row control-group">
                        <div class="form-group col-xs-12 floating-label-form-group controls">
                            <label></label>
                            <input type="email" class="form-control" placeholder="Email Address" id="email" required data-validation-required-message="Please enter your email address.">
                            <p class="help-block text-danger"></p>
                        </div>
                    </div>
                    <div style="background-color: white; border: 1px solid #0085a1;" class="row control-group">
                        <div class="form-group col-xs-12 floating-label-form-group controls">
                            <label></label>
                            <input type="tel" class="form-control" placeholder="Phone Number" id="phone" required data-validation-required-message="Please enter your phone number.">
                            <p class="help-block text-danger"></p>
                        </div>
                    </div>
                    <div style="background-color: white; border: 1px solid #0085a1;" class="row control-group">
                        <div class="form-group col-xs-12 floating-label-form-group controls">
                            <label></label>
                            <textarea rows="5" class="form-control" placeholder="Message" id="message" required data-validation-required-message="Please enter a message."></textarea>
                            <p class="help-block text-danger"></p>
                        </div>
                    </div>
                    <br>
                    <div id="success"></div>
                        <div class="row">
                            <div class="form-group col-xs-12">
                                <button type="submit" class="btn btn-primary">Send</button>
                            </div>
                        </div>
                    </div>
                </form>
            </div>
        </div>
</div>    

I have modified this message since the first answer. The first answer seemed to work but I am still getting an error that prevents the request from going through. This is the error message:

Answer 1

You're using PHP, not node.js!

You're missing a very basic thing: you have not given your form fields names, so when you check for them, there's nothing there! You're checking for name , email , phone , message , but your fields have no name attributes at all. You need to name them in your HTML - and no, id values will not work:

<div class="container">
        <div class="row">
            <div class="col-lg-8 col-lg-offset-2 col-md-10 col-md-offset-1">
                <h2 class="featurette-heading" style="text-align: center;">Message</h2>
                <h3 class="text-muted">Want to book an appointment? Send me a message and I'll contact you. Make sure you include your name, phone number, email, and when you'd like to book. It's that easy!</h3>
                <form name="sentMessage" id="contactForm" novalidate>
                    <div style="background-color: white; border: 1px solid #0085a1;" class="row control-group">
                        <div class="form-group col-xs-12 floating-label-form-group controls">
                            <label></label>
                            <input type="text" class="form-control" placeholder="Name" id="name" name="name" required data-validation-required-message="Please enter your name.">
                            <p class="help-block text-danger"></p>
                        </div>
                    </div>
                    <div style="background-color: white; border: 1px solid #0085a1;" class="row control-group">
                        <div class="form-group col-xs-12 floating-label-form-group controls">
                            <label></label>
                            <input type="email" class="form-control" placeholder="Email Address" id="email" name="email" required data-validation-required-message="Please enter your email address.">
                            <p class="help-block text-danger"></p>
                        </div>
                    </div>
                    <div style="background-color: white; border: 1px solid #0085a1;" class="row control-group">
                        <div class="form-group col-xs-12 floating-label-form-group controls">
                            <label></label>
                            <input type="tel" class="form-control" placeholder="Phone Number" id="phone" name="phone" required data-validation-required-message="Please enter your phone number.">
                            <p class="help-block text-danger"></p>
                        </div>
                    </div>
                    <div style="background-color: white; border: 1px solid #0085a1;" class="row control-group">
                        <div class="form-group col-xs-12 floating-label-form-group controls">
                            <label></label>
                            <textarea rows="5" class="form-control" placeholder="Message" id="message" name="message" required data-validation-required-message="Please enter a message."></textarea>
                            <p class="help-block text-danger"></p>
                        </div>
                    </div>
                    <br>
                    <div id="success"></div>
                        <div class="row">
                            <div class="form-group col-xs-12">
                                <button type="submit" class="btn btn-primary">Send</button>
                            </div>
                        </div>
                    </div>
                </form>
            </div>
        </div>
</div>