不写一行代码，如何实现前端数据发送到邮箱？("无需编写代码，轻松实现前端数据自动发送至邮箱")

原创

ithorizon 7个月前 (10-20) 阅读数 20 #后端开发

无需编写代码，轻松实现前端数据自动发送至邮箱

在现代的网络应用中，将前端数据自动发送至邮箱是一个常见的功能。然而，并非所有的开发者都愿意或者有时间为这一功能编写纷乱的代码。好消息是，我们可以利用一些现成的工具和服务来实现这一需求，而无需亲自编写一行代码。以下是一些具体的方法和步骤。

一、使用邮件发送服务

邮件发送服务（如SendGrid、Mailgun等）提供了强劲的邮件发送功能，我们可以通过这些服务来实现前端数据的自动发送。

1. SendGrid

SendGrid 是一个流行的邮件发送服务，它提供了一个明了的API来发送邮件。

步骤一：注册SendGrid账号

步骤二：获取API密钥

步骤三：使用SendGrid的Web界面创建邮件模板

步骤四：在前端页面中嵌入JavaScript代码

以下是嵌入JavaScript代码的示例：


<script src="https://smtpjs.com/smtp.min.js"></script>
<script>
    function sendEmail() {
        Email.send({
            Host : "smtp.sendgrid.net",
            Username : "YOUR_SENDGRID_USERNAME",
            Password : "YOUR_SENDGRID_PASSWORD",
            To : 'your_email@example.com',
            From : "your_email@example.com",
            Subject : "Subject",
            Body : "This is the body"
        }).then(
            message => alert("Mail sent successfully")
        );
    }
</script>

2. Mailgun

Mailgun 也提供了类似的邮件发送服务。

步骤一：注册Mailgun账号

步骤二：获取API密钥和域名

步骤三：在前端页面中嵌入JavaScript代码

以下是嵌入JavaScript代码的示例：


<script src="https://smtpjs.com/smtp.min.js"></script>
<script>
    function sendEmail() {
        Email.send({
            Host : "smtp.mailgun.org",
            Username : "YOUR_MAILGUN_USERNAME",
            Password : "YOUR_MAILGUN_PASSWORD",
            To : 'your_email@example.com',
            From : "your_email@example.com",
            Subject : "Subject",
            Body : "This is the body"
        }).then(
            message => alert("Mail sent successfully")
        );
    }
</script>

二、使用第三方表单提交服务

除了邮件发送服务，我们还可以使用第三方表单提交服务来实现前端数据的自动发送至邮箱。

1. Formspree

Formspree 是一个明了易用的表单提交服务，它允许你将表单数据直接发送到你的邮箱。

步骤一：注册Formspree账号

步骤二：创建一个新的表单

步骤三：将表单的action属性设置为Formspree提供的URL

步骤四：在表单中添加必要的字段

以下是HTML表单的示例：


<form action="https://formspree.io/f/your_form_id" method="POST">
    <input type="text" name="name" />
    <input type="email" name="email" />
    <textarea name="message"></textarea>
    <button type="submit">Send</button>
</form>

2. JotForm

JotForm 是另一个流行的在线表单构建器，它提供了多彩的表单模板和自动化功能。

步骤一：注册JotForm账号

步骤二：使用JotForm的拖放界面创建表单

步骤三：配置表单提交后的动作，如发送邮件到指定邮箱

步骤四：将表单嵌入到你的网站中

三、使用服务器端脚本

如果你已经有一个服务器，那么你可以使用服务器端脚本来处理前端数据并发送到邮箱。

1. PHP脚本

PHP 是一种流行的服务器端脚本语言，可以用来处理表单数据并发送邮件。

步骤一：在服务器上创建一个PHP文件

步骤二：编写PHP代码来处理表单数据并发送邮件

以下是PHP脚本的示例：


<?php
if ($_SERVER["REQUEST_METHOD"] == "POST") {
    $name = $_POST['name'];
    $email = $_POST['email'];
    $message = $_POST['message'];
    $headers = "From: " . $email;
    $to = 'your_email@example.com';
    $subject = 'New Contact Form Submission';
    $body = "Name: $name Email: $email Message: $message ";
    if (mail($to, $subject, $body, $headers)) {
        echo "Email sent successfully!";
    } else {
        echo "Failed to send email!";
    }
}
?>

2. Node.js脚本

Node.js 是一个基于Chrome V8引擎的JavaScript运行环境，可以用来编写服务器端脚本。

步骤一：在服务器上安装Node.js和NPM

步骤二：创建一个Node.js文件

步骤三：使用NPM安装nodemailer模块

步骤四：编写Node.js代码来处理表单数据并发送邮件

以下是Node.js脚本的示例：


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', (req, res) => {
    const output = `
        Name: ${req.body.name}
        Email: ${req.body.email}
        Message: ${req.body.message}
    `;
    let transporter = nodemailer.createTransport({
        host: 'smtp.example.com',
        port: 587,
        secure: false,
        auth: {
            user: 'your_email@example.com',
            pass: 'your_password'
        },
        tls: {
            rejectUnauthorized: false
        }
    });
    let info = await transporter.sendMail({
        from: '"John Doe" ',
        to: 'your_email@example.com',
        subject: 'Hello',
        text: 'Hello world?',
        html: output
    });
    console.log('Message sent: %s', info.messageId);
    res.render('contact', {msg: 'Email has been sent'});
});
app.listen(3000, () => console.log('Server started...'));