使用SMTP JS提交表单后出现HTTP ERROR 405问题求助

DevOps 小满

2026-8-4

问题描述

使用SMTP JS提交表单时，表单验证与邮件发送功能正常，但发送成功后页面出现HTTP ERROR 405且未正常显示成功弹窗，需解决该问题。

原代码示例

HTML

<form class="send-message row-start-1 col-start-1 col-end-4 w-[100%] md:w-[75%]" action="" id="" method="POST""  >
  <div class="mb-4">
    <input
      class="dark:bg-black bg-transparent border border-white w-full px-2 py-2 rounded text-sm text-white md:text-base"
      type="text"
      name="name"
      placeholder="Name"
      id="name"
      
    />
    <span id="nameError" class="text-red-400 text-xs md:text-sm"></span>
  </div>

  <div class="mb-4">
    <input
      class="dark:bg-black bg-transparent border border-white w-full px-2 py-2 rounded text-sm text-white md:text-base"
      type="text"
      name="email"
      id="email"
      placeholder="Email"
      
    />
    <span
      id="emailError"
      class="text-red-400 text-xs md:text-sm"
    ></span>
  </div>

  <div class="mb-4">
    <input
      class="dark:bg-black bg-transparent border border-white w-full px-2 py-2 rounded text-sm text-white md:text-base"
      type="text"
      name="subject"
      id="subject"
      
      placeholder="Subject"
    />
    <span
      id="subjectError"
      class="text-red-400 text-xs md:text-sm"
    ></span>
  </div>

  <div class="mb-4">
    <textarea
      class="dark:bg-black bg-transparent border border-white w-full h-28 px-2 py-2 rounded text-sm text-white md:text-base"
      name="message"
      id="message"
      cols="30"
      rows="10"
      
      placeholder="Message"
    ></textarea>
    <span
      id="messageError"
      class="text-red-400 text-xs md:text-sm"
    ></span>
  </div>

  <!-- send button starts here -->
  <div class="relative">
    <button onclick="return sendMail()"
      class="flex flex-row items-center justify-center gap-2 bg-[#f7f7f7] transition-all duration-300 ease-in-out drop-shadow-xl hover:bg-white hover:drop-shadow-2xl text-nav-color font-bold py-2 px-8 md:px-10 md:py-2 rounded"
    >
      <svg
        class="w-6 h-8"
        xmlns="http://www.w3.org/2000/svg"
        width="16"
        height="16"
        fill="currentColor"
        class="bi bi-send"
        viewBox="0 0 16 16"
      >
        <path
          d="M15.854.146a.5.5 0 0 1 .11.54l-5.819 14.547a.75.75 0 0 1-1.329.124l-3.178-4.995L.643 7.184a.75.75 0 0 1 .124-1.33L15.314.037a.5.5 0 0 1 .54.11ZM6.636 10.07l2.761 4.338L14.13 2.576 6.636 10.07Zm6.787-8.201L1.591 6.602l4.339 2.76 7.494-7.493Z"
        />
      </svg>
      Send
    </button>

        <!-- success message     -->
        <div class="absolute top-0 left-0 hidden bg-green-100 rounded-md p-3  md:w-[50%]" id="success">
          <svg
              class="stroke-2 stroke-current text-green-600 h-8 w-8 mr-2 flex-shrink-0"
              viewBox="0 0 24 24"
              fill="none"
              strokeLinecap="round"
              strokeLinejoin="round"
          >
              <path d="M0 0h24v24H0z" stroke="none" />
              <circle cx="12" cy="12" r="9" />
              <path d="M9 12l2 2 4-4" />
          </svg>
      
          <div class="text-green-700">
              <div class="font-bold text-xl">Message sent successfully.</div>
      
               
          </div>
      </div>
    </div>

</form>

JavaScript

