HTML项目中EmailJS无法发送邮件？求订阅邮件功能实现方案

我之前在React项目中使用EmailJS发送邮件完全正常，但在纯HTML/CSS/JavaScript项目中实现订阅功能（收集用户邮箱并发送邮件）时，功能无法正常运行。我已经按照EmailJS官方文档完成配置，以下是相关代码，希望能得到协助解决。

原HTML代码 #

<div class="main-content container">
    <div class="banner-content">
        <h1>Great sofware is built with amazing developers</h1>
        <p>We help build and manage a team of world-class developers to bring your vision to life</p>
        <div class="input-subscribe">
            <input type="email" id="email" placeholder="Subscribe newsletter" onclick="sendMail()">
            <button class="btn-subscribe btn-item">
                Subscribe
            </button>
        </div>
        <div class="logo-sponsor">
            <p>Sponsored by:</p>
            <img src="images/paypal.png" alt="paypal-logo">
            <img src="images/google.png" alt="google-logo">
            <img src="images/dropbox.png" alt="dropbox-logo">
        </div>
    </div>
</div>

原JS代码 #

<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/@emailjs/browser@3/dist/email.min.js"></script>
<script type="text/javascript">
    (function () {
        emailjs.init('HXOYlFkZOUDFI1oCe');
    })();
</script>
<script type="text/javascript">
    window.onload = function () {
        document.getElementById('input-subscribe').addEventListener('submit', function (event) {
            event.preventDefault();
            this.contact_number.value = Math.random() * 100000 | 0;
            emailjs.sendForm('contact_service', 'contact_form', this)
                .then(function () {
                    console.log('SUCCESS!');
                }, function (error) {
                    console.log('FAILED...', error);
                });
        });
    }

    function sendMail() {
        var params = {
            name: document.getElementById("name").value,
            email: document.getElementById("email").value,
            message: document.getElementById("message").value,
        };

        const serviceID = "service_qfcqnmh";
        const templateID = "template_jeyyx8j";

        emailjs.send(serviceID, templateID, params)
            .then(res => {
                document.getElementById("name").value = "";
                document.getElementById("email").value = "";
                document.getElementById("message").value = "";
                console.log(res);
                alert("Your message sent successfully!!")

            })
            .catch(err => console.log(err));

    }
</script>

问题分析 #

1. 事件绑定逻辑错误：原代码给输入框绑定了onclick事件，用户点击输入框就会触发发送逻辑，不符合“点击订阅按钮提交”的需求；同时input-subscribe是div元素，没有submit事件，导致window.onload里的监听代码完全无效。
2. DOM元素不存在：sendMail函数中尝试获取name和message元素，但HTML里根本没有这两个元素，会导致参数值为undefined，触发EmailJS发送失败。
3. 参数与模板不匹配：订阅功能只需要收集邮箱，但代码里传递了多余的name和message参数，如果EmailJS模板里没有对应变量，也会导致发送异常。

修正后的代码 #

HTML部分 #

<div class="main-content container">
    <div class="banner-content">
        <h1>Great sofware is built with amazing developers</h1>
        <p>We help build and manage a team of world-class developers to bring your vision to life</p>
        <!-- 将div改为form，支持submit事件 -->
        <form class="input-subscribe" id="subscribe-form">
            <input type="email" id="email" placeholder="Subscribe newsletter" required>
            <button type="submit" class="btn-subscribe btn-item">
                Subscribe
            </button>
        </form>
        <div class="logo-sponsor">
            <p>Sponsored by:</p>
            <img src="images/paypal.png" alt="paypal-logo">
            <img src="images/google.png" alt="google-logo">
            <img src="images/dropbox.png" alt="dropbox-logo">
        </div>
    </div>
</div>

JS部分 #

<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/@emailjs/browser@3/dist/email.min.js"></script>
<script type="text/javascript">
    // 简化初始化逻辑
    emailjs.init('HXOYlFkZOUDFI1oCe');
</script>
<script type="text/javascript">
    // 监听表单submit事件，点击按钮或回车都能触发
    document.getElementById('subscribe-form').addEventListener('submit', function(event) {
        event.preventDefault();
        
        const email = document.getElementById('email').value;
        // 简单校验邮箱非空
        if (!email) {
            alert("请输入有效的邮箱地址");
            return;
        }

        const serviceID = "service_qfcqnmh";
        const templateID = "template_jeyyx8j";

        // 仅传递订阅需要的邮箱参数，与EmailJS模板变量对应
        const params = {
            email: email
        };

        emailjs.send(serviceID, templateID, params)
            .then(res => {
                document.getElementById('email').value = "";
                console.log(res);
                alert("订阅成功！");
            })
            .catch(err => {
                console.error("发送失败：", err);
                alert("订阅失败，请稍后重试");
            });
    });
</script>

额外检查点 #

• 确认EmailJS后台的公钥（初始化用的HXOYlFkZOUDFI1oCe）、服务ID、模板ID完全正确。
• 检查EmailJS模板中的变量名，确保和代码中params的键名一致（比如模板里用{{email}}接收邮箱）。
• 测试时打开浏览器控制台，查看是否有报错信息，方便快速定位问题。

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