如何在成功发送邮件后重置我的联系人表单？

在成功发送邮件后重置联系人表单通常涉及前端和后端的协同工作。以下是一个基本的实现思路和示例代码：

基础概念

前端表单重置：使用JavaScript或前端框架（如React、Vue）来清空表单字段。
后端邮件发送：后端服务处理邮件发送逻辑，并返回成功或失败的状态给前端。

实现步骤

前端部分：
- 创建一个表单并绑定提交事件。
- 在提交成功回调中重置表单。

后端部分：
- 接收前端发送的表单数据。
- 处理邮件发送逻辑。
- 返回成功响应给前端。

示例代码

前端（使用HTML + JavaScript）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Contact Form</title>
</head>
<body>
    <form id="contactForm">
        <input type="text" id="name" name="name" placeholder="Your Name" required>
        <input type="email" id="email" name="email" placeholder="Your Email" required>
        <textarea id="message" name="message" placeholder="Your Message" required></textarea>
        <button type="submit">Submit</button>
    </form>

    <script>
        document.getElementById('contactForm').addEventListener('submit', function(event) {
            event.preventDefault(); // Prevent default form submission

            const formData = new FormData(this);

            fetch('/send-email', {
                method: 'POST',
                body: formData
            })
            .then(response => response.json())
            .then(data => {
                if (data.success) {
                    // Reset the form
                    this.reset();
                    alert('Email sent successfully!');
                } else {
                    alert('Failed to send email. Please try again.');
                }
            })
            .catch(error => {
                console.error('Error:', error);
                alert('There was an error sending the email.');
            });
        });
    </script>
</body>
</html>

后端（使用Node.js + Express）

const express = require('express');
const bodyParser = require('body-parser');
const nodemailer = require('nodemailer');

const app = express();
app.use(bodyParser.urlencoded({ extended: true }));

app.post('/send-email', (req, res) => {
    const { name, email, message } = req.body;

    // Create a transporter object using your email service credentials
    const transporter = nodemailer.createTransport({
        service: 'gmail',
        auth: {
            user: 'your-email@gmail.com',
            pass: 'your-email-password'
        }
    });

    const mailOptions = {
        from: email,
        to: 'recipient@example.com',
        subject: `New Message from ${name}`,
        text: message
    };

    transporter.sendMail(mailOptions, (error, info) => {
        if (error) {
            console.log(error);
            res.json({ success: false });
        } else {
            console.log('Email sent: ' + info.response);
            res.json({ success: true });
        }
    });
});

app.listen(3000, () => {
    console.log('Server is running on port 3000');
});