桌面端Safari可用但其他浏览器/设备失效的联系表单问题

问题根源 #

弹窗提交仅在Mac Safari正常，Chrome/Opera/iPhone失效，但页面跳转模式全平台正常，说明后端邮件发送逻辑无问题，问题出在前端AJAX响应处理的跨浏览器兼容性，以及PHP未统一响应格式导致部分浏览器无法正确识别结果。

修复步骤 #

1. 统一PHP响应格式（关键）

当前PHP仅在成功时输出文本，错误时无输出，导致前端AJAX收到空响应后无法处理，引发提交失败。修改为JSON格式响应，确保所有浏览器都能正确解析：

<?php
header('Content-Type: application/json'); // 设置标准JSON响应类型
$response = ['success' => false, 'message' => ''];

$myemail = 'my.email@gmail.com';
if(empty($_POST['name'])  || 
   empty($_POST['email']) || 
   empty($_POST['message']))
{
    $response['message'] = 'Error: all fields are required';
    echo json_encode($response);
    exit;
}

$name = $_POST['name']; 
$email_address = $_POST['email']; 
$message = $_POST['message']; 

if (!preg_match(
"/^[_a-z0-9-]+(\.[_a-z0-9-]+)*@[a-z0-9-]+(\.[a-z0-9-]+)*(\.[a-z]{2,3})$/i", 
$email_address))
{
    $response['message'] = 'Error: Invalid email address';
    echo json_encode($response);
    exit;
}

// 修复邮件headers换行符（符合RFC标准，避免解析异常）
$to = $myemail; 
$email_subject = "CONTACT VIA WHATAPRETTYFACE $name";
$email_body = "Name: $name \nEmail: $email_address \nMessage \n$message"; 

$headers = "From: $myemail\r\n"; 
$headers .= "Reply-To: $email_address\r\n";
$headers .= "Content-Type: text/plain; charset=utf-8\r\n"; // 明确字符集

if(mail($to,$email_subject,$email_body,$headers)){
    $response['success'] = true;
    $response['message'] = 'Message sent successfully!';
} else {
    $response['message'] = 'Failed to send message, please try again later.';
}

echo json_encode($response);
exit;

2. 手动实现跨浏览器AJAX提交逻辑

移除可能存在兼容问题的ajax-form自动处理逻辑，用原生JS实现AJAX提交，确保强制阻止表单默认行为：

<form method="POST" id="contact-form" data-message-class="colors-d background-95 heading border" action="contact.php">
    <!-- 原表单内容保持不变 -->
</form>

<script>
document.getElementById('contact-form').addEventListener('submit', function(e) {
    e.preventDefault(); // 强制阻止默认页面跳转

    const form = this;
    const formData = new FormData(form);
    const submitBtn = form.querySelector('input[type="submit"]');
    const originalBtnText = submitBtn.value;

    // 禁用按钮防止重复提交
    submitBtn.disabled = true;
    submitBtn.value = 'Sending...';

    fetch(form.action, {
        method: form.method,
        body: formData
    })
    .then(response => response.json())
    .then(data => {
        // 生成弹窗提示元素（复用你指定的样式类）
        const messageEl = document.createElement('div');
        messageEl.className = form.dataset.messageClass;
        messageEl.textContent = data.message;
        
        // 将提示插入到表单上方
        form.parentNode.insertBefore(messageEl, form);
        
        // 成功提交后重置表单
        if(data.success) {
            form.reset();
        }
        
        // 3秒后自动移除提示
        setTimeout(() => messageEl.remove(), 3000);
    })
    .catch(error => {
        alert('An error occurred, please try again.');
    })
    .finally(() => {
        // 恢复按钮状态
        submitBtn.disabled = false;
        submitBtn.value = originalBtnText;
    });
});
</script>

3. 简化前端验证（可选）

如果gen_validatorv31.js仅用于前端字段验证，可直接移除该脚本——你已经使用了HTML5原生的required属性和email类型，足够处理基础的前端验证需求，减少额外兼容性风险。

验证要点 #

• 测试Chrome/Opera/iPhone设备，确认弹窗提示正常显示
• 检查Gmail收件箱是否收到提交的邮件
• 测试空字段、无效邮箱场景下的错误提示是否正常触发

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