仅需 5 步，用 JavaScript 直接通过前端发送电子邮件

者 | Mateusz Iwaniuk

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

出品 | CSDN（ID：CSDNnews）

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

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

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

不使用数据库就能接收到传入的消息，绝对是最佳选择，也是最方便用户的选择。但问题来了—如何实现呢？你可能认为需要使用某种后端语言。

实际上，你不必使用任何如 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 自己进行验证和清除输入。

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

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

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

通过上图可以看出，所有的变量的值都填充到了正确的位置上。

总结

通过本文的介绍你会发现用 JS 发送邮件并非难事。

使用 emailjs，你可以简单的方式发送电子邮件。

我相信你未来的用户会很高兴收到来自他们网页上表单填写数据的t邮件，相信本文对你有帮助。

这篇文章的配套代码在这里: https://github.com/iwaniukooo11/email-sender

原文链接：

https://dev.to/iwaniukooo11/send-e-mails-directly-from-front-end-with-js-5d7d

本文为CSDN翻译文章，转载请注明出处。

☞我们想研发一个机器学习框架，6 个月后失败了

☞生产型机器学习已经没那么困难了？

☞视频 | 你不知道的"开源"60年秘史

☞GitHub标星10,000+，Apache项目ShardingSphere的开源之路

☞阿里技术专家告诉你，如何画出优秀的架构图？

☞加拿大API平台如何做到30%为中国明星项目？创业老兵这样说……

着智能手机和平板设备的流行，在电脑屏幕上看来正常的电子邮件在手机等移动设备上查阅却凌乱不已。根据一项调查，有91%的用户会在移动设备上查阅邮件。电子邮件通讯设计模板亟待优化。

接下来，你可能会用div或CSS编写HTML代码改良邮件模板，但Outlook或雅虎邮箱却另辟蹊径。

由于HTML5和CSS3在邮件设计方面有所局限，设计响应式邮件模板的最佳方式是使用传统方式打造邮件布局——利用表格、内部插入CSS、inline CSS和媒体查询。

是否所有邮件客户端都支持媒体查询？

虽然大部分邮件客户端都支持媒体查询，但仍有Gmail Android APP在这方面有所局限。不过设计师们仍然可以增加表格和HTML元素的百分率，在不同的视窗上创建流畅的体验布局。

接下来，我们将一步步解析如何应用现有信息，使用表格、inline CSS和内部插入CSS等方式，在媒体查询技术的辅助下，创建响应式邮件模板。

我们需要的有：

Raleway以及Lato谷歌字体

切片图像和icon

HTML和CSS知识

媒体查询相关知识

终端输出

现代化的扁平设计

从何入手

开始之前，我们需要在标题栏内放入内容。首先，我们要增加一个XHTML文档，紧接着加上html标签，创建类型为xmlns。剩下的是元信息和标题标签。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>KATAUSTRIA - Email Template</title>

</head>

Markup

至于markup，我们需要利用表格重新开始，在表格中增加属性。

<tr>

</td>

</tr>

<tr>

</td>

</tr>

<tr>

</td>

</tr>

<tr>

</td>

</tr>

<tr>

</td>

</tr>

<tr>

</td>

</tr>

<tr>

</td>

</tr>

<tr>

</td>

</tr>

</table>

</body>

</html>

横幅和3Box Showcase区

设计这两个部分时，我们稍后在CSS中会将每个部分用col-600 class包裹。我们将在设计中增加一个带有logo和文字的横幅。至于3Box Showcase，我们将用到col3，将宽度设为183。需要注意，在高度这里我们使用的是<td>标签预留空间。

<tr>

<tr>

<tr>

</tr>

<tr>

</td>

</tr>

<tr>

<td align="center" style="font-family: 'Raleway', sans-serif; font-size:37px; color:#ffffff; line-height:24px; font-weight: bold; letter-spacing: 7px;">EMAIL <span style="font-family: 'Raleway', sans-serif; font-size:37px; color:#ffffff; line-height:39px; font-weight: 300; letter-spacing: 7px;">TEMPLATE</span>

</td>

</tr>

<tr>

<td align="center" style="font-family: 'Lato', sans-serif; font-size:15px; color:#ffffff; line-height:24px; font-weight: 300;">A creative email template for your email campaigns, promotions <br/>and products across different email platforms.

</td>

</tr>

<tr>

</tr>

</table>

</td>

</tr>

</table>

</td>

</tr>

吸睛标题和实际服务部分

设计这两个部分时，我们仍然使用class col-600，不过对于每个部分的内部元素，我们将采用完全不同的class。对于标题部分的第一个icon元素，我们要用到col1和col3_one设计文字。我们稍后会在媒体查询中调整字体大小。

