HTML表单集成EmailJS无法发送邮件问题求助

基础配置校验 #

• 核对EmailJS公钥：确认emailjs.init('你的公钥')中的公钥与EmailJS后台完全一致，注意大小写、字符完整性，别带多余空格。
• 匹配服务ID与模板ID：调用emailjs.send()时传入的服务ID、模板ID，必须和你在EmailJS后台创建的服务、模板ID一一对应，复制时避免漏缺或多抄字符。

前端逻辑排查 #

• 检查事件绑定：确认提交按钮的点击事件/表单submit事件未被其他代码阻断，比如是否正确调用event.preventDefault()且后续发送逻辑正常执行，或者事件绑定是否生效。
• 校验表单数据映射：传入emailjs.send()的数据对象，每个键名必须和EmailJS模板里的变量名完全匹配（比如模板用{{user_email}}，数据里就得是user_email: 对应值），拼写错误直接导致发送失败。
• 完善错误捕获：给emailjs.send()添加catch分支打印错误信息，直接定位问题：

emailjs.send('服务ID', '模板ID', 表单数据)
  .then(res => console.log('发送成功:', res))
  .catch(err => console.log('发送失败详情:', err));

控制台的错误信息会明确告诉你是权限问题、参数错误还是网络问题。

后台设置检查 #

• 确认服务状态：比如用Gmail服务时，是否开启了第三方应用访问权限，发件人邮箱是否配置正确。
• 检查模板状态：EmailJS后台的模板必须是已启用状态，草稿模板无法触发发送。
• 跨域限制：如果是本地用file://协议打开页面，大概率会触发跨域，建议用本地服务器（比如http-server）运行项目，或在EmailJS后台添加允许的域名。

最简可用参考示例 #

如果你的代码存在常见疏漏，可参考以下可运行的基础版本调整：

<form id="contact-form">
  <input type="text" id="user_name" placeholder="姓名">
  <input type="email" id="user_email" placeholder="邮箱">
  <textarea id="message" placeholder="留言"></textarea>
  <button type="button" onclick="sendEmail()">提交</button>
</form>

<script src="https://cdn.jsdelivr.net/npm/@emailjs/browser@3/dist/email.min.js"></script>
<script>
  emailjs.init('你的公钥');

  function sendEmail() {
    const formData = {
      user_name: document.getElementById('user_name').value,
      user_email: document.getElementById('user_email').value,
      message: document.getElementById('message').value
    };

    emailjs.send('你的服务ID', '你的模板ID', formData)
      .then(() => alert('邮件发送成功！'))
      .catch(err => console.error('发送失败:', err));
  }
</script>

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