文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

不写一行代码,如何实现前端数据发送到邮箱?

2024-12-02 03:35

关注

经常在很多网站上都能看到类似的表单信息功能,用户只需要填写相关内容,点击提交按钮,就可以将表单内容发送到管理员邮箱。

恰好最近在折腾我的网站时,也想添加一个这样的功能,但是搜了一圈后,这样的功能要么是使用Wordpress构建的网站,后台有现成的功能,要么就是使用php或者C#作为后端实现的,而我的网站是基于原生H5写的,没有相关后端与数据库交互,该怎样实现呢?

稍加思考后,就会发现,本质上就是要将点击按钮和发送邮件功能进行绑定,那么有没有什么简单的方法呢?本文就将介绍如何使用Google Apps Script来实现网站发送表单数据到邮箱。

“后端”操作(Google Apps Script)

虽然本文介绍的方法比较简单,无需写一行代码,但是仍需要你进行一些“后端”的操作,来将前后按钮和发送邮件功能进行绑定。

1. 制作存储表格

首先我们需要登陆Google表格并创建一个用于存储邮件信息的电子表格,注意需要设置好你需要的字段:

当然可以直接打开下面的模版来创建一个副本:

https://docs.google.com/spreadsheets/d/1Bn4m6iA_Xch1zzhNvo_6CoQWqOAgwwkOWJKC-phHx2Q/copy

2. 创建脚本

现在,我们进入刚刚创建的表格来启动Apps脚本:

3. 修改目标邮箱

现在我们需要修改刚刚打开的js文件中的参数来指定发送邮箱:

注如果你不修改这行参数的话,只要别人进入你的网站,F12修改相关参数即可将邮件数据发送至他的邮箱!

当然,你也可以在不在这里指定发送邮箱,反之将这个关键词做为表单选项,来在填写时指定!

修改之后,保存即可。

4. 发布 Web 程序

现在,我们需要发布并部署脚本:

需要注意的是,要将权限设置为所有人:

5. 授权脚本发送邮件

现在,我们已经创建了一个能够发送邮件的脚本,下一步需要对它进行授权:

点击后按照提示进行授权:

最后,你会得到一串网站,将它复制保存:

到这里,我们“后端”操作就完成了!虽然步骤有些复杂,但是比 php 或者 C# 等代码实现还是要简单很多。

前端操作

6. 修改 form 标签参数

现在,可以打开我们表单所在的html文件,按照如下提示进行修改:

7. 发送表单数据

现在,任何人都可以填写对应表格内容,并点击发送:

你的 Google 表格中就会增加一条数据:

并且你的邮箱中也会收到一封新增内容的邮件:

至此,我们仅通过 Google 表格与简单的脚本修改就完成的 html 表单数据发送至邮箱!

8. (可选)使用 Ajax

虽然我们的需求已经实现,但是在刚刚点完发送之后,会跳转到一个新的页面:

为了页面不修改,我们需要使用AJAX提交表单,首先需要从下面的链接中下载对应的js文件到项目目录:

https://github.com/dwyl/learn-to-send-email-via-google-script-html-no-server/blob/master/form-submission-handler.js

并将下方代码添加到网页文件中:

<script data-cfasync="false" type="text/javascript" src="form-submission-handler.js"></script>

刷新页面,现在我们可以直接在当前页面提交表单!

9. (可选)添加感谢

如果你想在用户提交表单后发送一段感谢语,可以将下面的内容插入在form标签结束之前:

<div style="display:none" class="thankyou_message">

<h2><em>Thanks</em> for contacting us! We will get back to you soon!
</h2>
</div>

当然你也可以使用CSS、JS来让你的表单更加酷炫,但这不是本文要讨论的主要内容。

好了,至此,你应该学会如何利用 Google 表格来快速的实现前端数据发送到指定邮箱,如果你对本文的内容感兴趣,不妨亲自动手尝试一下!

来源:早起Python内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-后端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