当前位置: 首页 > 科技观察

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

时间:2023-03-19 23:01:04 科技观察

在很多网站上经常可以看到类似的表单信息功能。用户只需填写相关内容,点击提交按钮,即可将表单内容发送至管理员邮箱。正好最近在折腾自己的网站的时候,也想加入这样一个功能,但是找了一圈,这样的功能要么是用Wordpress搭建的网站,后台有现成的功能,要么是用php或者C#作为后端实现,而我的网站是基于原生H5编写的,没有相关的后端与数据库进行交互,如何实现呢?稍微想一想,你会发现其实质就是绑定点击按钮和发送邮件的功能,那么有什么简单的方法吗?本文将介绍如何使用GoogleAppsScript实现网站向邮箱发送表单数据。“后端”操作(GoogleAppsScript)虽然本文介绍的方法比较简单,不需要写一行代码,但还是需要你进行一些“后端”操作,将前后端绑定具有发送电子邮件功能的按钮。1.制作存储表首先,我们需要登录GoogleSheets,创建一个电子表格,用于存储邮件信息。注意你需要设置你需要的字段:当然你可以直接打开下面的模板创建一个副本:https://docs。google.com/spreadsheets/d/1Bn4m6iA_Xch1zzhNvo_6CoQWqOAgwwkOWJKC-phHx2Q/copy2。创建脚本现在,我们进入新建的表单启动Apps脚本:3.修改目标邮箱现在我们需要修改刚刚打开的js文件中的参数来指定发送邮箱:注意如果不修改这行参数,只要有人进入你的网站,F12就可以修改相关参数,将邮件数据发送到他的邮箱!当然你也可以不在这里指定发件邮箱地址,而是在填写的时候用这个关键字作为表单选项来指定!修改后,保存。4、发布web程序现在,我们需要发布和部署脚本:需要注意的是权限必须设置为所有人:5、授权脚本发送邮件现在,我们已经创建了一个可以发送邮件的脚本,下一步是授权:点击并按照提示授权:最后,你会得到一串网站,复制并保存:到这里,我们的“后台”操作就完成了!虽然步骤有些复杂,但是比起php或者C#等代码实现要简单的多。前端操作6、修改表单标签参数现在可以打开我们表单所在的html文件,根据以下提示修改:每个表单元素的name属性必须和其中的列名相同GoogleSheets表单类必须是gform,即action改为刚才复制的链接7.发送表单数据现在,任何人都可以填写相应的表单内容,点击发送:一份数据将被添加到您的Google表格:和您的邮箱您还将收到一封新内容的电子邮件:到目前为止,我们仅通过GoogleSheets和简单的脚本修改将完成的html表格数据发送到电子邮件!8.(可选)使用Ajax虽然我们的需求已经实现了,但是刚才点击发送后会跳转到一个新的页面:为了不修改页面,我们需要使用AJAX来提交表单。首先,我们需要从下面的链接提交表单下载相应的js文件到项目目录:https://github.com/dwyl/learn-to-send-email-via-google-script-html-no-服务器/blob/master/表单提交处理程序。在网页文件中添加如下代码:刷新页面,即可直接在当前页面提交表单!9.(可选)添加感谢信息如果想在用户提交表单后发送感谢信息,可以在表单标签末尾插入以下内容:

感谢联系我们!我们会尽快回复您!

当然你也可以使用CSS、JS让你的表单更酷,但这不是本文的主要内容。好了,至此,你应该学会了如何使用GoogleSheets将前端数据快速发送到指定邮箱。如果您对本文的内容感兴趣,不妨亲自尝试一下!