Showing a “thank you” message after submiting a Contact Form

Question

I have a working Contact Form on my website. The submit button leads to a.php file that is sending an e-mail (User doesn't see this step) and redirect user to contact form again.

I wanna make a simple message on the center of the screen after clicking the submit button. Something like "Thank you for sending the application".

I tried to set a variable in the php file

$mailSent = 1;

and then catch it in the script

var mailSent = "<?php echo $mailSent; ?>";

Then I wanted to do a simple if statement and style.display the message cotnainer. Sadly it didn't work out, I was getting the undefined errors.

if (mailSent == 1) {
    document.querySelector('.thankYouMessage').style.display = 'flex';
}

I wanted to ask you if you have any ideas on how to do it. I want the message to look like a bootstrap modal.

This is my contact form:

<div class="contact-form-container">
            <div class="contact-form">
                <form action="contact-form-handler.php" method="POST">
                    <h1 class="lang" key="contact-form" style="margin: 0 auto; font-size: 22px; font-family: Open Sans; color: #ff4800; margin-bottom: 10px; padding-bottom: 4px; font-weight: 100; width: 100%; text-align: center;">Formularz kontaktowy</h1>

                    <label class="lang" key="contact-form-name" for=""></label>
                    <input id="name" class="contact-form-content" type="text" name="name" required>
                    
                    <label class="lang" key="contact-form-email" for=""></label>
                    <input id="email" class="contact-form-content" type="email" name="email" required>
                    
                    <label class="lang" key="contact-form-topic" for=""></label>
                    <input id="topic" class="contact-form-content" type="text" name="topic" required>
                    
                    <label class="lang" key="contact-form-text" for=""></label>
                    <textarea id="message" name="message" style="line-height:16px; font-size: 14px; font-family: calibri;" class="contact-form-content" cols="" rows="10"></textarea>
                    
                    <button class="contact-form-content-submit" name="submit" type="submit"><p class="lang" key="contact-form-send" style="margin: 0; padding: 0;">Wyślij</p><img id ="Contact_icon_white" src="img/Contact_icon_white.png" alt="White contact icon"></button>  
                </form>
                <div class="contact-form-callnow" style="display: flex; align-items: center; justify-content: center; margin: 0; padding: 0;">
                    <p class="lang" key="callnow" id="contact-form-callnow" style="font-family: Open Sans; margin: 0; padding: 14px 0px 4px 0px;">Zadzwoń teraz i umów przeprowadzkę!</p>
                </div>
                <div style="display: flex; align-items: center; justify-content: center; margin: 0; padding: 0;">
                    <a style="margin: 0; padding: 0;" href="tel:+48732739751"><img src="img/Phone_icon_green.png" alt="Phone icon" style="height: 28px; padding-right: 10px"></a>
                    <a style="margin: 0; padding: 0;" href="tel:+48732739751"><p style="font-family: Open Sans; margin: 0; padding: 4px 0px 10px 0px; font-size: 20px;">732 739 751</p></a>
                </div>
            </div>
        </div>

And this is my php Contact-form-handler

<?php

if(isset($_POST['submit'])) {

    $name = $_POST['name'];
    $visitor_email = $_POST['email'];
    $topic = $_POST['topic'];
    $message = $_POST['message'];

    $to = "xyz@xyz.pl";

    $subject = "Tu ".$name.". Wiadomość do xyz";

    $headers = "From: ".$visitor_email;

    $txt = "\nNowa wiadomość od: ".$name."\n\n\nTemat:\n".$topic."\n\n\nWiadomość:\n".$message;

    mail($to, $subject, $txt, $headers);

    header ('Location: contact.php');  

} else {

    header ('location: index.php');

}

?>

Answer 1

You are trying to add an already parsed php code. PHP code is parsed to HTML code first, and you are adding the PHP code again to your Javascript code.

Add this:

$mailSent = false;

If your mail is successfully sent, switch that variable to true . Then:

<?php
if($mailSent === true) {
?>
    <div class="success"></div>
<?php
}
?>

Edit: Try This:

<?php

$mailSent = false;

if(isset($_POST['submit'])) {

        $name = $_POST['name'];
        $visitor_email = $_POST['email'];
        $topic = $_POST['topic'];
        $message = $_POST['message'];

        $to = "marcincelmer95@gmail.com";

        $subject = "Tu ".$name.". Wiadomość do poznanprzeprowadzki.pl";

        $headers = "From: ".$visitor_email;

        $txt = "\nNowa wiadomość od: ".$name."\n\n\nTemat:\n".$topic."\n\n\nWiadomość:\n".$message;

        mail($to, $subject, $txt, $headers);

        $mailSent = true;

}

?>

<?php
if ($mailSent === true) {
?>
<div class="success">Mail is succesfully sent.</div>
<?php
}
?>

<div class="contact-form-container">
            <div class="contact-form">
                <form action="contact.php" method="POST">
                    <h1 class="lang" key="contact-form" style="margin: 0 auto; font-size: 22px; font-family: Open Sans; color: #ff4800; margin-bottom: 10px; padding-bottom: 4px; font-weight: 100; width: 100%; text-align: center;">Formularz kontaktowy</h1>

                    <label class="lang" key="contact-form-name" for=""></label>
                    <input id="name" class="contact-form-content" type="text" name="name" required>
                    
                    <label class="lang" key="contact-form-email" for=""></label>
                    <input id="email" class="contact-form-content" type="email" name="email" required>
                    
                    <label class="lang" key="contact-form-topic" for=""></label>
                    <input id="topic" class="contact-form-content" type="text" name="topic" required>
                    
                    <label class="lang" key="contact-form-text" for=""></label>
                    <textarea id="message" name="message" style="line-height:16px; font-size: 14px; font-family: calibri;" class="contact-form-content" cols="" rows="10"></textarea>
                    
                    <button class="contact-form-content-submit" name="submit" type="submit"><p class="lang" key="contact-form-send" style="margin: 0; padding: 0;">Wyślij</p><img id ="Contact_icon_white" src="img/Contact_icon_white.png" alt="White contact icon"></button>  
                </form>
                <div class="contact-form-callnow" style="display: flex; align-items: center; justify-content: center; margin: 0; padding: 0;">
                    <p class="lang" key="callnow" id="contact-form-callnow" style="font-family: Open Sans; margin: 0; padding: 14px 0px 4px 0px;">Zadzwoń teraz i umów przeprowadzkę!</p>
                </div>
                <div style="display: flex; align-items: center; justify-content: center; margin: 0; padding: 0;">
                    <a style="margin: 0; padding: 0;" href="tel:+48732739751"><img src="img/Phone_icon_green.png" alt="Phone icon" style="height: 28px; padding-right: 10px"></a>
                    <a style="margin: 0; padding: 0;" href="tel:+48732739751"><p style="font-family: Open Sans; margin: 0; padding: 4px 0px 10px 0px; font-size: 20px;">732 739 751</p></a>
                </div>
            </div>
        </div>

Answer 2

Now it looks like this:

<?php

$mailSent = 0;

echo $mailSent;

if ($mailSent === 1) {
    
    echo "<script>

        function myFunction() {
            document.querySelector('.modal-background').style.display = 'flex';
        };

    </script>";

}

else if ($mailSent === 0) {

    if(isset($_POST['submit'])) {

        $name = $_POST['name'];
        $visitor_email = $_POST['email'];
        $topic = $_POST['topic'];
        $message = $_POST['message'];

        $to = "marcincelmer95@gmail.com";

        $subject = "Tu ".$name.". Wiadomość do poznanprzeprowadzki.pl";

        $headers = "From: ".$visitor_email;

        $txt = "\nNowa wiadomość od: ".$name."\n\n\nTemat:\n".$topic."\n\n\nWiadomość:\n".$message;

        mail($to, $subject, $txt, $headers);

        $mailSent = 1;  

    } 

}

else {

}

?>

        <div class="contact-form-container">
            <div class="contact-form">
                <form action="contact.php" method="POST">
                    <h1 class="lang" key="contact-form" style="margin: 0 auto; font-size: 22px; font-family: Open Sans; color: #ff4800; margin-bottom: 10px; padding-bottom: 4px; font-weight: 100; width: 100%; text-align: center;">Formularz kontaktowy</h1>

                    <label class="lang" key="contact-form-name" for=""></label>
                    <input id="name" class="contact-form-content" type="text" name="name" required>
                    
                    <label class="lang" key="contact-form-email" for=""></label>
                    <input id="email" class="contact-form-content" type="email" name="email" required>
                    
                    <label class="lang" key="contact-form-topic" for=""></label>
                    <input id="topic" class="contact-form-content" type="text" name="topic" required>
                    
                    <label class="lang" key="contact-form-text" for=""></label>
                    <textarea id="message" name="message" style="line-height:16px; font-size: 14px; font-family: calibri;" class="contact-form-content" cols="" rows="10"></textarea>
                    
                    <button class="contact-form-content-submit" name="submit" type="submit"><p class="lang" key="contact-form-send" style="margin: 0; padding: 0;">Wyślij</p><img id ="Contact_icon_white" src="img/Contact_icon_white.png" alt="White contact icon"></button>  
                </form>
                <div class="contact-form-callnow" style="display: flex; align-items: center; justify-content: center; margin: 0; padding: 0;">
                    <p class="lang" key="callnow" id="contact-form-callnow" style="font-family: Open Sans; margin: 0; padding: 14px 0px 4px 0px;">Zadzwoń teraz i umów przeprowadzkę!</p>
                </div>
                <div style="display: flex; align-items: center; justify-content: center; margin: 0; padding: 0;">
                    <a style="margin: 0; padding: 0;" href="tel:+48732739751"><img src="img/Phone_icon_green.png" alt="Phone icon" style="height: 28px; padding-right: 10px"></a>
                    <a style="margin: 0; padding: 0;" href="tel:+48732739751"><p style="font-family: Open Sans; margin: 0; padding: 4px 0px 10px 0px; font-size: 20px;">732 739 751</p></a>
                </div>
            </div>
        </div>

The program echo's the $mailSent = 0, but despite the fact that it sends an email correctly, it does not overwrite the $mailSent variable...

I'm a beggining programmer so I see this bugs for the first time in my life, sorry for being ignorant in some cases. I would love to learn frameworks but I feel like it's a bit too early for me to understand it all.

This is my website's URL if it helps somehow:

www.poznanprzeprowadzki.pl