提交表单后页面空白且邮件未发送的技术问题排查

我有一个包含Full Name、Email、Phone及文本域的简单HTML表单，其中Full Name与Email为必填字段。点击「Send」按钮后，页面变为空白，且邮件未发送。已编写带表单验证的HTML+JS代码，以及用于发送邮件的PHP文件，请问遗漏了什么？

HTML 和 JavaScript 代码 #

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Contact Form</title>
    <link rel="stylesheet" href="css/sendForm.css">
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
    <div class="form-container">
        <form id="contactForm" action="send_email.php" method="post">
            <div>
                <input type="text" id="fullName" name="fullName" placeholder="Full Name">
            </div>
            <div>
                <input type="email" id="email" name="email" placeholder="Email Address">
            </div>
            <div>
                <input type="tel" id="phone" name="phone" placeholder="Phone">
            </div>
            <div>
                <textarea id="message" name="message" placeholder="Message"></textarea>
            </div>
            <div class="form-footer">
                <span id="formMessage" class="form-message"></span>
                <button type="submit">Send</button>
            </div>
        </form>
    </div>

    <script>
    $(document).ready(function() {
        $('#contactForm').on('submit', function(event) {
            let isValid = true;
            const fullName = $('#fullName').val().trim();
            const email = $('#email').val().trim();
            const formMessage = $('#formMessage');

            // Reset previous error styles and message
            $('#fullName').removeClass('error');
            $('#email').removeClass('error');
            formMessage.text('');

            // Validate Full Name
            if (!fullName) {
                $('#fullName').addClass('error');
                isValid = false;
            }

            // Validate Email
            if (!email) {
                $('#email').addClass('error');
                isValid = false;
            }

            if (!isValid) {
                formMessage.text('Mandatory fields');
                event.preventDefault();
            }
        });
    });
    </script>
</body>
</html>

PHP 代码 #

<?php
// Enable error reporting for debugging
error_reporting(E_ALL);
ini_set('display_errors', 1);

if ($_SERVER["REQUEST_METHOD"] == "POST") {
    $fullName = trim($_POST['fullName']);
    $email = trim($_POST['email']);
    $phone = trim($_POST['phone']);
    $message = trim($_POST['message']);

    $errors = [];

    // Validate Full Name
    if (empty($fullName)) {
        $errors[] = 'Full name is required';
    }

    // Validate Email
    if (empty($email)) {
        $errors[] = 'Email is required';
    } elseif (!filter_var($email, FILTER_VALIDATE_EMAIL)) {
        $errors[] = 'Invalid email format';
    }

    if (!empty($errors)) {
        $errorString = implode(', ', $errors);
        echo "<script>
                window.onload = function() {
                    var formMessage = document.getElementById('formMessage');
                    if (formMessage) {
                        formMessage.textContent = 'Mandatory fields: $errorString';
                        if ('$fullName' === '') {
                            document.getElementById('fullName').classList.add('error');
                        }
                        if ('$email' === '') {
                            document.getElementById('email').classList.add('error');
                        }
                    }
                }
              </script>";
    } else {
        $to = "123@domain.com";
        $subject = "Contact Form Submission";
        $body = "Full Name: $fullName
Email: $email
Phone: $phone
Message: $message";
        $headers = "From: $email";

        if (mail($to, $subject, $body, $headers)) {
            echo "<script>
                    window.onload = function() {
                        var formMessage = document.getElementById('formMessage');
                        if (formMessage) {
                            formMessage.textContent = 'Details sent';
                        }
                    }
                  </script>";
        } else {
            echo "<script>
                    window.onload = function() {
                        var formMessage = document.getElementById('formMessage');
                        if (formMessage) {
                            formMessage.textContent = 'Error sending details';
                        }
                    }
                  </script>";
        }
    }
} else {
    echo "Invalid request method";
}
?>

问题原因与修复方案 #

1. 页面空白的核心原因 #