在实际服务部分，我们会使用col2设计每一栏。在这里需要注意，我使用了一个inline CSS为我们的设计元素增加某些格调。

<tr>

<tr>

<tr>

</tr>

<tr>

<tr>

</td>

</tr>

</table>

<tr>

</tr>

<tr>

</tr>

<tr>

<td style="font-family: 'Lato', sans-serif; font-size:14px; color:#7f8c8d; line-height:24px; font-weight: 300;">We create responsive websites with modern designs and features for small businesses and organizations that are professionally developed and SEO optimized.

</td>

</tr>

</table>

</td>

</tr>

</table>

</td>

</tr>

</table>

</td>

</tr>

CSS

现在，所有需要用到的部分都设计好了，接下来我们需要在标题栏部分增加一些模式。首先为markup增加整体风格。插图谷歌网页字体，其余部分将包含我们为邮件主题、html、表格等等设计的模式。

关于网页字体的小提示：根据Campaign Monitor，邮件客户端对网页字体的支持有限，这以为着不是所有客户端都支持网页字体。

@import "http://fonts.googleapis.com/css?family=Lato:300,400,700,900|Raleway:400,300,500,600,700,800,900' rel='stylesheet' type='text/css";

html,body {

background-color:#fff;

margin:0;

padding:0

}

html {

width:100%

}

body {

margin:0;

padding:0;

-webkit-text-size-adjust:none;

-ms-text-size-adjust:none

}

table {

border-spacing:0;

border-collapse:collapse

}

table td {

border-collapse:collapse

}

table tr {

border-collapse:collapse

}

img {

display:block!important

}

br,strong br,b br,em br,i br {

line-height:100%

}

a {

text-decoration:none

}

.button a {

font-size:14px;

font-family:'Lato',sans-serif;

color:#fff;

font-weight:300;

background:transparent

}

接下来，让我们为特别的邮件客户群增加独特风格。这能让每一种不同的群体都有不同的风格。

/* OUTLOOK CLASS*/

.ExternalClass {

background-color:#fff;

width:100%

}

.ExternalClass,.ExternalClass font,.ExternalClass td,.ExternalClass p,.ExternalClass span,.ExternalClass div {

line-height:100%

}

.ReadMsgBody {

width:100%;

background-color:#fff

}

/* YAHOO MAIL CLASS */

.yshortcuts,.yshortcuts a,.yshortcuts a:link,.yshortcuts a:visited,.yshortcuts a:hover,.yshortcuts a span {

border-bottom:none!important

}

/* MAILCHIMP CLASS */

.default-edit-image {

height:20px

}

媒体查询

到了媒体查询设计的步骤，我们需要在640px视窗中使用百分率增加并调整每个部分和元素的尺寸。

