PHP: How to clear form after submit and show success alert? - php

Question

I've been having trouble with PHP (new to php) to clear my form fields AFTER a successful submission. I would also like to show an alert that it was successful. Any ideas? Using javascript with the onclick listener for the submit button will not work because it clears the fields before PHP has time to send the data.
Here is my html:
<div class="col-lg-7 mt-5 mt-lg-0 d-flex align-items-strech" data-aos="fade-left">
<form id="contact-form" action="contact-form-handler.php" method="post" role="form" class="php-email-form">
<div class="form-row">
<div class="form-group col-md-6">
<label for="name">Name</label>
<input type="text" name="name" class="form-control" id="name" data-rule="minlen:4" data-msg="Please enter at least 4 characters"/>
<div class="validate"></div>
</div>
<div class="form-group col-md-6">
<label for="name">Email</label>
<input type="email" name="email" class="form-control" id="email" data-rule="email" data-msg="Please enter at valid email"/>
<div class="validate"></div>
</div>
</div>
<div class="form-group">
<label for="name">Subject</label>
<input type="text" class="form-control" name="subject" id="subject" data-rule="minlen:4" data-msg="Please enter a subject of at least 8 characters"/>
<div class="validate"></div>
</div>
<div class="form-group">
<label for="message">Message</label>
<textarea class="form-control" name="message" rows="10" data-rule="required" data-msg="Please enter a message"></textarea>
<div class="validate"></div>
</div>
<div class="text-center"><button type="submit">Send Message</button></div>
</form>
</div>
Here is my PHP:
<?php
$name = $_POST['name'];
$visitor_email = $_POST['email'];
$subject = $_POST['subject'];
$message = $_POST['message'];
$email_from = "Portfolio Email";
$email_body = "Name: $name.\n".
"User Email: $visitor_email.\n".
"User Message: $message.\n";
$email_to = "email#gmail.com";
$headers = "From: $email_from \r\n";
mail($email_to, $subject, $email_body);
?>

Answer 1

If you do not want to use ajax, please try the following
(assuming the html is known as "form.html", and the php is "contact-form-handler.php")
The php redirection to form.html will clear the input fields (a normal behavior in web-browsers), and the javascript will show the word "successful" as an alert.
Please make further adjustment(s) according to your needs.
form.html
<div class="col-lg-7 mt-5 mt-lg-0 d-flex align-items-strech" data-aos="fade-left">
<form id="contact-form" action="contact-form-handler.php" method="post" role="form" class="php-email-form">
<div class="form-row">
<div class="form-group col-md-6">
<label for="name">Name</label>
<input type="text" name="name" class="form-control" id="name" data-rule="minlen:4" data-msg="Please enter at least 4 characters"/>
<div class="validate"></div>
</div>
<div class="form-group col-md-6">
<label for="name">Email</label>
<input type="email" name="email" class="form-control" id="email" data-rule="email" data-msg="Please enter at valid email"/>
<div class="validate"></div>
</div>
</div>
<div class="form-group">
<label for="name">Subject</label>
<input type="text" class="form-control" name="subject" id="subject" data-rule="minlen:4" data-msg="Please enter a subject of at least 8 characters"/>
<div class="validate"></div>
</div>
<div class="form-group">
<label for="message">Message</label>
<textarea class="form-control" name="message" rows="10" data-rule="required" data-msg="Please enter a message"></textarea>
<div class="validate"></div>
</div>
<div class="text-center"><button type="submit">Send Message</button></div>
</form>
</div>
<script>
function get(name){
if(name=(new RegExp('[?&]'+encodeURIComponent(name)+'=([^&]*)')).exec(location.search))
return decodeURIComponent(name[1]);
}
</script>
<script>
if (get("result")=="success")
{
alert("Successful");
}
</script>
contact-form-handler.php
<?php
$name = $_POST['name'];
$visitor_email = $_POST['email'];
$subject = $_POST['subject'];
$message = $_POST['message'];
$email_from = "Portfolio Email";
$email_body = "Name: $name.\n".
"User Email: $visitor_email.\n".
"User Message: $message.\n";
$email_to = "email#gmail.com";
$headers = "From: $email_from \r\n";
mail($email_to, $subject, $email_body);
?>
<script>
window.location.href="form.html?result=success"
</script>