how do i display a custom message after submitting a form?

Question

I have a html form that sends email, using phpMailer, after its submission. Everything works fine but i want to display a message on the form when the email is sent. With my code, a message is displayed on an empty white page.

My php code:

<?php

$name = $_POST['name'] ?? '';
$email = $_POST['email'] ?? '';
$msg = $_POST['msg'] ?? '';

  use PHPMailer\PHPMailer\PHPMailer;
  use PHPMailer\PHPMailer\SMTP;
  use PHPMailer\PHPMailer\Exception;

  require 'vendor/autoload.php';

  $mail = new PHPMailer(true);

  try {

    $mail->Host='smtp.gmail.com';
    $mail->SMTPDebug = 0;
    $mail->isSMTP();
    $mail->Port=587;
    $mail->SMTPAuth=true;
    $mail->SMTPSecure='tls';
    $mail->Username='email@email.com';
    $mail->Password='password';

    $mail->setFrom($email, $name);  // who send the email
    $mail->addAddress('email@email.com'); // who recive the email

    $mail->isHTML(true);
    $mail->Subject = 'Portfolio response';
    $mail->Body = $msg;

    $mail->send();
     echo 'Your message has been sent!';
    } catch (Exception $e){
        echo '';
    }

?>

Your message has been sent! is obviously the message displayed.

Html form code:

 <form action="mail-handler.php" method="POST" id="contact-form">
              <span class="contacts-text" id="first-contacts-text">To get in touch with me, please compile this form.</span>
              <span class="contacts-text">I will reply as soon as possible. Thank you!</span>
              <ul class="form-content">
                  <li class="form-input">
                      <label for="name" class="label">Full name</label>
                      <input class="input" id="name" type="text" name="name" required>
                  </li>
                  <li class="form-input">
                      <label for="email" class="label">E-mail</label>
                      <input class="input" id="mail" type="text" name="email" required>
                  </li>
                  <li class="form-input">
                      <label for="msg" class="label">Insert text</label>
                      <textarea class="input" id="comment" type="text" name="msg" cols="30" rows="10" style="resize: none;" required></textarea>
                  </li>
                  <li class="form-input" id="last-input">
                      <input class="input" id="form-button" type="submit" value="submit" name="submit" onclick="sendEmail()">
                  </li>
              </ul>
            </form>

Thanks in advice!

Answer 1

First, change the name of your index.html to index.php, so it can be parsed by a PHP interpreter.

Next modiy your success statement body, i.e.:

try {
    $mail->send();
    header('Location: index.php?mailsent=1');
    die(); // we don't want exactly anything after sending redirect header.
} catch (Exception $e){
    echo '';
}

Finally in file with your form add the message if $_GET['mailsent'] variable is available.

HTML code of your page...
...
<?php
    if (isset($_GET['mailsent']) && intval($_GET['mailsent']) == 1 ){
        echo '<div class="messagesbox">Mail was sent</div>';
    }
?>
<form action="mail-handler.php" method="POST" id="contact-form">
   ... your form body skipped here
</form>

Other options

If you don't want to pass arguments via GET array, you can try to use sessions.

Also, you can just create a static thankyou.html page and redirect the user there, after mail submitting

Also, if you move the whole PHP code for the form submittion into index.php you won't need to make redirects.

Finally, as you added - while it's one-page site you should also consider using AJAX probably with jQuery - that way you're will be able to submit the form without leaving the page, display messages without reloading, etc. Anyway, this topic is definitely too broad to be described in this answer and I can only suggest you get familiar with jQuery AJAX.