提交联系表后显示 "thank you" 消息

Question

我的网站上有一个可用的联系表。提交按钮指向一个 .php 文件，该文件正在发送电子邮件（用户看不到此步骤）并再次将用户重定向到联系表单。

我想在点击提交按钮后在屏幕中央制作一条简单的消息。诸如“感谢您发送申请”之类的内容。

我试图在 php 文件中设置一个变量

$mailSent = 1;

然后在脚本中捕获它

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

然后我想做一个简单的 if 语句和 style.display 消息传递器。遗憾的是它没有成功，我遇到了未定义的错误。

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

我想问你，你对如何做有什么想法吗？我希望消息看起来像 bootstrap 模式。

这是我的联系方式：

<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>

这是我的 php 联系表单处理程序

<?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

您正在尝试添加已解析的 php 代码。 PHP 代码首先被解析为 HTML 代码，然后您再次将 PHP 代码添加到 Javascript 代码中。

添加这个：

$mailSent = false;

如果您的邮件发送成功，请将该变量切换为 true。那么：

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

编辑：试试这个：

<?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

现在看起来像这样：

<?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>

程序 echo 的 $mailSent = 0，但尽管它正确发送了一封电子邮件，但它没有覆盖 $mailSent 变量...

我是一个刚入门的程序员，所以我这辈子第一次看到这个错误，很抱歉在某些情况下是无知的。我很想学习框架，但我觉得现在对我来说还为时过早。

这是我的网站 URL 如果对您有所帮助：

www.poznanprzeprowadzki.pl

提交联系表后显示 "thank you" 消息

Showing a "thank you" message after submiting a Contact Form

javascript

message

popup

contact-form