PHP联系表单提交成功后无法显示HTML预设提示如何修改

解决方案 #

你当前的问题是表单直接提交到独立的contact.php文件，提交后会跳转至该文件的输出页面，自然无法复用原页面的预设提示框，可通过以下两种方案解决：

方案1：同页面提交（无需写JS，改造成本最低） #

把PHP逻辑和表单HTML放在同一个页面文件中（将原页面后缀改为.php），提交时请求当前页面即可：

1. 修改表单action属性为空，提交到当前页面：

<form action="" method="post" role="form" class="php-email-form">

2. 调整PHP代码，新增提交状态变量：

<?php
$send_status = 0; // 0=未提交 1=发送成功 2=发送失败
if ( isset($_POST['email']) && $_POST['email'] != ''  ) {
    if ( filter_var($_POST['email'], FILTER_VALIDATE_EMAIL) ) {
        $name = $_POST['name'];
        $email = $_POST['email'];
        $subject = $_POST['subject'];
        $message = $_POST['message'];
        $to = 'receiver_email address';
        $body = "";
        $body .= "From: ".$name. "\r\n";
        $body .= "Email: ".$email. "\r\n";
        $body .= "Message: ".$message. "\r\n";
        $send_status = mail($to, $subject, $body) ? 1 : 2;
    } else {
        $send_status = 2;
    }
}
?>

3. 修改原HTML的提示框部分，通过PHP控制显示逻辑：

<div class="my-3">
    <div class="loading" style="display:none">Loading</div>
    <div class="error-message" <?php if($send_status!=2) echo 'style="display:none"'?>>发送失败，请检查输入后重试</div>
    <div class="sent-message" <?php if($send_status!=1) echo 'style="display:none"'?>>Your message has been sent. Thank you!</div>
</div>

方案2：AJAX异步提交（页面无刷新，体验更好） #

通过JS拦截表单提交，异步请求contact.php，根据返回结果控制原页面提示框显示：

1. 给表单添加ID方便选择：

<form id="contactForm" action="contact.php" method="post" role="form" class="php-email-form">

2. 页面新增JS代码：

document.querySelector('#contactForm').addEventListener('submit', function(e) {
    e.preventDefault(); // 阻止默认跳转提交
    // 重置提示状态
    document.querySelector('.loading').style.display = 'block';
    document.querySelector('.error-message').style.display = 'none';
    document.querySelector('.sent-message').style.display = 'none';

    let formData = new FormData(this);
    // 异步提交请求
    fetch('contact.php', {
        method: 'POST',
        body: formData
    })
    .then(res => res.text())
    .then(res => {
        document.querySelector('.loading').style.display = 'none';
        if(res.trim() === 'success'){
            document.querySelector('.sent-message').style.display = 'block';
            this.reset(); // 提交成功清空表单
        }else{
            document.querySelector('.error-message').style.display = 'block';
        }
    })
    .catch(() => {
        document.querySelector('.loading').style.display = 'none';
        document.querySelector('.error-message').style.display = 'block';
    });
})

3. 修改contact.php的输出逻辑：

<?php
if ( isset($_POST['email']) && $_POST['email'] != ''  ) {
    if ( filter_var($_POST['email'], FILTER_VALIDATE_EMAIL) ) {
        $name = $_POST['name'];
        $email = $_POST['email'];
        $subject = $_POST['subject'];
        $message = $_POST['message'];
        $to = 'receiver_email address';
        $body = "";
        $body .= "From: ".$name. "\r\n";
        $body .= "Email: ".$email. "\r\n";
        $body .= "Message: ".$message. "\r\n";
        echo mail($to, $subject, $body) ? 'success' : 'fail';
    } else {
        echo 'fail';
    }
}
?>

内容的提问来源于stack exchange，提问作者chiru.leonard