How to get the sucess message in the same page after submitting the contact form?

Question

I have created the contact form using HTML and PHP. Also, the mail is coming correctly to mail id. But after the success message, it is redirecting to the form.php page can someone please help me. It is my first time trying to build a website.

Here is my code for contact form:

<form method="post" action="form.php">
    <input name="name" required="required" placeholder="Your Name">
    <input name="email" type="email" required="required" placeholder="Your Email">

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

here is my form.php :

<?php
$name = $_POST['name'];
$email = $_POST['email'];
$message = $_POST['message'];
$from = 'From: agriindiaexp.com'; 
$to = '[email protected]'; 
$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";
    }
}
?>

Please help me.

Answer 1

try this way . try to send mail from an ajax . Please write your code like below

javascript

    <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") });
    }
</script>

Your 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 = '[email protected]'; 
    $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 will display your message in your page.Please try this. This is working fine in my case.

Answer 2

You could post the form to the same page and check for a success message there, like this.

<?php

if ($_POST['submit']) {
    $name = $_POST['name'];
    $email = $_POST['email'];
    $message = $_POST['message'];
    $from = 'From: agriindiaexp.com'; 
    $to = '[email protected]'; 
    $subject = 'Email Inquiry';

    $body = "From: $name\n E-Mail: $email\n Message:\n $message";
    if (mail ($to, $subject, $body, $from)) { 
       $success = "Message successfully sent";
    } else {
        $success = "Message Sending Failed, try again";
    }
}
?>

...other html....

<div id="message"><?php if(isset($success)){ echo $success; } ?></div>
<form method="post" action="<?php echo $_SERVER['PHP_SELF']; ?>">
    <input name="name" required="required" placeholder="Your Name">
    <input name="email" type="email" required="required" placeholder="Your Email">

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

...other html....