JS & CSS+SMTP联系表单提交故障排查及蜜罐改造需求

一、表单提交故障的原因及修复 #

1. JavaScript语法错误（核心问题） #

你的sendEmail函数存在多处语法错误，直接导致代码无法执行：

• getElementById大小写错误：JS是大小写敏感的，所有document.GetElementById必须改为document.getElementById
• From字段引号嵌套错误：原代码From : "document.GetElementById("email").value, 引号混乱，应改为From: document.getElementById("email").value,
• Body拼接语法错误：字符串拼接时混用逗号和加号，且<br>未用引号包裹，正确写法：

  Body: "Name: " + document.getElementById("name").value + 
        "<br><br> Email: " + document.getElementById("email").value + 
        "<br><br> Phone Number: " + document.getElementById("phone").value + 
        "<br><br> Message: " + document.getElementById("message").value
  

• alert参数未加引号：alert(Message Sent!) 应改为alert("Message Sent!")

2. 表单重置时机错误 #

原onsubmit事件里reset()会立即清空表单，但Email.send()是异步操作，还没完成就重置会导致数据丢失。需把重置逻辑移到发送成功的回调里：

function sendEmail () {
    Email.send({
        Host : "mail.siteediting.cc",
        Username : "smtp-test@siteediting.cc",
        Password : "-1fpzJ8h*+H3",
        Port : "587",
        To : "ijwgohlnoc@use.startmail.com",
        From : document.getElementById("email").value,
        Subject : "S E Contact Form Message",
        Body : "Name: " + document.getElementById("name").value + 
              "<br><br> Email: " + document.getElementById("email").value + 
              "<br><br> Phone Number: " + document.getElementById("phone").value + 
              "<br><br> Message: " + document.getElementById("message").value
    }).then(
        message => {
            alert("Message Sent!");
            document.querySelector("form").reset(); // 发送成功后再重置
        }
    ).catch(
        error => alert("Failed to send: " + error) // 增加错误捕获，方便排查问题
    );
}

同时把表单的onsubmit改为onsubmit="sendEmail(); return false;"

3. SMTP配置验证 #

• 确认mail.siteediting.cc的SMTP服务正常运行，端口587是否开放
• 检查smtp-test@siteediting.cc的账号密码是否正确，是否允许第三方客户端（如SmtpJS）登录
• 部分邮件服务商要求From地址必须与SMTP账号一致，若不一致可能被拦截

二、隐藏蜜罐字段的实现 #

蜜罐字段的核心是让机器人可见填写，人类用户看不到，以此区分人机：

1. CSS隐蔽隐藏蜜罐容器 #

替换.form-radio的display: none;（部分机器人会识别该属性），用更隐蔽的方式：

.form-radio {
    position: absolute;
    left: -9999px;
    top: auto;
    width: 1px;
    height: 1px;
    overflow: hidden;
    /* 保留原有背景、字体等样式，仅修改定位相关 */
}

2. 添加蜜罐验证逻辑 #

在sendEmail函数开头添加判断，若蜜罐字段被选中则终止发送：

function sendEmail () {
    // 蜜罐验证：单选框被选中说明是机器人，拒绝提交
    const honeyPot = document.querySelector('input[name="h-pot"]:checked');
    if (honeyPot) {
        alert("Invalid submission!");
        return;
    }

    // 后续的Email.send逻辑...
}

3. 优化表单HTML（可选） #

给蜜罐单选框添加tabindex="-1"，防止键盘用户误触：

<input type="radio" id="radio-1" name="h-pot" tabindex="-1">
<input type="radio" id="radio-2" name="h-pot" tabindex="-1">

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