How to show a success dialog box after submitting the form in html?

Question

I'm a newbie to php and html, I've created a form which will accept the inputs from user and will send it to a specified Email id. Everything is working fine but on submitting the form, it goes to another new page. How this can be replaced with a dialog box as a confirmation message upon submitting the form?

HTML -

<form method="POST" name="contactform" action="contact-form-handler.php"> 
<p>
<label for='name'>Your Name:</label> <br>
<input type="text" name="name">
</p>
<p>
<label for='email'>Email Address:</label> <br>
<input type="text" name="email"> <br>
</p>
<p>
<label for='message'>Message:</label> <br>
<textarea name="message"></textarea>
</p>
<input type="submit" value="Submit"><br>
</form>

PHP -

<?php 
$errors = '';
$myemail = 'mymail@gmail.com';//<-----Put Your email address here.
if(empty($_POST['name'])  || 
   empty($_POST['email']) || 
   empty($_POST['message']))
{
    $errors .= "\n Error: all fields are required";
}

$name = $_POST['name']; 
$email_address = $_POST['email']; 
$message = $_POST['message']; 

if (!preg_match(
"/^[_a-z0-9-]+(\.[_a-z0-9-]+)*@[a-z0-9-]+(\.[a-z0-9-]+)*(\.[a-z]{2,3})$/i", 
$email_address))
{
    $errors .= "\n Error: Invalid email address";
}

if( empty($errors))
{
    $to = $myemail; 
    $email_subject = "Contact form submission: $name";
    $email_body = "You have received a new message. ".
    " Here are the details:\n Name : $name \n Email : $email_address \n Message : $message"; 

    $headers = "From: $myemail\n"; 
    $headers .= "Reply-To: $email_address";

    mail($to,$email_subject,$email_body,$headers);
    //redirect to the 'thank you' page
    echo "Your Message successfully sent, we will get back to you ASAP.";
} 
?>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 
<html>
<head>
    <title>Contact form handler</title>
</head>

<body>
<!-- This page is displayed only if there is some error -->
<?php
echo nl2br($errors);
?>


</body>
</html>

if you want to submit form with out go into another page , u should use Ajax method. Check https://api.jquery.com/jquery.post/ , using jquery. For Eg: https://www.formget.com/submit-form-using-ajax-php-and-jquery/ — Jomy Joseph, Nov 20 '17 at 09:07
@abhishek-d If you want to show confirmation message to the users at the same page in a quick way then you can simply use javascript alert. — Amit Gupta, Nov 20 '17 at 09:22
@AmitGupta But how to prevent the page navigating to another page? — Abhishek D, Nov 20 '17 at 09:44
@abhishek-d don't give any action for your page if you want to remain in the same page. You need to add submit code of your form in the top of your same page only. — Amit Gupta, Nov 20 '17 at 09:47
I will give everything in the answer shortly that will help you. — Amit Gupta, Nov 20 '17 at 09:48
@abhishek-d Please check my answer. If I am not wrong, that's what you are looking for? — Amit Gupta, Nov 20 '17 at 09:59
Yes @AmitGupta but it is not showing any dialog box after submission. — Abhishek D, Nov 20 '17 at 10:04
@abhishek-d I think you are asking for Modal box. Please check at https://www.w3schools.com/howto/howto_css_modals.asp But this will take some time to implement. Alert Box is the simplest way to show users, otherwise we can do with PHP and Jquery also. Please accept my answer and upvote if you are satisfied. Happy coding! — Amit Gupta, Nov 20 '17 at 10:06
@abhishek-d I have shared link with you in above posts. Try once yourself. You can contact me if you face any issue. — Amit Gupta, Nov 20 '17 at 10:13
@abhishek-d For the dialog box to show, its better if you make separate thanks page and send the form action to that. — Amit Gupta, Nov 20 '17 at 10:14
@abhishek-d So first make one thanks.php page with the instructions provided in the link that I have shared with you. And simply in the form action, give that thanks.php page. — Amit Gupta, Nov 20 '17 at 10:15

score 0 · Answer 1 · answered Nov 20 '17 at 09:23

It can be done with following jQuery function:

$(document).ready(function() {
    $("[name='contactForm']").submit(function() {
        if(confirm("You are about to submit the form. Are you sure?")){
            window.location = "http://www.google.com/"
        };
    });
});

But you will be redirected to a blank new page anyways. In order to prevent that you can either use an AJAX submit(simply add AJAX construction inside the function) or do the redirect using JavaScript function I added to jQuery script

Thank you for your solution to the problem of mine. But can you please update me with a solution which will give a Confirmation message on successful submission instead of a question? — Abhishek D, Nov 20 '17 at 09:43

score 0 · Accepted Answer · answered Nov 20 '17 at 09:58

You can submit the form in the same page and can simply show JavaScript alert message to the users.

Below code will help you resolving your issue.

<?php 
if(isset($_POST['btnSubmit'])){
$errors = '';
$myemail = 'mymail@gmail.com';//<-----Put Your email address here.
if(empty($_POST['name'])  || 
   empty($_POST['email']) || 
   empty($_POST['message']))
{
    $errors .= "\n Error: all fields are required";
}

$name = $_POST['name']; 
$email_address = $_POST['email']; 
$message = $_POST['message']; 

if (!preg_match(
"/^[_a-z0-9-]+(\.[_a-z0-9-]+)*@[a-z0-9-]+(\.[a-z0-9-]+)*(\.[a-z]{2,3})$/i", 
$email_address))
{
    $errors .= "\n Error: Invalid email address";
}

if( empty($errors))
{
    $to = $myemail; 
    $email_subject = "Contact form submission: $name";
    $email_body = "You have received a new message. ".
    " Here are the details:\n Name : $name \n Email : $email_address \n 
Message : $message"; 

    $headers = "From: $myemail\n"; 
    $headers .= "Reply-To: $email_address";

    mail($to,$email_subject,$email_body,$headers);
    //redirect to the 'thank you' page
    //echo "Your Message successfully sent, we will get back to you ASAP.";
} 
print("<script>alert('Your Message successfully sent, we will get back to 
you ASAP.');</script>");
}

?>

<form method="POST" name="contactform" action=""> 
<p>
<label for='name'>Your Name:</label> <br>
<input type="text" name="name">
</p>
<p>
<label for='email'>Email Address:</label> <br>
<input type="text" name="email"> <br>
</p>
<p>
<label for='message'>Message:</label> <br>
<textarea name="message"></textarea>
</p>
<input type="submit" value="Submit" name="btnSubmit"><br>
</form>

Hope it helps!

How to show a success dialog box after submitting the form in html?

2 Answers2