如何用HTML和JavaScript实现表单内容提交至邮箱？

表单提交时需将内容发送至指定邮箱，目前已有HTML表单结构及部分JavaScript校验逻辑，但不清楚在现有submit事件处理函数中添加哪些代码才能实现邮件发送功能。

现有代码如下：

HTML代码 #

<div class="form-container" id="form-container">
    <h2>Get a quote</h2>
    <form id="contact" autocomplete="off" action="#">
        <div class="form-field name-field">
            <input type="text" id="name" placeholder="Full Name">
            <div class="error"></div>
        </div>
        <div class="form-field">
            <input type="text" id="email" placeholder="Email Address">
            <div class="error"></div>
        </div>
        <div class="form-field">
            <textarea rows="4" cols="50" id="comment" placeholder="Your Message" form="usrform"></textarea>
            <div class="error text"></div>
        </div>
        <button type="submit" id="submit">Send Message</button>
    </form>
</div>
<div class="form-container2 hide" id="form-container2">
    <img src="assets/success.svg" alt="">
    <h3>Message Sent</h3>
    <p>Thanks for reaching out, our team will get back to you in the next 48 hours</p>
    <button id="back" onclick="refreshPage()">Go Back</button>
</div>

JavaScript代码 #

form.addEventListener("submit", (e) => {
    e.preventDefault();

    field(user, 0, "Name cannot be blank");
    field(msg, 2, "Message cannot be blank");

    if (
        !user.classList.contains("invalid") &&
        !email.classList.contains("invalid") &&
        !msg.classList.contains("invalid")
    ) {
        location.href = form.getAttribute("action");
        container1.classList.add("hide");
        container2.classList.remove("hide");
    }
});

前端无法直接发送邮件，必须依赖后端服务或第三方邮件工具，以下是几种可行实现方式，对应修改你的submit事件处理函数：

方式1：调用后端API（推荐） #

先搭建后端接口（如Node.js、PHP、Python等）接收表单数据并发送邮件，前端通过fetch发送POST请求：

修改后的JS代码：

form.addEventListener("submit", async (e) => {
    e.preventDefault();

    field(user, 0, "Name cannot be blank");
    field(msg, 2, "Message cannot be blank");

    if (
        !user.classList.contains("invalid") &&
        !email.classList.contains("invalid") &&
        !msg.classList.contains("invalid")
    ) {
        // 收集表单数据
        const formData = {
            name: document.getElementById('name').value,
            email: document.getElementById('email').value,
            comment: document.getElementById('comment').value
        };

        try {
            // 调用后端邮件发送接口
            const response = await fetch('/api/send-email', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                },
                body: JSON.stringify(formData),
            });

            if (response.ok) {
                // 发送成功后切换页面
                container1.classList.add("hide");
                container2.classList.remove("hide");
            } else {
                alert('发送失败，请稍后重试');
            }
        } catch (error) {
            console.error('请求出错:', error);
            alert('发送失败，请稍后重试');
        }
    }
});

注意：后端需自行实现邮件发送逻辑，比如Node.js用nodemailer库，PHP用mail()函数或PHPMailer。

方式2：使用第三方邮件服务 #

借助无需自建后端的邮件服务，直接在前端配置调用：

修改后的JS代码（假设已完成服务配置）：

// 先引入对应服务的脚本（需自行从服务平台获取）
// 初始化服务（替换为你的公钥）
emailjs.init('你的服务公钥');

form.addEventListener("submit", async (e) => {
    e.preventDefault();

    field(user, 0, "Name cannot be blank");
    field(msg, 2, "Message cannot be blank");

    if (
        !user.classList.contains("invalid") &&
        !email.classList.contains("invalid") &&
        !msg.classList.contains("invalid")
    ) {
        try {
            // 调用服务发送邮件（替换为你的服务ID、模板ID）
            await emailjs.send('你的服务ID', '你的模板ID', {
                from_name: document.getElementById('name').value,
                from_email: document.getElementById('email').value,
                message: document.getElementById('comment').value
            });
            
            // 发送成功切换页面
            container1.classList.add("hide");
            container2.classList.remove("hide");
        } catch (error) {
            console.error('发送出错:', error);
            alert('发送失败，请稍后重试');
        }
    }
});

注意：需在对应服务平台创建账号、配置邮件服务和模板，获取所需ID和公钥。

方式3：使用mailto协议（仅唤起客户端） #

这种方式会打开用户本地邮箱客户端，需用户手动点击发送，适合简单场景：

修改后的JS代码：

form.addEventListener("submit", (e) => {
    e.preventDefault();

    field(user, 0, "Name cannot be blank");
    field(msg, 2, "Message cannot be blank");

    if (
        !user.classList.contains("invalid") &&
        !email.classList.contains("invalid") &&
        !msg.classList.contains("invalid")
    ) {
        const name = document.getElementById('name').value;
        const email = document.getElementById('email').value;
        const comment = document.getElementById('comment').value;
        
        // 构造mailto链接（替换为你的目标邮箱）
        const mailtoLink = `mailto:your-target-email@example.com?subject=来自${name}的咨询&body=发件人邮箱：${email}%0D%0A留言内容：${comment}`;
        
        // 打开邮箱客户端
        window.location.href = mailtoLink;
        
        // 切换成功页面（可选）
        container1.classList.add("hide");
        container2.classList.remove("hide");
    }
});

注意：无法保证邮件实际发送，用户可能取消操作。

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