果你要开拓海外市场，EDM电子邮件营销是整个营销战略中一项必不可少的营销方案。

相比于国内用户喜欢用QQ、微信、钉钉这些即时通讯工具，进行交流和沟通，电子邮件依然是很多海外用户的首选。

虽然电子邮件是个非常古老的交流工具，但是邮件推广依然有非常高的营销价值，使用的好可以为你带来高额的回报。

目前市场上的大多数电子邮件服务提供商都会有一个用于创建电子邮件活动的电子邮件编辑器，但很少有人提供电子邮件营销人员真正需要的东西。

一般的邮件编辑器除了文字就是图片，想要设计一款精美的富有个性化的邮件简直是难于登天，更不用说让用户有打开邮件的欲望。

不过，还好有可视化无需代码的拖放式HTML邮件模板制作工具，帮助邮件营销人员创造精美的邮件。

与那些老古董相比，在线拖放式邮件编辑器有大量设计好的精美的邮件营销模板，通过简单的拖放式编辑器，就可以立即对其进行编辑和定制，定制属于自己的个性化邮件。

Chamaileon

Chamaileon因其用户友好的电子邮件设计编辑器和强大的图像编辑功能，成为很多企业级用户的首选。

Chamaileon提供了一个来自Pexels的免费图片库，你也可以添加自己的电子邮件通讯图片，进行定制和修改。

Chamaileon界面干净整洁，自身包含了一些精美的响应式电子邮件设计模板，用户也可以自定义创作自己的邮件模板。

除了可以对邮件进行定制和使用外，它还具有实时协作的功能，这对于电子邮件营销团队来说非常的友好。

Chamaileon有100多个响应式模板和1000多种内置小工具，可以导入自定义的HTML代码，和丰富的电子邮件内容管理工具，支持苹果和安卓移动设备，可以在所有版本的Outlook上工作。

虽然功能很强大，不过Chamaileon收费比较昂贵，最低价格300美元/月，比较适合大企业和大品牌的公司使用。

Postcards

Postcards是Designmodo推出的在线产品之一，是一个非常容易使用的推广邮件构建工具。

Postcards有一个简单的界面，可以让你从头开始创建完全相应的、精美的、符合当前审美潮流的电子邮件模板。

Postcards有100多个预先设计好的电子邮件模块和900种谷歌字体，可以快速的设计出符合各行业需求的营销邮件模板。

Postcards支持团队协作，团队成员之间可以相互合作管理不同的版本，并将结果导入到流行的电子邮件服务提供商中。

Postcards价格比较实惠，可以免费使用，付费版本最低17美元/月。

http://Beefree.io

BEE是一个免费的电子邮件设计软件，可以让你创建简单的电子邮件模板，然后将其导出到你最喜欢的电子邮件服务提供商中。

你不需要任何编码技巧，就可以在几分钟内创建一个响应式的电子邮件模板，还提供了一种在Gmail中发送HTML邮件的简单方法。

BEE的电子邮件模板库配备了各种专业设计的模板供你定制，你可以在其中添加网络特定元素，如表格、视频和脚本，或者嵌入你自己的调查工具创建有个性化外观的邮件。

通过BEE专业设计好的模板，可以在一个包含HTML和图片的ZIP文件中导出，并在自己的电子邮件营销软件中使用它。

付费的高级专业版本，还可以获得更多复杂的模板，和直接与电子邮件营销软件连接的插件，如MailChimp、SendGrid、HubSpot等等。

价格方面，注册完就可以免费使用，自由职业者需要付费15美元/月，团队版本需要30美元/月。

Stripo

Stripo是一个免费的电子邮件模板生成器，无需HTML或CSS经验就能轻松使用，拥有丰富的模板，可以在几分钟内就可以制作出高级的电子邮件模板。

Stripo具有拖放和HTML编辑模式，可以在编辑器内建立互动的电子邮件元素，如图片翻转效果、CSS动画按钮和倒计时器等功能，还提供了一个嵌入式的照片编辑器，用于建立电子邮件横幅。

该服务是多语言的，所以可以从英语改成他们的其他7种语言选择（德语、西班牙语、法语等）。

Stripo为其用户提供了一个内容模块库，用于存储最常用的电子邮件元素和组件，有超过600多个免费的HTML电子邮件模板，还可以按类型、电子商务、行业或季节进行分类，帮助用户快速找到适合自己的edm邮件模板。

通过API，Stripo的电子邮件模板可以导出到60多个电子邮件服务商，你也可以将模板设计导出为HTML，并使用它从你选择的任何其他电子邮件营销工具发送你的电子邮件活动。

在向收件人发送电子邮件之前，你可以将其下载为PDF格式，以获得客户或同事的认可；有大约100种不同的测试环境，让其在嵌入的电子邮件测试工具中测试电子邮件。

Stripo可以免费使用，付费商业版本最低价格为12.50美元/月。

MailChimp

Mailchimp是世界上最著名的电子邮件营销自动化平台，由Ben Chestnut、Mark Armstrong和Dan Kurzius于2001年创立，从事邮件营销的工作人员大概都听说过或者用过，这是一款非常出名的外贸邮件群发软件。

