How to make a contact form in wordpress call another php file

I am trying to add a small contact form in the sidebar of my WordPress site. I transferred my code from it’s original html file into the appropriate WordPress php files. The only thing that isn’t working is the contact form.

When I click on the send button it goes to the mailer.php file in the URL bar instead of sending the message.

This is the form:

<div class="w3-container w3-padding w3-white">
<h4 class="w3-left">Contact</h4>
<br> <br>
<div id="form-messages">&nbsp;</div>
<form id="ajax-contact" class="w3-container w3-margin" action="mailer.php" method="post">
<div class="w3-row w3-section field"><label for="name">Name:</label> <input id="name" class="w3-input w3-border" name="name" required="" type="text"></div>
<div class="w3-row w3-section field"><label for="email">Email:</label> <input id="email" class="w3-input w3-border" name="email" required="" type="email"></div>
<div class="w3-row w3-section field"><label for="message">Message:</label> <textarea id="message" class="w3-input w3-border" name="message" required=""></textarea></div>
<div class="field"><button class="w3-button w3-blue w3-ripple w3-section" type="submit">Send</button></div>
</form></div> 

This is the mailer.php file:

<?php
    // My modifications to mailer script from:
    // http://blog.teamtreehouse.com/create-ajax-contact-form
    // Added input sanitizing to prevent injection

    // 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 = "[e-mail]";

        // Set the email subject.
        $subject = "New contact from $name";

        // Build the email content.
        $email_content = "Name: $namen";
        $email_content .= "Email: $emailnn";
        $email_content .= "Message:n$messagen";

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

Answer

Add a function like this to the onClick event.

function sendmail() {
    var name = document.getElementById("name").value;
    var email = document.getElementById("email").value;
    var message = document.getElementById("message").value;

    var SendInfo= {     "name":name,
                        "email":email,
                        "message":message   };
    $.ajax({
            type: 'POST',
            url: 'mailer.php',
            data: SendInfo,
            contentType: "application/x-www-form-urlencoded; charset=UTF-8",
            traditional: true,
            success: function (data) {
                // Whatever
            }
    });
}