表单采用同步提交，提交后跳转到send_email.php，但该PHP文件仅输出<script>代码片段，没有包含原页面的完整HTML结构。浏览器无法找到formMessage等DOM元素，最终只渲染空白页面，JS代码也无法执行。

2. 修复核心：改用AJAX异步提交 #

通过AJAX提交表单，页面不会跳转，结果直接在原页面展示：

• 阻止表单默认提交行为
• 用jQuery的$.post发送表单数据
• PHP返回JSON格式的结果，前端根据结果更新页面状态

修改后的JavaScript代码

$(document).ready(function() {
    $('#contactForm').on('submit', function(event) {
        event.preventDefault(); // 阻止默认页面跳转
        let isValid = true;
        const fullName = $('#fullName').val().trim();
        const email = $('#email').val().trim();
        const formMessage = $('#formMessage');

        // 重置错误状态
        $('#fullName').removeClass('error');
        $('#email').removeClass('error');
        formMessage.text('').removeClass('error success');

        // 前端验证
        if (!fullName) {
            $('#fullName').addClass('error');
            isValid = false;
        }
        if (!email || !filterVar(email, FILTER_VALIDATE_EMAIL)) {
            $('#email').addClass('error');
            isValid = false;
        }

        if (!isValid) {
            formMessage.text('请填写必填字段').addClass('error');
            return;
        }

        // AJAX提交表单
        $.post('send_email.php', $(this).serialize(), function(response) {
            if (response.success) {
                formMessage.text('详情已发送').addClass('success');
                $('#contactForm')[0].reset(); // 清空表单
            } else {
                formMessage.text('错误：' + response.message).addClass('error');
                // 标记错误字段
                if (response.errors.fullName) $('#fullName').addClass('error');
                if (response.errors.email) $('#email').addClass('error');
            }
        }, 'json');
    });
});

修改后的PHP代码（返回JSON）

<?php
error_reporting(E_ALL);
ini_set('display_errors', 1);
header('Content-Type: application/json'); // 设置响应为JSON格式

$response = [
    'success' => false,
    'message' => '',
    'errors' => []
];

if ($_SERVER["REQUEST_METHOD"] == "POST") {
    $fullName = trim($_POST['fullName']);
    $email = trim($_POST['email']);
    $phone = trim($_POST['phone']);
    $message = trim($_POST['message']);

    // 后端验证
    if (empty($fullName)) {
        $response['errors']['fullName'] = '姓名为必填项';
    }
    if (empty($email)) {
        $response['errors']['email'] = '邮箱为必填项';
    } elseif (!filter_var($email, FILTER_VALIDATE_EMAIL)) {
        $response['errors']['email'] = '邮箱格式无效';
    }

    if (empty($response['errors'])) {
        $to = "123@domain.com";
        $subject = "Contact Form Submission";
        $body = "Full Name: $fullName\nEmail: $email\nPhone: $phone\nMessage: $message";
        // 改用服务器允许的发件邮箱，避免被拦截
        $headers = "From: noreply@yourdomain.com\r\n";
        $headers .= "Reply-To: $email\r\n";

        if (mail($to, $subject, $body, $headers)) {
            $response['success'] = true;
            $response['message'] = '详情已发送';
        } else {
            $response['message'] = '发送失败，请检查服务器邮件配置';
        }
    } else {
        $response['message'] = '请修正以下错误：' . implode(', ', $response['errors']);
    }
} else {
    $response['message'] = '无效的请求方式';
}

echo json_encode($response);
?>

3. 邮件发送的潜在问题 #

• 服务器邮件配置：mail()函数依赖服务器的Sendmail或SMTP配置，很多虚拟主机默认禁用该函数，建议改用PHPMailer等第三方邮件库，兼容性更强。
• 发件人拦截：直接用用户填写的邮箱作为From头，容易被服务器或邮件服务商当成垃圾邮件拦截，建议使用域名对应的官方邮箱（如noreply@yourdomain.com）作为发件人，仅设置Reply-To为用户邮箱。

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