function sendMail() {

    let inputName = document.getElementById("name").value;
    let inputEmail = document.getElementById("email").value;
    let inputSubject = document.getElementById("subject").value;
    let inputMessage = document.getElementById("message").value;


    let validName = validateName(inputName);
    let validEmail = validateEmail(inputEmail);
    let validSubject = validateSubject(inputSubject);
    let validMessage = validateMessage(inputMessage);
    

    if (validName != false && validEmail != false && validSubject != false && validMessage != false) {
        let messageBody = 'Name: ' + inputName + '<br>Email: ' + inputEmail + '<br>Subject: ' + inputSubject + '<br>Message: ' + inputMessage;

        Email.send({
            SecureToken:"XXXXXXXXXXXX",
            To : 'XXXXXXXXX@gmail.com',
            From : "XXXXXXXXXXX@gmail.com",
            Subject :  "New message on contact from " + inputName,
            Body : messageBody,
           
        }).then(
           
                showSuccess()
    
        )
return true;
    
    }

    else{
        
        return false;
    }


}



// showing success message
function showSuccess() {
    let successMessage = document.getElementById("success");
    successMessage.classList.remove("hidden");
    successMessage.classList.add("flex");

}

问题原因

HTTP 405错误是因为表单完成邮件发送后，触发了浏览器默认的POST提交行为：表单设置了method="POST"但action=""，浏览器会向当前页面发起POST请求，而静态页面服务器通常不支持POST方法，因此返回405错误。同时默认提交会导致页面刷新，打断成功弹窗的显示逻辑。

修复方案

1. 修正HTML表单语法错误

form标签存在多余引号，将method="POST""改为method="POST"，并移除空id属性：

<form class="send-message row-start-1 col-start-1 col-end-4 w-[100%] md:w-[75%]" action="" method="POST">

2. 阻止表单默认提交行为

修改sendMail函数，验证通过后返回false，彻底阻止浏览器的默认表单提交：

function sendMail() {
    let inputName = document.getElementById("name").value;
    let inputEmail = document.getElementById("email").value;
    let inputSubject = document.getElementById("subject").value;
    let inputMessage = document.getElementById("message").value;

    let validName = validateName(inputName);
    let validEmail = validateEmail(inputEmail);
    let validSubject = validateSubject(inputSubject);
    let validMessage = validateMessage(inputMessage);

    if (validName != false && validEmail != false && validSubject != false && validMessage != false) {
        let messageBody = 'Name: ' + inputName + '<br>Email: ' + inputEmail + '<br>Subject: ' + inputSubject + '<br>Message: ' + inputMessage;

        Email.send({
            SecureToken:"XXXXXXXXXXXX",
            To : 'XXXXXXXXX@gmail.com',
            From : "XXXXXXXXXXX@gmail.com",
            Subject :  "New message on contact from " + inputName,
            Body : messageBody,
        }).then(
            showSuccess
        )
        // 阻止表单默认提交
        return false;
    } else {
        return false;
    }
}

3. 优化表单交互逻辑（可选）

将按钮的onclick事件替换为表单的onsubmit事件，更符合规范：

移除按钮的onclick="return sendMail()"，添加type="submit"属性
给form标签添加onsubmit="return sendMail()"：

<form class="send-message row-start-1 col-start-1 col-end-4 w-[100%] md:w-[75%]" action="" method="POST" onsubmit="return sendMail()">
    <!-- 表单内容 -->
    <button type="submit" class="flex flex-row items-center justify-center gap-2 bg-[#f7f7f7] transition-all duration-300 ease-in-out drop-shadow-xl hover:bg-white hover:drop-shadow-2xl text-nav-color font-bold py-2 px-8 md:px-10 md:py-2 rounded">
        <!-- 按钮图标和文字 -->
    </button>
</form>

4. 提升用户体验（可选）

给成功弹窗添加自动隐藏逻辑，并清空表单内容：

function showSuccess() {
    let successMessage = document.getElementById("success");
    successMessage.classList.remove("hidden");
    successMessage.classList.add("flex");
    // 3秒后自动隐藏弹窗并清空表单
    setTimeout(() => {
        successMessage.classList.add("hidden");
        successMessage.classList.remove("flex");
        document.getElementById("name").value = "";
        document.getElementById("email").value = "";
        document.getElementById("subject").value = "";
        document.getElementById("message").value = "";
    }, 3000);
}

内容的提问来源于stack exchange，提问作者Tariqul Islam Khan

使用SMTP JS提交表单后出现HTTP ERROR 405问题求助

HTML #

JavaScript #

1. 修正HTML表单语法错误 #

2. 阻止表单默认提交行为 #

3. 优化表单交互逻辑（可选） #