Form submission displays blank php script in new browser tab

Question

I am working on my new website, I am using a template but editing the contents with notepad++. I am currently editing the contact me page in which I am struggling to find a solution to displaying a success message after the form is submitted, I would like the message to be on the same page. After I submit some information into the text boxes then click submit it just redirects me to the PHP file in which looks to contain nothing. I have uploaded the page in which i am trying to accomplish this on to my website for testing purposes.

I am wondering if anybody could help me out showing me a way to echo a success message, I have read multiple articles in which say i need to use ajax to accomplish this but am unsure where to start, or how to do this.

If anybody could help me out that would be great! I will post my HTML and PHP scripts below.

I should also note that when the page redirects to the PHP script a successful email is sent containing the information which is entered in the contact form. It all works correctly apart from a a message being successfully show on screen to show that the message was sent correctly.

EDIT:

The web page I am referring to is www.richardmotion.com

HTML

<form name="cForm" id="cForm" action="http://www.richardmotion.com/form-to-email.php" method="post">
                       <fieldset>

                     <div class="form-field">
                              <input name="cName" type="text" id="cName" class="full-width" placeholder="Your Name" value="">
                     </div>

                     <div class="form-field">
                              <input name="cEmail" type="text" id="cEmail" class="full-width" placeholder="Your Email" value="">
                     </div>

                     <div>
                    <label for="sampleRecipientInput">Reason For Contacting</label>
                        <div class="ss-custom-select">
                            <select name="cEnquiry" class="full-width" id="sampleRecipientInput">
                            <option value="General Enquiry">General Enquiry</option>
                            <option value="Question About A Guide">Question About A Guide</option>
                            <option value="Question About A Review">Question About A Review</option>
                            </select>
                        </div>                      
                    </div>

                     <div class="message form-field">
                        <textarea name="cMessage" id="cMessage" class="full-width" placeholder="Your Message" ></textarea>
                     </div>

                     <button type="submit" name="submit" value="Submit" class="submit button-primary full-width-on-mobile">Submit</button>

                       </fieldset>
                  </form>

PHP

<?php
$cName = $_POST['cName'];
$cEmail = $_POST['cEmail'];
$cEnquiry = $_POST['cEnquiry'];
$cMessage = $_POST['cMessage'];
?>

<?php
$email_from = 'enquiries@richardmotion.com';
$email_subject = "Website Enquiry";
$email_body = "Hi my name is: $cName,\nI have a: $cEnquiry.\n\n$cMessage"
?>

<?php
$to = "richard.0.motion@gmail.com";
$headers = "From: $email_from \r\n";
$headers .= "Reply-To: $cEmail \r\n";
mail($to,$email_subject,$email_body,$headers);
?>

Answer 1

check this answer: jQuery AJAX submit form

or direct use JQuery Form plugin

Answer 2

As the contact page appears to be plain html then use AJAX to send the form data and use the callback function to populate some container element in the html ( or create one ) with a message.

<?php
    /* form-to-email.php */
    if( $_SERVER['REQUEST_METHOD']=='POST' && isset( $_POST['cName'], $_POST['cEmail'], $_POST['cEnquiry'],$_POST['cMessage'] ) ){

        $args=array(
            'cName'     =>  FILTER_SANITIZE_STRING,
            'cEmail'    =>  FILTER_SANITIZE_EMAIL,
            'cEnquiry'  =>  FILTER_SANITIZE_STRING,
            'cMessage'  =>  FILTER_SANITIZE_STRING
        );
        $_POST=filter_input_array( INPUT_POST, $args );
        extract( $_POST );



        $email_from = 'enquiries@richardmotion.com';
        $email_subject = "Website Enquiry";
        $email_body = "Hi my name is: $cName,\nI have a: $cEnquiry.\n\n$cMessage";



        $to = "richard.0.motion@gmail.com";
        $headers = "From: $email_from \r\n";
        $headers .= "Reply-To: $cEmail \r\n";
        $status = mail( $to, $email_subject, $email_body, $headers );

        echo $status ? 'Thankyou - your message was sent' : 'Bogus - there was some sort of error';
    }
?>

<!-- contact page -->
<!doctype html>
<html>
    <head>
        <meta charset='utf-8' />
        <title>Contact</title>
        <script>
            function ajax(url,params,callback){
                var xhr=new XMLHttpRequest();
                xhr.onreadystatechange=function(){
                    if( xhr.readyState==4 && xhr.status==200 ){
                        callback.call( this, xhr.response );
                    }
                };
                xhr.open( 'POST', url, true );
                xhr.send( params ); 
            }
            document.addEventListener('DOMContentLoaded',function(){
                document.querySelector('input[type="button"][name="submit"]').onclick=function(event){
                    var fd=new FormData( document.getElementById('cForm') );
                    ajax( '/form-to-email.php', fd, function(r){
                        document.getElementById('target').innerHTML=r;
                    }); 
                }                   
            }, false );

        </script>
    </head>
    <body>

        <p>Lorem ipsum Deserunt est dolore Ut Excepteur nulla occaecat magna occaecat Excepteur nisi esse veniam dolor 
        consectetur minim qui nisi esse deserunt commodo ea enim ullamco non voluptate consectetur minim aliquip Ut 
        incididunt amet ut cupidatat.</p>


        <div id='target'></div>


        <form name="cForm" id="cForm" method="post">
            <fieldset>

                <div class="form-field">
                    <input name="cName" type="text" id="cName" class="full-width" placeholder="Your Name" value="">
                </div>

                <div class="form-field">
                    <input name="cEmail" type="text" id="cEmail" class="full-width" placeholder="Your Email" value="">
                </div>

                <div>
                    <label for="sampleRecipientInput">Reason For Contacting</label>
                    <div class="ss-custom-select">
                        <select name="cEnquiry" class="full-width" id="sampleRecipientInput">
                            <option value="General Enquiry">General Enquiry
                            <option value="Question About A Guide">Question About A Guide
                            <option value="Question About A Review">Question About A Review
                        </select>
                    </div>                      
                </div>

                <div class="message form-field">
                    <textarea name="cMessage" id="cMessage" class="full-width" placeholder="Your Message" ></textarea>
                </div>

                <button name="submit" value="Submit" class="submit button-primary full-width-on-mobile">Submit</button>

            </fieldset>
        </form>
    </body>
</html>