EmailJS:5步使用JavaScript直接从前端发送电子邮件

不需要使用任何后端语言,如 PHP 或 Python。此外,你甚至不需要Node.js!

有很多方法可以读取这些数据。你可以将你的表单与数据库(如MySQL)连接,然后从数据库中读取传入的信息。好吧,这是一个选择,但是我认为这对于你的非技术客户来说可能会很麻烦。

你需要的只是一个简单的 EmailJS 库。

本文将介绍下面两个重要功能:

  • 配置 EmailJS 帐户
  • 使用JS发送电子邮件

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

在我的项目中使用了Webpack,我在 src 文件夹存放源码,dist 存放最终发布版本的代码,使用 npm run dev 可以把项目跑起来。

项目完整代码:https://github.com/dunizb/Cod...,真实可运行。

步骤1,用HTML创建表单

首先需要做的当然是创建一个HTML表单。注意,你不必设置 requiredmax 等验证属性,因为稍后,preventDefault() 函数将在你的提交事件上运行,它将取消这些属性的工作。

表单中最重要的事情是为每个输入设置 name 属性,这在后面会用到的。

我的简单表格如下所示:

src/html/index.html

<form class="form">
  <input name='to' type="text" placeholder="收件人" class="form__input" />
  <input name='name' type="text" placeholder="你的名字" class="form__input" />
  <input name='topic' type="text" placeholder="主题" class="form__input"  />
  <textarea name='message' type="text" placeholder="你的消息" class="form__input"  ></textarea>

  <input type="submit" value="发送" class="form__input form__input--button">
</form>

步骤2,注册emailjs

要配置电子邮件,您必须注册emailjs服务。不用担心,使用此网站非常友好,你不会花很多时间在该网站上。

登录后,将询问你有关电子邮件服务的信息。它放置在个人电子邮件服务区域中,就我而言,我选择了Gmail。

选择邮件服务

点击 Connect account 连接Gmail

连接Gmail

此时会弹出Gmail的授权窗口,在请求权限对话框中点击允许。

连接 Gmail 帐户后,点击“Add Service”按钮。成功添加后可以看到如下界面

例如,如果你连接上你的xyz@gmail.com账户,你未来收到的邮件就会从这个账户发出。所以不要担心让Gmail代你发送电子邮件——这正是你所需要的!

步骤3,创建你的邮件模板

创建你的邮件模板

经过上面的步骤,你已经成功地连接了您的 Gmail帐户,在你的仪表板中应该可以看到,点击左侧的导航进入邮件模板设置页面。

然后单击“Create a new template”按钮创建新模板,界面非常友好,所以创建它不会有任何问题。你可以选择模板的名称和ID,我设置为“my-amazing-template”。

创建新模板

你现在必须指定,传入的电子邮件应该是什么样的。将使用来自于表单中的 name 属性作为变量插入到 {{{ }}} 符号中。

不要忘记在 To email(收件人)部分中放置一个电子邮件地址,这里我们读取我们输入的收件人变量。

插入变量

这是我的简单模板,它使用了4个变量,分别来自于我的HTML表单,我还指定了一个收发邮件的主题。

步骤4,保存你的API密钥

好吧,这部分没有什么特别的。 Emailjs共享授权API密钥,这些密钥将在发送电子邮件期间使用。当然,放置这些密钥的最佳位置是 .env 配置文件。但由于我的工作对象是简单的静态文件,不想做服务器配置的工作,所以我会把它们保存在 apikeys 文件中,以后再导入。

你的 USER_ID 位于Account > API Keys中。

并且你的 TEMPLATE_ID 位于模板标题的下方。

这是我的 src/js/apikeys.js 的示例配置。

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

步骤5,发送邮件!

现在是该项目的最后也是最重要的部分了,现在我们必须使用javascript发送电子邮件。

首先,你必须下载emailjs软件包。

npm i emails-com

之后,转到你的 src/js/main.js 文件并导入你的库和apikey。

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文件。

第三个参数:表单提交中的事件对象e

第四个参数:USER_ID 来自你的apikey文件。

