Contact Form - How to not redirect to another page after submission

Question

I have a contact form that works fine but my issue is it goes to another page if you click submit and echos "Email Sent!"

How can I prevent such redirect? I would like it to just pop under the button, or the button disappears and will be replaced with "Email Sent!" or "Error!"?

Here's my HTML:

                <div style="padding-top: 75px; padding-left: 0;" class="col-md-6 col-sm-6 col-xs-12 contact-padding hidden-xs hidden-sm" id="form_container">
                    <div class="row">
                        <div class="col-centered1 col-md-8">
                            <h2 style="font-family: 'yrthree_boldregular', sans-serif;" class="divider-header3">Hit us up</h2> 
                        </div>
                    </div>

                    <form role="form" method="post" id="contact-form" action="mail.php" name="contact-form">
                        <div class="row">
                            <div class="col-centered1 col-md-8 form-group">
                                <input type="text" id="name" name="name" class="form-control" placeholder="NAME" required>
                            </div>
                        </div>

                        <div class="row">
                            <div class="col-centered1 col-md-8 form-group">
                                <input type="text" id="email" name="email" class="form-control" placeholder="EMAIL" required>
                            </div>
                        </div>

                        <div class="row">
                            <div class="col-centered1 col-md-8 form-group">
                                <textarea style="resize: none; border: 0; color: #07002c;" class="form-control" type="text" name="message" id="message" placeholder="MESSAGE" maxlength="6000" rows="7"></textarea>
                            </div>
                        </div>

                        <div class="row">
                            <div class="col-centered1 col-md-8 form-group">
                                    <a class="btn btn-primary pull-left send-button1" onclick="document.getElementById('contact-form').submit();">
                                        <img draggable="false" src="/images/send-button1.jpg" alt="" onmouseover="this.src='/images/send-button2.jpg';" onmouseout="this.src='/images/send-button1.jpg';">
                                    </a>
                            </div>
                        </div>
                    </form>
                </div>

Here's my PHP code:

<?php
$name = $_POST['name'];
$email = $_POST['email'];
$message = $_POST['message'];
$content="From: $name \n Email: $email \n Message: $message";
$recipient = "MY@EMAIL.com";
$mailheader = "From: $email \r\n";
mail($recipient, $content, $mailheader) or die("Error!");
echo "Email sent!";
?>

Thank you! :)

You can use Ajax.https://stackoverflow.com/questions/16616250/form-submit-with-ajax-passing-form-data-to-php-without-page-refresh this post my help. — Mahbubul Islam, Oct 29 '18 at 09:31
Then either put the code and the HTML in that same file, and when you repaint the page do it with the desired result. Or you are going to have to learn some AJAX — RiggsFolly, Oct 29 '18 at 09:31
Using AJAX you can do PHP operations without page reload or redirection — Manoj Singh, Oct 29 '18 at 09:36

Hassaan Ali · Accepted Answer · 2018-10-31T02:16:06.070

You can use ajax to send without redirecting to another page. I read this answer on this. You can write your code something like this:

 <script type="text/javascript">
function sendEnquiryform(){
    var name=$('#name').val();
    var email=$('#email').val();
    var message=$('#message').val();
    $.post("send_mail.php",'name='+name+'&email='+email'&message='+message,function(result,status,xhr) {
            if( status.toLowerCase()=="error".toLowerCase() )
            { alert("An Error Occurred.."); }
            else { 
                //alert(result);
                $('#sucessMessage').html(result);
            }
        })
        .fail(function(){ alert("something went wrong. Please try again") });
}

Html:

    <form method="post" name="FrmEnquiry" id="FrmEnquiry" action="" onsubmit="sendEnquiryform();">
    <input name="name" id="name" required="required" placeholder="Your Name">
    <input name="email" id="email" type="email" required="required" placeholder="Your Email">

    <div class="clearfix"> </div>
    <textarea name="message" id="message" cols="20" rows="5" required="required" placeholder="Message"></textarea>
    <div class="submit">
        <input id="submit" name="submit" type="submit" value="Submit">
    </div>
</form>

<span id="sucessMessage"> </span>

send mail.php

 <?php
    $name = $_POST['name'];
    $email = $_POST['email'];
    $message = $_POST['message'];
    $from = 'From: agriindiaexp.com'; 
    $to = 'shridhar.kagi@gmail.com'; 
    $subject = 'Email Inquiry';

    $body = "From: $name\n E-Mail: $email\n Message:\n $message";

    if ($_POST['submit']) {
        if (mail ($to, $subject, $body, $from)) { 
           $success = "Message successfully sent";
        } else {
            $success = "Message Sending Failed, try again";
        }
    }
?>

This worked for me. Thanks to the author for answering it.

Code's from here: https://stackoverflow.com/questions/40968647/how-to-get-the-sucess-message-in-the-same-page-after-submitting-the-contact-form — brasofilo, Oct 31 '18 at 02:12

score 0 · Answer 2 · answered Oct 29 '18 at 09:33

0

form action should be blank like and add php code should be on same page and files ext. should be .php

answered Oct 29 '18 at 09:33

MANOJ VASHIST

98
6

Contact Form - How to not redirect to another page after submission

2 Answers2