html提交表单代码仅需 5 步用 JavaScript 直接经由过程前端发送电子邮件

译者 | 明明如月，责编 | 夕颜

出品 | CSDN（ID：CSDNnews）

文章配套代码: https://github.com/iwaniukooo11/email-sender

html提交表单代码仅需 5 步用 JavaScript 直接经由过程前端发送电子邮件 Vue.js

现在，纵然是创建最基本的网站，程序员也必须利用当代的功能和技能。
乃至像为你的朋友创建大略的投资组合这样的基本项目也可能涉及到一些问题，比如从联系人表单吸收数据。
有很多方法可以读取这些数据。
你可以将表单与数据库连接起来，然后从数据库中读取传入的来实现功能，但这样做会给不懂技能的客户造成困难。

你为什么不通过发送电子邮件传输信息？

不该用数据库就能吸收到传入的，绝对是最佳选择，也是最方便用户的选择。
但问题来了—如何实现呢？你可能认为须要利用某种后端措辞。

实际上，你不必利用任何如 php 或 python 这种后端措辞，你乃至不须要用到 node.js！
你须要的便是一个大略的EmailJS 库。

本文将先容下面两个主要功能:

配置 emailjs 帐户

利用 JS 发送电子邮件

请把稳，在我的项目中，我利用了 gulp 和 webpack，我在 src 文件夹存放源码，dist 存放终极发布版本的代码。

我将分 5 个步骤向你展示如何从头开始构建电子邮件发送器。

步骤1-用 HTML 创建表单

首先须要创建一个 HTML 表单。
你不必放置像 required 或 max 这种验证属性，由于稍后，preventDefault 函数将在你的提交事宜上运行，它会让这些属性的处理失落效。

表单中最主要的是为每个输入放置 name 属性，后面会用到。

我的非常大略的表单是这样的:

src/html/index.html

<form class=\"大众form\"大众> <input name='name' type=\公众text\公众 placeholder=\"大众Your name...\"大众 class=\"大众form__input\"大众 /> <input name='topic' type=\公众text\"大众 placeholder=\"大众Topic...\"大众 class=\"大众form__input\"大众 /> <textarea name='message' type=\"大众text\"大众 placeholder=\"大众Your Message...\"大众 class=\公众form__input\"大众 ></textarea> <input type=\公众submit\"大众 value=\"大众send\公众 class=\"大众form__input form__input--button\公众> </form>步骤2-注册成为 email 用户

要配置你的电子邮件，你必须注册电子邮件做事。
别担心—利用这个网站非常方便和省时。

登入后，系统会讯问你的电子邮件做事，它位于个人电子邮件做事区（personal email service）。
在我的例子中，我选择了 gmail。

然后，你须要连接你的 gmail 帐户。
这将用来发送电子邮件给你客户。
例如，如果你关联了 xyz@gmail.com 账户，你后续发送的邮件都将从这个邮箱发出。
以是不要担心“ Send email on your behalf” 这个授权信息—这正是你须要的！

连接完 gmail 账户后，点击添加做事（add service）按钮。

步骤3-创建邮件模板

如果你已经成功连接了你的 gmail 账户，你现在该当在信息中央中。
现在须要创建电子邮件模板了。

切换到电子邮件模板卡，并单击创建一个新的模板（create a new template）。
界面非常友好，以是创建模板不会有任何问题。

你可以选择模板的名称和 ID。
我称之为“我的神奇模板（my_amazing_template）”。

接下来，你必须指定邮件的内容。

模板的变量值来自 input 中的 `name` 属性。
你已将变量插入`{{{}}}`符号中。

不要忘却在“收件人”部分 (右侧) 添加电子邮件地址。
你的电子邮件将被发送到该电子邮件地址上。
截图中的收件人邮箱是我自己的公司邮箱。

这是我的大略模板，它利用来自 HTML 表单里的 3 个变量。
我还指定了吸收电子邮件的主题。

步骤4-保存 API 密钥

这部分没什么特殊的。
Emailjs 共享授权 API 密钥，将在发送电子邮件时利用。
当然，放这些钥匙最好的地方是`.env` 配置。
但是由于我利用的是大略的静态文件，我不想利用做事器配置，以是我将它们保存在 apikeys 文件中，然后再将它们导入。

你的 USER_ID 位于 Account > API Keys 菜单下。

TEMPLATE_ID 位于模板的标题下面。

这是我基于不存在的 keyssrc / js / apikeys. js 的示例配置.

src/js/apikeys.js

export default { USER_ID :'user_DPUd-rest-of-my-id', TEMPLATE_ID:'my_amazing_template'}

如果须要将源码发布到 GITHUB，不要忘却将 APIKEYS 文件添加到 .GITIGNORE文件中

步骤5-发送电子邮件

现在是该项目末了也是最主要的部分的了。
现在我们必须利用 javascript 发送电子邮件。

首先，你必须下载 emailjs 包。

npm i emails-com

然后，转到 js 文件，导入库和 apikeys。

src/js/main.js

import emailjs from 'emailjs-com'import apiKeys from './apikeys'

现在是编写发送电子邮件功能的时候了

src/js/main.js

const sendEmail = e => { e.preventDefault emailjs .sendForm('gmail', apiKeys.TEMPLATE_ID, e.target, apiKeys.USER_ID) .then( result => { console.log(result.text) }, error => { console.log(error.text) } )}

sendForm 函数有4个参数:

你的电子邮件的 ID，在这里:

TEMPLATE_ID 来自 apikey 文件,

事宜工具来自你的表单提交

USER_ID 来自 apikey 文件,

末了，查找表单并添加提交事宜监听器：

src/js/main.js

const form = document.querySelector('.form')form.addEventListener('submit',sendEmail)

正如我前面提到的，由于 `preventDefault` 函数，属性验证将无法事情。
你必须利用 JS 自己进行验证和打消输入。

以上便是全部内容，接下来让我们测试一下。

填写页面上的表单并发送。

我收到电子邮件，内容正是根据我们的模板和表单数据渲染出来的。