maintain the contact form submitted by the user after the email has been successfully sent.

After pressing the Submit button, I hope the page will be reset (reroading).

I've looked for all the similar questions and I don't know what to do because it's different from me.

Second, when you press the submission button, the mail arrives well at [email protected], but when you open the mailbox, the content page. width, is too narrow.

Div id='success_page'
<fieldset>
echo "<div id='success_page'>

I don't know where the set value of div id='success_page' is.

Id=success_page not found in css.

<form method="post" action="php/contact.php" name="contactform" id="contactform">
<input name="name" type="text" id="name"  onClick="this.select()" value="Name" >
<input name="email" type="text" id="email" onClick="this.select()" value="E-mail" >            
<input type="text"  name="phone" id="phone" onClick="this.select()" value="Phone" > 
<textarea name="comments"  id="comments" onClick="this.select()" >Write something here!</textarea>
<button type="submit"  id="submit"  data-top-bottom="transform: translateY(-50px);" data-bottom-top="transform: translateY(50px);"><span>Send Message </span></button>                                                                                                      
</form>

$address = "[email protected]";

$e_subject = 'Hello - by' . $name ;
$e_reply = "name: $name" . "\r\n". "e-email: $email". "\r\n". "phone: $phone" . "\r\n". "\r\n" ;
$e_content = "\"$comments\"" . PHP_EOL . PHP_EOL;

$msg = wordwrap( $e_body . $e_reply . $e_content, 70 );
$headers = array("From: $_POST[contactform_sender_email]"); // No!
$headers = array("From: $email",
    "Reply-To: $email",
    "X-Mailer: PHP/" . PHP_VERSION
);
$headers = implode("\r\n", $headers);
mail($to, $subject, $message, $headers);

$headers .= "MIME-Version: 1.0" . PHP_EOL;
$headers .= "Content-type: text/plain; charset=utf-8" . PHP_EOL;
$headers .= "Content-Transfer-Encoding: quoted-printable" . PHP_EOL;

if(mail($address, $e_subject, $msg, $headers)) {

    echo "<fieldset>";
    echo "<div id='success_page'>";
    echo "<h3>Email Sent Successfully.</h3>";
    echo "<p>Thank you <strong>$name</strong>, your message has been submitted to us.</p>";
    echo "</div>";
    echo "</fieldset>";

} else {
    echo 'ERROR!';

// contact form .js------------------
$("#contactform").submit(function() {
    var a = $(this).attr("action");
    $("#message").slideUp(750, function() {
        $("#message").hide();
        $("#submit").attr("disabled", "disabled");
        $.post(a, {
            name: $("#name").val(),
            email: $("#email").val(),
            phone: $("#phone").val(),
            comments: $("#comments").val()
        }, function(a) {
            document.getElementById("message").innerHTML = a;
            $("#message").slideDown("slow");
            $("#submit").removeAttr("disabled");
            if (null != a.match("success")) $("#contactform").slideDown("slow");
        });
    });
    return false;
});
$("#contactform input, #contactform textarea").keyup(function() {
    $("#message").slideUp(1500);
});

CodePudding user response：

Just set the value to empty string.

$("#contactform").submit(function() {
    var a = $(this).prop("action");
    $("#message").slideUp(750, function() {
        $("#message").hide();
        $("#submit").prop("disabled", "disabled");
        $.post(a, {
            name: $("#name").val(),
            email: $("#email").val(),
            phone: $("#phone").val(),
            comments: $("#comments").val()
        }, function(a) {
            document.getElementById("message").innerHTML = a;
            $("#message").slideDown("slow");
            $("#submit").removeAttr("disabled");
            if (null != a.match("success")){
              $("#contactform").slideDown("slow");
              $("#name").val('');
              $("#email").val('');
              $("#phone").val('');
              $("#comments").val('');
            };
        });
    });
    return false;
});

CodePudding user response：

$("#contactform").submit(function() {
    var a = $(this).prop("action");
    $("#message").slideUp(750, function() {
        $("#message").hide();
        $("#submit").prop("disabled", "disabled");
        $.post(a, {
            name: $("#name").val(),
            email: $("#email").val(),
            phone: $("#phone").val(),
            comments: $("#comments").val()
        }, function(a) {
            document.getElementById("message").innerHTML = a;
            $("#message").slideDown("slow");
            $("#submit").removeAttr("disabled");
            if (null != a.match("success")){
              $("#contactform").slideDown("slow");
              $('#contactform')[0].reset();  // reset all form fields here.
            };
        });
    });
    return false;
})