Why do I get the error: "500 Internal Server Error" when passing parameters using Ajax on Wordpress?

Question

I have a dynamic contact form on my Wordspress webpage.

This is the HTML structure:

        <div class="form_content">
            <div> Name:    <span> <input type="text" id="fullname"> </span></div>
            <div> E-mail:  <span> <input type="text" id="email">    </span></div>
            <div> Message: <span> <input type="text" id="text">     </span></div>
            <div id="sendBtn"> Submit </div>
        </div>

I have the functions that grabs the inputs from the HTML and sends them to a content.php file I have on my twentyfifteen-child theme.

// Send button for the "contact form".
jQuery('#sendBtn').click(function(){
    //get info 
    var fullname = jQuery("#fullname").val();
    var email = jQuery("#email").val();
    var text = jQuery("#text").val();
    //send info to php 
    jQuery.ajax({
        beforeSend: function() {
            if ( IsEmail(email) == false) {
                jQuery('#aboutUnsuccess').show("slow");
                /*jQuery('#pixel-thing').show("fast");*/
                jQuery('.form_content').hide("slow");
            }
        },
        url: 'http://54.149.xx.xx/wp-content/themes/twentyfifteen-child/contact.php', 
        type: "POST", 
        data: ({ "fullname": fullname, "email": email, "text": text }), 
        success: function (results){
            if ( IsEmail(email) == true) {
                //hide table 
                jQuery('.form_content').hide('slow', function() {
                    jQuery('.form_content').hide( "slow" );
                  });
                //show textboxes
                jQuery('#aboutSuccess').show("slow");
                jQuery( "#aboutSuccess" ).append( "<iframe id=\"pixel-thing\" src=\"http://54.149.xx.xx/wp-content/themes/twentyfifteen-child/thePixel.html\" width=\"1\" height=\"1\"  border=\"0\"></iframe>" );

            /************************************/
                window.google_trackConversion({
                  google_conversion_id: 666, 
                  google_remarketing_only: true
                });

            /*************************************/
            }
        }
    }); 

and finally my content.php handles the parameters and sends the relevant information to my email:

<?php 
require_once "Mail.php";

        if(isset($_POST['email'])) {

            $email = $_POST['email'];       
            $email_to = "info@example.com";

            $host = "ssl://smtp.gmail.com:465";
            $username = 'myEmail@email.com';
            $password = 'passpaspaspas';

            $email_subject = "You have a new email from $email via example.com website";
            $message = $_POST['text']; 

            $headers = array ('From' => $email, 'To' => $email_to,'Subject' => $email_subject);
            $smtp = Mail::factory('smtp',
              array ('host' => $host,
                'auth' => true,
                'username' => $username,
                'password' => $password));

            $mail = $smtp->send($email_to, $headers, $message);

            if (PEAR::isError($mail)) {
              echo($mail->getMessage());
            } else {
              echo("Message successfully sent!\n");
            }
        }

I am moving my website which was built without any MVC/CMS, to wordpress. This works fine with my "regular" website.

Why my code isn't working within wordpress?

This is the output from Chromes "Network":

Remote Address:54.159.xx.xx:80
Request URL:http://54.159.xx.xx/wp-content/themes/twentyfifteen-child/contact.php
Request Method:POST
Status Code:500 Internal Server Error
Request Headersview source
Accept:*/*
Accept-Encoding:gzip, deflate
Accept-Language:en-US,en;q=0.8
Connection:keep-alive
Content-Length:63
Content-Type:application/x-www-form-urlencoded; charset=UTF-8
Cookie:wp-settings-1=editor%3Dtinymce%26posts_list_mode%3Dlist; wp-settings-time-1=1424359234
Host:54.149.xx.xx
Origin:http://54.149.xx.xx
Referer:http://54.149.xx.xx/?page_id=73
User-Agent:Mozilla/5.0 (Windows NT 6.3; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/40.0.2214.115 Safari/537.36
X-Requested-With:XMLHttpRequest
Form Dataview sourceview URL encoded
fullname: Test
email:Test@gmail.com
text:This is a test 
Response Headersview source
Connection:close
Content-Length:0
Content-Type:text/html
Date:Tue, 24 Feb 2015 14:13:46 GMT
Server:Apache/2.4.7 (Ubuntu)
X-Powered-By:PHP/5.5.9-1ubuntu4.5

Answer 1

Wordpress doesn't like you directly posting to a php file within a theme. What you should be doing is post to / (or any template/path you would like to post to, say "contact") and place the form handling code in your theme files.

I'd suggest putting your code in functions.php, and adding an action to listen for the ajax request, see wp_ajax_(action) in the Wordpress Codex for a detailed description.

-- edit --

If you want to get going quickly (don't we all) this code snippet does almost everything you want, place it in functions.php and call /wp-admin/admin-ajax.php from your javascript. In the ajax-call make sure you add a variable action and fill it with my_action for this example to work.

add_action( 'wp_ajax_my_action', 'my_action_callback' );

function my_action_callback() {
    $data['output'] = $_REQUEST['username'];
    echo json_encode($data);
    wp_die();
}