Mailchimp主要针对中小型企业，是一个强大的一体化外贸邮件营销平台，不仅拖放式电子邮件生成器，还提供了一个由100多个现成设计组成的庞大的电子邮件模板库。

你可以选择一个预先编码的电子邮件模板，或者从头开始创建一个电子邮件模板，虽然它在元素和区块方面不是很灵活，但Mailchimp允许用户创建漂亮的响应式邮件。

它的新模板生成器让你可以直接在内容块上编辑你的元素。此外，它的内容工作区间对编辑和管理你的图片和文件特别有帮助。

作为一个edm邮件营销工具，Mailchimp还为用户提供了一些额外的功能，如自动化，以便及时地开展edm邮件群发活动，还有针对不同电子邮件客户端设计的测试工具。

Mailchimp可以免费使用，付费功能每月15美元起。

Moosend

作为免费的海外邮件群发工具，Moosend使你能够创建、自动化和发送你的电子邮件营销活动。

对于精通技术的用户来说，你可以在编辑电子邮箱模板时，查看并复制HTML代码，或者通过Moosend的代码视图下载一个JSON文件。

Moosend有一个现成的模板库，你可以选择已有的edm营销邮件模板开始设计，或者通过拖放栏目和结构元素从头设计一个视觉上令人惊叹的电子邮件。

如果你需要一个快速的视觉效果，Moosend提供了一个与图片库、社交媒体平台、Google Drive等整合的图片采集器。

Moosend有一个有用的 "保存 "功能，你可以用它来保存你编辑过的电子邮件模板，以供将来使用，还可以添加倒计时功能，个性化你的电子邮件，以及添加条件块来创建动态内容活动。

Moosend可以免费使用，专业版每月10美元起，企业版可以和销售人员自定义价格。

http://Topol.io

http://TOPOL.io被描述为 "为每个设备创建漂亮的电子邮件拖放编辑器”。

Topol使用拖放功能创建电子邮件html模板，用户不必是图形设计师、HTML程序员或电子邮件渲染方面的专家，你可以快速、简单、直观、有趣的创建电子邮件模板。

你可以将Topol编辑器整合到你自己的应用程序、CRM（客户关系管理）或任何其他营销平台，甚至是Outlook上

Topol有150多个精美的、易于使用的模板，可重复使用的自定义块和自定义HTML代码，而且创建的模板可以下载为.zip文件，或导出到任何现有的Topol账户。

Topol可以在14天内免费试用，如果想要使用付费专业版，可以按每月10美元的价格升级到他们的月度会员计划。

Unlayer

Unlayer Studio是一个免费的电子邮件模板制作工具，具有简单、易掌握的特点，有很多现代的、专业的电子邮件模板可供选择。

它有一个免费的图片库和现成的模板，可以创建具有相关内容的电子邮件，用户可以从100多个基础套件模板中选择任何一个，然后按自己认为合适的方式编辑模板。

Unlayer提供了一个模板管理器，你能够用一个独特的ID来创建和编辑你的模板。另外，你也可以在自己的服务器上保存模板，只需切换到JSON标签，然后保存到你的数据库即可。

只需点击几下就可以下载你创建HTML模板，不需要编码技能就可以创建自定义模板，可以按照各种邮件主题轻松找到需要编辑的电子邮件模板。

Unlayer studio的设计师会与ActiveCampaign、Constant contact、MailChimp等电子邮件服务提供商合作，如果你想将其与Gmail整合，该软件还能让你安装免费的Chrome扩展。

http://Mosaico.io

Mosaico是一个开源的电子邮件模板html构建器，可以帮助用户快速有效地创建电子邮件通讯。

Mosaico在其平台上不提供任何预先设计的电子邮件模板，但你能够以你认为合适的方式来使用它，提供两种布局：versafix-1和versafluid。

通过这种独特的基于点击的设计布局，你可以添加或删除区块，非常的灵活，还可以按原样导出自己的图片，并编辑邮件内容。

你可以预览你的邮件，发送测试邮件或简单地保存你的模板，虽然是个免费工具，同样提供相应的社区技术支持。

总结

以上就是一些常用的在线拖放式电子邮件编辑器，可以帮助你更加快速的定制自己的专属电子邮件模板。

这些电子邮件构建器有高质量的响应式电子邮件模板、对各种设备有良好的兼容性、有精美的图片和媒体库，和一些电子邮件服务商也可以完美的兼容。

如果你是一个完全的电子邮件营销新手，而且不懂HTML代码，也不用担心，这些工具可以很好的帮助你完成想要的各种效果，使你的电子邮件营销效果更加完美。

编提醒大家，一定要看到文章最后哦，有惊喜哦

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

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

实际上，你不必使用任何如 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，你可以简单的方式发送电子邮件。

最后附上一些学习资料图哦，不管你学习什么，都离不开高质量的学习路线和学习资料

“大清亡于闭关锁国，学习技术需要交流和资料” 。关于web前端有许多的技术干货，包括但不限于各大厂的最新面试题系列、游戏项目源码、最新前端路线等。需要的伙伴可以私信我，

发送【前端资料】

就可以获取领取地址，免费送给大家。对于学习web前端有任何问题（学习方法，学习效率，如何就业）都可以问我。希望你也能凭自己的努力，成为下一个优秀的程序员！