提交表单单页发送成功到邮箱

hide

发布于 2025-02-20 12:37:45

10100

代码可运行

文章被收录于专栏：隐身隐身

运行总次数：0

代码可运行

要在单页应用中提交表单并将成功信息发送到邮箱，你可以按照以下步骤进行：

1. 前端部分

首先，确保你的表单有一个提交按钮，并且使用JavaScript来处理表单的提交。

<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>

<div id="successMessage" style="display:none;">Form submitted successfully!</div>

document.getElementById('contactForm').addEventListener('submit', function(event) {
    event.preventDefault();

    const formData = new FormData(this);

    fetch('/submit-form', {
        method: 'POST',
        body: formData
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            document.getElementById('successMessage').style.display = 'block';
        }
    })
    .catch(error => console.error('Error:', error));
});

2. 后端部分

在后端，你需要处理表单提交，并将成功信息发送到邮箱。这里以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('/submit-form', (req, res) => {
    const { name, email, message } = req.body;

    // 配置邮件发送器
    const transporter = nodemailer.createTransport({
        service: 'gmail',
        auth: {
            user: 'your-email@gmail.com',
            pass: 'your-email-password'
        }
    });

    const mailOptions = {
        from: 'your-email@gmail.com',
        to: 'recipient-email@example.com',
        subject: 'New Form Submission',
        text: `Name: ${name}\nEmail: ${email}\nMessage: ${message}`
    };

    transporter.sendMail(mailOptions, (error, info) => {
        if (error) {
            console.error('Error sending email:', 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');
});