最后,找到表单并添加提交事件侦听器。

// src/js/main.js
const form = document.querySelector('.form')
form.addEventListener('submit',sendEmail)

如前所述,由于使用了 preventDefault() 函数,因此无法进行属性验证,你必须使用JS自己进行验证和清除输入。

仅此而已,最后让我们使用 npm run dev 测试一下,我填写页面上的表单并发送。

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

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

结束

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

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

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

文章配套代码: https://github.com/dunizb/Cod...


原文:https://dev.to/iwaniukooo11,作者:Mateusz Iwaniuk,翻译:公众号《前端全栈开发》

本文首发于公众号《前端全栈开发者》ID:by-zhangbing-dev,第一时间阅读最新文章,会优先两天发表新文章。关注后私信回复:大礼包,送某网精品视频课程网盘资料,准能为你节省不少钱!
subscribe2.png


前端全栈开发者
专栏首发于公众号《前端全栈开发者》,订阅关注第一时间阅读好文

Web/Flutter/独立开发者/铲屎官

11.7k 声望
6.6k 粉丝
0 条评论
推荐阅读
在Flutter中动态地改变应用启动器图标
在本文中,我们将讨论如何在 Flutter 应用程序的运行时动态更改多个应用程序启动器图标。在 pubspec.yaml 文件中添加以下依赖项。flutter_dynamic_icon:[链接]考虑我们已经准备好基本的 UI(包含图像和按钮小部...

杭州程序员张张阅读 724

封面图
从零搭建 Node.js 企业级 Web 服务器(零):静态服务
过去 5 年,我前后在菜鸟网络和蚂蚁金服做开发工作,一方面支撑业务团队开发各类业务系统,另一方面在自己的技术团队做基础技术建设。期间借着 Node.js 的锋芒做了不少 Web 系统,有的至今生气蓬勃、有的早已夭折...

乌柏木148阅读 12.1k评论 10

JavaScript有用的代码片段和trick
平时工作过程中可以用到的实用代码集棉。判断对象否为空 {代码...} 浮点数取整 {代码...} 注意:前三种方法只适用于32个位整数,对于负数的处理上和Math.floor是不同的。 {代码...} 生成6位数字验证码 {代码...} ...

jenemy46阅读 5.9k评论 12

从零搭建 Node.js 企业级 Web 服务器(十五):总结与展望
总结截止到本章 “从零搭建 Node.js 企业级 Web 服务器” 主题共计 16 章内容就更新完毕了,回顾第零章曾写道:搭建一个 Node.js 企业级 Web 服务器并非难事,只是必须做好几个关键事项这几件必须做好的关键事项就...

乌柏木66阅读 6.1k评论 16

再也不学AJAX了!(二)使用AJAX ① XMLHttpRequest
「再也不学 AJAX 了」是一个以 AJAX 为主题的系列文章,希望读者通过阅读本系列文章,能够对 AJAX 技术有更加深入的认识和理解,从此能够再也不用专门学习 AJAX。本篇文章为该系列的第二篇,最近更新于 2023 年 1...

libinfs39阅读 6.3k评论 12

封面图
从零搭建 Node.js 企业级 Web 服务器(一):接口与分层
分层规范从本章起,正式进入企业级 Web 服务器核心内容。通常,一块完整的业务逻辑是由视图层、控制层、服务层、模型层共同定义与实现的,如下图:从上至下,抽象层次逐渐加深。从下至上,业务细节逐渐清晰。视图...

乌柏木43阅读 7.3k评论 6

CSS 绘制一只思否猫
欢迎关注我的公众号:前端侦探练习 CSS 有一个比较有趣的方式,就是发挥想象,绘制各式各样的图案,比如来绘制一只思否猫?思否猫,SegmentFault 思否的吉祥物,是一只独一无二、特立独行、热爱自由的(&gt;^ω^&lt...

XboxYan42阅读 2.9k评论 14

封面图

Web/Flutter/独立开发者/铲屎官

11.7k 声望
6.6k 粉丝
宣传栏