How to notify a user their email has been sent on the same page rather than page redirect

Question

I'm new to PHP and am using a script to send emails when a user makes use of a websites contact us form. The emails are working fine. The problem I have however is that when a user submits a message they are redirected to a new page stating "Contact form successfully submitted. Thank you, I will get back to you soon!". What I would like is a simple message on the same page above the form (i.e. green message saying something like "email sent".

The PHP script is:

Code Share

My HTML form currently looks like:

                <form id="contact-form" method="post" action="sendemail.php" role="form">

                <div class="messages"></div>

                <div class="controls">

                    <div class="row">
                        <div class="col-md-6">
                            <div class="form-group">
                                <label for="form_name">Firstname *</label>
                                <input id="form_name" type="text" name="name" class="form-control" placeholder="Please enter your firstname *" required="required" data-error="Firstname is required.">
                                <div class="help-block with-errors"></div>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-group">
                                <label for="form_lastname">Lastname *</label>
                                <input id="form_lastname" type="text" name="surname" class="form-control" placeholder="Please enter your lastname *" required="required" data-error="Lastname is required.">
                                <div class="help-block with-errors"></div>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-6">
                            <div class="form-group">
                                <label for="form_email">Email *</label>
                                <input id="form_email" type="email" name="email" class="form-control" placeholder="Please enter your email *" required="required" data-error="Valid email is required.">
                                <div class="help-block with-errors"></div>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-group">
                                <label for="form_phone">Phone</label>
                                <input id="form_phone" type="tel" name="phone" class="form-control" placeholder="Please enter your phone">
                                <div class="help-block with-errors"></div>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-12">
                            <div class="form-group">
                                <label for="form_message">Message *</label>
                                <textarea id="form_message" name="message" class="form-control" placeholder="Message for me *" rows="6" required="required" data-error="Please,leave us a message."></textarea>
                                <div class="help-block with-errors"></div>
                            </div>
                        </div>
                        <div class="col-md-12">
                            <input type="submit" class="btn btn-success btn-send" value="Send message">
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-12">
                            <p class="text-muted"><strong>*</strong> These fields are required.</p>
                        </div>
                    </div>
                </div>

            </form>

Thanks in advance!

Answer 1

The best way would be to make a script in PHP to send your emails as you already do (you may need to modify it). You will need to change your form to use Ajax. This will allow you to send the POST data to the script which will send the email but it will also give you a response and on that responses you can then display your sent message.

Answer 2

Ok so after talking in the comments I have created this:

<div class="messages"></div>

<div class="controls">

    <div class="row">
        <div class="col-md-6">
            <div class="form-group">
                <label for="form_name">Firstname *</label>
                <input id="form_name" type="text" name="name" class="form-control" placeholder="Please enter your firstname *" required="required" data-error="Firstname is required.">
                <div class="help-block with-errors"></div>
            </div>
        </div>
        <div class="col-md-6">
            <div class="form-group">
                <label for="form_lastname">Lastname *</label>
                <input id="form_lastname" type="text" name="surname" class="form-control" placeholder="Please enter your lastname *" required="required" data-error="Lastname is required.">
                <div class="help-block with-errors"></div>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-md-6">
            <div class="form-group">
                <label for="form_email">Email *</label>
                <input id="form_email" type="email" name="email" class="form-control" placeholder="Please enter your email *" required="required" data-error="Valid email is required.">
                <div class="help-block with-errors"></div>
            </div>
        </div>
        <div class="col-md-6">
            <div class="form-group">
                <label for="form_phone">Phone</label>
                <input id="form_phone" type="tel" name="phone" class="form-control" placeholder="Please enter your phone">
                <div class="help-block with-errors"></div>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-md-12">
            <div class="form-group">
                <label for="form_message">Message *</label>
                <textarea id="form_message" name="message" class="form-control" placeholder="Message for me *" rows="6" required="required" data-error="Please,leave us a message."></textarea>
                <div class="help-block with-errors"></div>
            </div>
        </div>
        <div class="col-md-12">
            <button class="btn btn-success btn-send" id="sendEmailBtn">Send message</button>
        </div>
    </div>
    <div class="row">
        <div class="col-md-12">
            <p class="text-muted"><strong>*</strong> These fields are required.</p>
        </div>
    </div>
</div>

<script type="text/javascript">
    $(document).ready(function () {
        $("#sendEmailBtn").click(function () {
            /* Disable the input fields and button so the user
                can't edit them or submit the form multiple times */
            $("input").prop("disabled", true);
            $("#sendEmailBtn").prop("disabled", true);

            // Submit the form via ajax
            $.post("http://yourdomain.com/sendemail.php", {
                name: $("#form_name").val(),
                surname: $("#form_lastname").val(),
                email: $("#form_email").val(),
                phone: $("#form_phone").val(),
                message: $("#form_message").val()
            }, function (data, status) {
                /* Responses, check the data is correct if it is display
                   your message else enable the form elements and button
                   and display an error message */
                console.log(data, status);
                // Method to display your message, maybe something like this: $(".messages").html("<h1>your messages</h1>");
            });
        });
    });
</script>

This should work without your PHP script needing to be changed.