@media only screen and (max-width: 640px) {

body {

width:auto!important

}

table[class="col1"] {

width:29%;

}

table[class="col2"] {

width:47%;

text-align:left

}

table[class="col3_one"] {

width:64%;

text-align:left;

}

table[class="col3"] {

width:100%;

text-align:center;

}

table[class="col-600"] {

width:450px

}

table[class="insider"] {

width:90%

}

img[class="images_style"] {

width:60%;

height:auto

}

.margin{

margin-left: 25px;

margin-right: 25px;

}

在最后的CSS环节，我们将开始为480px视窗增加媒体查询。我们设计的大部分独立元素和部分将被设置为100%。

@media only screen and (max-width: 480px) {

body {

width:auto!important

}

table[class="col1"] {

width:100%;

}

table[class="col2"] {

width:100%;

text-align:left

}

table[class="col3"] {

width:100%;

text-align:center

}

table[class="col3_one"] {

width:80%;

text-align:center;

margin: 0 20px 0 0;

}

table[class="col-600"] {

width:290px

}

table[class="insider"] {

width:82%!important

}

img[class="images-style"] {

width:60%

}

.button { width: 40%; display: block; }

a.read-more { text-align: center; display: block;}

}

总结

通过以上步骤，各位就能成功设计响应式邮件模板了。不难看出，我们所有的整体风格都使用了inlineCSS。(来源：视觉中国)

切图网（qietu.com）提供优质的psd转邮件模板制作，并且开发了一款免费、开源的邮件模板css框架——快邮，可以快速搭建一个响应式邮件。

前端开发的程序员应该都知道Webix这个免费框架，本文会给出用其创建一个电子邮件客户端用户界面的步骤。Webix是一个JavaScript UI库，可用其构建一些HTML5程序，熟悉它的程序员都知道，Webix快速、轻便且易于学习，与AngularJS、Vue.js和jQuery的集成都很方便，所以我最终选择了Webix。（阅读本文大概需要5分钟，图片较多，建议在有Wifi的情况下阅读。）

Webix的工作原理

先来看看如何开始使用Webix（如果用过，请自动忽略这一部分），下载完成后，程序员应该在页面上添加所需的JavaScript和CSS文件，这些都可以在代码库文件夹中找到：

在应用程序中不需要使用webix.ready，但它有助于确保在页面完全加载后执行代码（作为theonDocumentReady事件和onlload（）的替代方法）。

要在页面上添加小部件，程序员可以使用view属性，它的值定义将决定使用哪个小部件。在这个过程中，还可以使用其他属性定义窗口小部件的外观和工作原理。例如，创建一个图表：

要在页面上添加多个小部件，就必须创建一个布局（这将在下文中详述）。

创建电子邮件客户端

进入正题，先来看一下电子邮件客户端的外观：

因为Webix是一个完全可以与任何后端集成的客户端框架，所以程序员只需要集中在用户界面上就可以了。

步骤1：创建布局

在向应用程序中添加组件之前必须先定义其布局。TheLayout组件允许将页面分成行和列，程序员可以创建嵌套行和列，设置其相对或绝对大小或者为用户提供手动更改创建单元格大小的可能性。

布局组件最好的一点是，创建的页面布局是一堆DIV容器，以便程序员可以在Webix小部件旁边使用任何第三方组件。

让我们来看看一切如何运作。如果要创建由三行组成的应用程序，可以使用以下代码：

要创建三列布局，可以使用几乎相同的代码，把行换成列就可以了：

看起来很容易吗？我们来看一个更复杂的例子：嵌套单元格：

结果如下：

使用嵌套行和列的不同组合，程序员可以创建项目需要的复杂布局。使用Resizer可以使单元格边框可拖动，用户将能够手动调整其大小。

完成布局创建之后，程序员将使用模板组件为每个单元格添加标签，包括一些要放置的组件，该模板允许呈现纯文本或单个数据记录。

以下是代码：

目前，我们已经使用height和width属性来定义所需的大小了。涉及的新属性是type，它定义了布局边框。

如果使用clean将获得无边框的单元格，使用wide将获得有边框的、有更大空间的单元格。

我们来检查结果：

好，接下来的任务是用实际组件替换模板。

步骤2：添加工具栏

我们从工具栏组件开始，它可以包含各种元素，如按钮或下拉菜单。

记住，要使用Webix创建组件，必须使用view:“component_name”代码行，元素属性允许选择工具栏的内容。

接下来是添加标签，以便用户了解正在处理什么：

现在必须将此代码添加到应用程序中，以替换以前创建的模板。

之前：

之后：

我们来检查结果：

步骤3：添加文件夹树

程序员可使用Tree widget进行此任务，data属性定义了文件夹树的结构。以下是代码：

每个树节点都有唯一的ID和一个将显示在屏幕上的值。“Contact Groups”节点具有两个子节点。

open:true属性将打开此分支。除了描述的属性，注意这个代码行：select：true。它允许选择树项目。现在，您可以用代码 "Tree"替换模板。

我们来检查结果：

步骤4：添加日历

现在，您可以在时间选择器中添加一个日历到应用程序。这个方便的互动小部件提供了必要的时间和日期，当你想填写一个表单或创建一个新的事件。该小部件用于创建GanttPRO应用程序，允许用户使用在线甘特图：

这不是一件艰巨的任务：

在您使用代码"Calendar" 替换模板之后，您将得到以下结果：

步骤5：使用DataTable组件显示电子邮件列表

目前，应用程序中已经有了一些相当简单的组件，因此可以继续处理更复杂的内容。

程序员可使用DataTable组件来显示电子邮件列表。它是一个高级的数据组件，支持许多功能，如过滤，排序，分页等。它支持不同的格式，如XML，JSON和CSV。至于其如何在真实的Web应用程序中运行的示例，请查看XL报告：

对于此示例，你需要使用JSON对象作为数据源：

如您所见，电子邮件列表将包含名称，电子邮件地址，主题和日期等信息。

请注意，你还使用了文件夹属性，其值确定存储特定电子邮件的文件夹。在您的实例folder：1表示邮件存储在收件箱文件夹中。The folder：2表示Webix在“发送”文件夹中存储一个电子邮件。

现在可以创建一个新的DataTable组件：

scrollX：false代码行禁用水平滚动条。columns属性定义表将具有哪些列。第一列仅包含复选框。header:{ content:"masterCheckbox" }定义具有主复选框的标题，可用于选择所有可用的电子邮件。使用“{common.checkbox（）}”，您可以在此列的每个单元格中添加一个复选框。

其他列只显示数据源中的信息，id属性的值定义在列（名称，主题和日期）中显示哪些数据。标题属性将一个文本添加到标题。注意填充空间：fillspace:true。您已经使用它来强制列扩展以填充未使用的空间。

现在，用上面的代码替换模板：“Email list”，你会得到这样的东西：

步骤6：使用数据绑定

现在你必须编写一些可以帮助Tree和DataTable协同工作的代码。

记住，您在DataTable创建过程中使用的数据数组包含来自两个不同文件夹的邮件：Inbox和Sent。您的任务是使DataTable组件根据所选文件夹显示正确的电子邮件。要做到这一点，可以使用称为数据绑定的机制。

使用bind（）函数实现数据绑定。应该从从属组件调用，并将主组件作为参数。由于您希望DataTable根据所选节点树更改其内容，因此第一个组件将是从属组件，第二个组件将作为主节点。

除了绑定数据，你必须告诉你的应用程序，应该在应用程序加载之后选择树的第一个节点。要实现该目标，您应该将相应的代码放在ready方法中，如下所示：

现在，电子邮件列表的内容将根据所选文件夹进行更改：

步骤7：添加按钮

这不是一件艰巨的任务，因为您已经学习了创建组件所需的属性。您必须创建三个按钮：Reply, Create和Delete。

这是您应该使用的代码：

用实际的代码替换模板后，你会得到这样的：

用户可能难以找到其他按钮。为了简化此任务，您可以给按钮添加图标。

Webix使用Font Awesome集合中的图标。这些图标是根据麻省理工学院许可证获得许可的，有很多选择。

要将常规按钮转换成带有图标的按钮，您必须添加两个属性：

Type将定义您将使用哪种按钮
Icon允许从收藏中选择正确的按钮

例如，如果要向“create”按钮添加信封图标，可以使用以下属性组合：

使用相同的方法，您可以向所有按钮添加图标：

步骤8：显示电子邮件内容

由于电子邮件的正文由HTML代码呈现，您可以使用模板组件进行显示。替换模板：“消息”代码如下：

如果没有选择的电子邮件，用户将看到以下消息：No message selected。您可以使用其id属性的值来操作此组件。例如，您有一个包含消息的变量：

要在屏幕上显示此消息，可以使用以下代码：

步骤9.使用Windows

最后一步是提供创建新消息的可能，您已经拥有“create”按钮，但它什么都不做。我们来改变一下：

接下来，用户点击此按钮后，Webix将显示一个窗口，该窗口的ID为“my_win”。此窗口将包含用于发送新电子邮件的表单，在显示之前，您必须先删除之前插入的数据。这就是为什么使用clear（）方法。

现在，您将定义此窗口的外观。对于这个任务，你必须使用一个新的webix.ui（）构造函数：

移动属性允许移动窗口，使用head属性，可以定义窗口的标题。The position：“center”代码行告诉Webix，新窗口应该出现在页面的中心。body部分可能包含任何视图。

步骤10：将窗体添加到窗口

Form widget可以以最小的努力创建Web窗体。

我们来看下面的例子：

无边界属性允许隐藏窗体的边框。表单中最重要的是elements属性，它定义了一组垂直排列的控件和控件组。

在您的情况下，表单将包含两个文本字段，一个文本区域和两个按钮：发送和关闭。请注意，关闭按钮使用hide（）方法关闭窗口。发送按钮不执行任何操作，因为您的示例没有后端。在使用click属性的实际应用程序中，可以添加发送消息的代码。

将创建表单的代码添加到窗口代码后，可以测试结果。单击创建按钮，屏幕上将出现一个新窗口：

Wrapping up

使用Webix，程序员可以尽可能少地为Web应用程序创建用户界面。使用Layout组件，您可以快速构建复杂的布局。易用性允许程序员尝试创建不同变体的模型，以确定哪些组件将保证更好的用户体验。

前端开发程序员需要做的就是在页面上添加可用的数据组件，定义要使用的数据组件，并为其设置数据源。之后，程序员可以继续进行配置过程，直到达到理想的结果。

在线咨询

上一篇：HTML教程：什么是HTML？
下一篇：Express 的使用

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商

仅需 5 步，用 JavaScript 直接通过前端发送电子邮件

步骤5-发送电子邮件

总结

Webix的工作原理

创建电子邮件客户端

您的项目需求