提交PHPMailer表单后如何在原表单页展示自定义发送成功提示

核心问题原因：当前表单使用同步提交模式，提交后会直接跳转到处理脚本所在的空白页，要实现无跳转提示，需要改成异步提交模式，分两步调整代码：

1. 改造后端PHP处理脚本（mail-handler.php） #

原脚本直接输出纯文本，无法被前端异步请求识别状态，需要调整为返回结构化JSON响应，同时补全原代码中为空的错误捕获逻辑：

• 响应开头设置JSON格式头，避免前端解析报错
• 成功、失败场景都返回带状态标识和提示内容的结构化数据
• 修正原代码中setFrom的配置问题：使用用户提交的邮箱作为发件人会触发Gmail的SPF/DKIM校验失败，直接导致发送被拦截，建议保留固定发件人，将用户填写的邮箱设置为回复地址
  改造后的完整代码：

<?php
// 声明返回内容为JSON格式
header('Content-Type: application/json; charset=utf-8');

$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';

    // 固定发件人通过SMTP账号验证，用户邮箱设为回复地址
    $mail->setFrom('email@email.com', $name);
    $mail->addAddress('email@email.com');
    $mail->addReplyTo($email, $name);

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

    $mail->send();
    // 成功场景返回结构化结果
    echo json_encode([
        'status' => 'success',
        'message' => 'Your message has been sent!'
    ]);
} catch (Exception $e){
    // 补全失败场景的返回逻辑，避免用户无感知
    echo json_encode([
        'status' => 'error',
        'message' => 'Message could not be sent. Please try again later.'
    ]);
}
?>

2. 改造前端表单提交逻辑 #

去掉原submit按钮上无实际逻辑的onclick="sendEmail()"绑定（该函数未定义，会触发JS报错），给表单绑定异步提交事件，阻止默认的跳转行为，拿到后端返回结果后在页面展示提示：

• 在表单上方预留独立的提示展示位
• 使用原生Fetch API实现异步请求，无需引入第三方库
• 增加提交中状态锁定，避免用户重复点击提交
  改造后的前端完整代码：

<!-- 预留提示展示位 -->
<div id="form-tip" class="form-tip"></div>

<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">
        </li>
    </ul>
</form>

<script>
const form = document.getElementById('contact-form');
const tipBox = document.getElementById('form-tip');
const submitBtn = document.getElementById('form-button');

form.addEventListener('submit', async (e) => {
    // 阻止表单默认的同步跳转行为
    e.preventDefault();
    // 锁定提交按钮，防止重复提交
    submitBtn.disabled = true;
    tipBox.textContent = 'Sending...';

    try {
        // 构造表单提交数据
        const formData = new FormData(form);
        // 异步请求后端处理脚本
        const res = await fetch('mail-handler.php', {
            method: 'POST',
            body: formData
        });
        const result = await res.json();

        // 根据返回状态展示对应提示
        if (result.status === 'success') {
            tipBox.textContent = result.message;
            tipBox.style.color = '#2ecc71';
            form.reset(); // 提交成功后清空表单内容
        } else {
            tipBox.textContent = result.message;
            tipBox.style.color = '#e74c3c';
        }
    } catch (err) {
        tipBox.textContent = 'Network error, please try again.';
        tipBox.style.color = '#e74c3c';
    } finally {
        // 恢复按钮可点击状态
        submitBtn.disabled = false;
    }
});
</script>

<!-- 提示框基础样式 -->
<style>
.form-tip {
    margin: 1rem 0;
    padding: 0.8rem;
    border-radius: 4px;
    text-align: center;
}
</style>

内容的提问来源于stack exchange，提问作者Elle