首页
/ 使用Google脚本从HTML表单发送电子邮件无需服务器: 教程指南

使用Google脚本从HTML表单发送电子邮件无需服务器: 教程指南

2026-01-19 10:14:51作者:柯茵沙

1. 目录结构及介绍

该项目位于GitHub,其目录结构精心设计,以便于快速集成“联系我们”等表单功能至您的网站,而无需后端支持。以下是主要组成部分:

  • index.html: 这是示例HTML页面,包含了基本的接触表单,用户可以通过这个表单输入信息并提交。
  • google-script-just-email.js: JavaScript文件,用于前端逻辑,确保表单提交时调用正确的Google Scripts服务。
  • style.css: 包含基本样式以美化HTML表单。
  • README.md: 项目的主要说明文档,提供了设置过程的概览和重要步骤说明。
  • package.json: (非必需,对于此项目)可能为开发环境配置或依赖管理,但在本上下文中不直接用于前端展示或与Google Script交互。

2. 项目启动文件介绍

主要启动文件:index.html

这是您网站的起点,它不仅展示了用户界面(UI),还绑定了事件监听器到提交按钮上,以便当用户提交表单时触发邮件发送。关键部分包括定义了表单的HTML结构以及通过JavaScript(在google-script-just-email.js中定义)添加的行为,确保数据被正确捕获并发送到预先设定的电子邮件地址。

3. 项目配置文件介绍

关键配置:google-script-just-email.js

虽然不是传统意义上的配置文件,但此JS文件内的代码负责核心逻辑,尤其是其中的TO_ADDRESS变量的设置至关重要。这一变量需要被设置为您希望接收表单数据的邮箱地址。通过取消注释并指定邮箱地址或者利用HTML表单中的data-email属性来动态设置,可以实现邮件收件人的配置。这一步发生在前端,但真正配置发送邮件行为的是Google Script,需手动部署成Web应用,并在Google Scripts编辑器中进行初步配置,包括确定收件人邮箱和其他相关参数。

在Google Scripts方面,您将找到一个Script项目,需通过以下步骤设置版本并发布为Web应用,确保脚本能接收到表单提交并发送邮件。请注意,由于安全性和隐私法规(如GDPR),在处理用户数据时务必小心,并确保遵守相关法律法规。


遵循上述指南,您可以成功地整合一个无需服务器即可发送电子邮件的功能到您的静态网站中,大大简化后端工作,并利用Google的基础设施提高邮件发送的可靠性和便利性。

登录后查看全文
热门项目推荐
相关项目推荐