Contact form to not load new page

Question

I currently have a contact form which i have more or less copied from a tutorial online. When the form is submitted however it reloads the page. Would it be possible to amend the below code to send the form but not reload the page?

<?php
$mail_to = 'benliger@hotmail.com'; // specify your email here

// Assigning data from the $_POST array to variables
$name = $_POST['sender_name'];
$mail_from = $_POST['sender_email'];
$phone = $_POST['sender_phone'];
$message = $_POST['sender_message'];

// Construct email subject
$subject = 'enquiry ' . $name;

// Construct email body
$body_message = 'From: ' . $name . "\r\n";
$body_message .= 'E-mail: ' . $mail_from . "\r\n";
$body_message .= 'Phone: ' . $phone . "\r\n";
$body_message .= 'Message: ' . $message;

// Construct email headers
$headers = 'From: ' . $mail_from . "\r\n";
$headers .= 'Reply-To: ' . $mail_from . "\r\n";

$mail_sent = mail($mail_to, $subject, $body_message, $headers);

if ($mail_sent == true){ ?>
    <script language="javascript" type="text/javascript">
    alert('Thanks for getting in touch!');
    window.location = 'index.php';
    </script>
<?php } else { ?>
<script language="javascript" type="text/javascript">
    alert('Message not sent :( Please, get in contact with me directly: benliger@hotmail.com');
   window.location = 'index.php';
</script>
<?php
}
?>


<form action="form_process.php" method="POST"> 

<label for="field_name">Name:</label> 

<input type="text" id="field_name" name="sender_name"> 

<br /><br />   

<label for="field_email">E-mail:</label> 

<input type="text" id="field_email" name="sender_email"> 

<br /><br />   

<label for="field_phone">Phone:</label> 

<input type="text" id="field_phone" name="sender_phone"> 

<br /><br />   

<label for="field_message">Message:</label> 

<textarea id="field_message" name="sender_message"></textarea> 

<br /><br />   

<input type="submit" name="send_message" value="Send"> 

</form>

Answer 1

Yes you can. If you want to submit a form without refreshing the page you can use AJAX. And if you also want to alert the message that you provide from your PHP you can echo the message and alert it with your AJAX call. Try the code below, i added comments between the lines for explanation.

<?php

//Check if POST data is set, and not empty, else it will do this every single time, submitted or not
if(isset($_POST) && !empty($_POST))
{

    $mail_to = 'benliger@hotmail.com'; // specify your email here

    // Assigning data from the $_POST array to variables
    $name = $_POST['sender_name'];
    $mail_from = $_POST['sender_email'];
    $phone = $_POST['sender_phone'];
    $message = $_POST['sender_message'];

    // Construct email subject
    $subject = 'enquiry ' . $name;

    // Construct email body
    $body_message = 'From: ' . $name . "\r\n";
    $body_message .= 'E-mail: ' . $mail_from . "\r\n";
    $body_message .= 'Phone: ' . $phone . "\r\n";
    $body_message .= 'Message: ' . $message;

    // Construct email headers
    $headers = 'From: ' . $mail_from . "\r\n";
    $headers .= 'Reply-To: ' . $mail_from . "\r\n";

    $mail_sent = mail($mail_to, $subject, $body_message, $headers);

    if ($mail_sent == true){ 
        //Echo the message now, because it will be catched in your jQuery listerener (see code below)
        echo 'Thanks for getting in touch!';
     } else { 
        //Echo the message now, because it will be catched in your jQuery listerener (see code below)
        echo 'Message not sent :( Please, get in contact with me directly: benliger@hotmail.com';
    }
    //This exit; is important, else the alert box will be full of the further html code
    exit;

}
?>


<form action="form_process.php" method="POST"> 

<label for="field_name">Name:</label> 

<input type="text" id="field_name" name="sender_name"> 

<br /><br />   

<label for="field_email">E-mail:</label> 

<input type="text" id="field_email" name="sender_email"> 

<br /><br />   

<label for="field_phone">Phone:</label> 

<input type="text" id="field_phone" name="sender_phone"> 

<br /><br />   

<label for="field_message">Message:</label> 

<textarea id="field_message" name="sender_message"></textarea> 

<br /><br />   

<input type="submit" name="send_message" value="Send"> 

</form>

<!-- Add jQuery library !-->
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.1.min.js"></script>    
<script>
    //Create listener for form
    $(document).on('submit','form',function(e){
        //Prevent the default action
        e.preventDefault();

        //Define submitted form
        var form = $(this);

        //Create an array of input values
        var data = $(this).serializeArray();
        //Do the ajax request
        $.post('index.php',data,function(responseMessage){
            //Call resetForm function
            resetForm(form); 
            //Alert your message
            alert(responseMessage);
        });

    });

    //Reset form function
    function resetForm($form) {
        //Find input fields and set value to '' (empty);
        $form.find('input:text, input:password, input:file, select, textarea').val('');
        //Find check- and radiobox and uncheck them;
        $form.find('input:radio, input:checkbox').removeAttr('checked').removeAttr('selected');
    }   

</script>