如何将 Google 表单用作网站联系表单
快速回答:构建一个带有姓名、邮箱、主题和消息字段的 Google 表单,然后点击发送 → 嵌入(<>)获取一段可粘贴到你网站 HTML 中的 iframe 代码。Google 表单在收到新提交时不会自动给你发邮件——请安装一个通知插件,或手动查看回复标签和关联的 Sheet。
你不需要专门的表单构建器订阅,就能在你的网站上放置一个可用的联系表单。Google 表单免费、不需要任何后端代码,并将每条消息都存储在一个你已经知道如何使用的电子表格中。它并不适合每个网站,但对于一个简单的"联系我们"页面来说,它是最快捷的方案之一。以下是正确设置它的方法,包括大多数指南会跳过的部分。
第一步:构建联系表单
在 forms.google.com 上开始一个新表单,添加以下问题。保持列表简短——公开联系表单上每一个额外的必填字段都会明显降低完成提交的访客比例,因此除非你的后续处理流程确实需要,否则应克制住询问电话号码或公司名称的冲动:
- 姓名——简答,必填。
- 邮箱——简答,必填。
- 主题——下拉列表,带有几个预设类别,如"一般问题"、"支持"、"合作"、"其他"。下拉列表能让收到的消息保持可分类,而不是依赖自由文本的主题行。
- 消息——段落,必填。
第二步:验证邮箱字段
点击邮箱问题上的三点菜单,选择回复验证 → 文本 → 邮箱地址。这会在表单甚至能被提交之前,拒绝格式错误的输入——比如在邮箱框中输入了一个姓名。有关其他字段类型更多的验证选项,请参见我们关于Google 表单回复验证的指南。
第三步:将其嵌入你的网站
点击表单编辑器顶部的发送,然后选择 <>(嵌入)图标。Google 表单会生成一段带有固定宽度和高度的 iframe 代码片段——复制它,直接粘贴到你网站 HTML 中你想让表单出现的位置。如果你不习惯直接编辑 HTML,我们关于在网站上嵌入 Google 表单的完整指南也涵盖了页面构建器和 CMS 平台。
关于嵌入版本,有几点需要了解:它会在一个固定大小的框架内渲染,因此在狭窄的移动屏幕上,你可能需要调整 iframe 的宽度/高度属性,或将其包裹在一个响应式容器中。它还带有 Google 自己的样式,不会自动匹配你网站的字体或颜色。
第四步:设置通知(这是人们经常搞错的部分)
一个常见的假设是,有人提交表单时 Google 表单会立即给你发邮件。默认情况下并非如此。开箱即用时,表单只是简单地记录回复——不会有任何东西发送到你的收件箱。你有两个现实的选择:
- 安装一个通知插件。在表单编辑器中,点击拼图形状的插件图标,在 Google Workspace 应用市场中搜索通知工具,如"Form Notifications"。这些插件会监视新的提交,并自动给你(或一个分发列表)发邮件。安装前请查看权限,因为插件会在你的 Google 账户内运行。
- 手动检查。定期打开回复标签,或查看关联的 Google Sheet,它会随着消息到来实时更新。这对低流量网站来说效果不错,但如果你需要快速回复咨询,就不太实用了。
公开联系表单上的隐私与数据收集
嵌入在公开网站上的联系表单,从定义上讲就是在收集个人数据——至少是姓名和邮箱地址,根据你的字段设置,有时会更多。发布前值得做的几件事:
- 在表单附近链接一份隐私政策,说明提交的消息会发生什么、谁能看到它们,尤其是如果来自欧盟或英国的访客可能会使用它。
- 不要收集超过你需要的信息。除非你的工作流程确实需要,否则联系表单不需要电话号码、公司规模或地址——每一个额外的字段都是摩擦,也是需要保护的额外数据。
- 了解回复存放在哪里。提交内容存放在你 Google 账户下关联的 Google Sheet 中,这也意味着任何你分享过该 Sheet 的人,或被添加为表单协作者的人,都能看到每条消息——值得将其限制在真正处理咨询的人员范围内。
关于同意措辞、数据保留,以及 GDPR 对欧盟访客的具体要求,请参见我们的Google 表单与 GDPR 指南。
垃圾信息和机器人的考虑
Google 表单不像某些联系表单插件那样提供专门的验证码开关或可配置的垃圾信息过滤器。它确实受益于 Google 更广泛的基础设施级滥用检测,但那是通用的,不是你可以针对特定表单进行调整的东西。实际情况是,大多数中低流量的联系表单几乎不会遇到垃圾信息,但一个高流量的公开页面可能会随着时间推移吸引一些垃圾提交。如果这成为问题,添加一个简单的"3 + 4 等于多少"简答题并配合回复验证,是一种低成本的威慑手段,它能过滤掉基本的自动化机器人,而无需添加真正的验证码。
让嵌入的表单不那么"Google 风"
开箱即用时,嵌入的表单带有 Google 的默认外观,与品牌网站的其余部分相比会显得明显不同。以下几个调整能让它显得不那么像一次跳转:
- 设置一个主题颜色。点击编辑器中的油漆滚筒图标,选择一个接近你网站强调色的颜色。它会改变 iframe 内部的顶部栏和按钮颜色。
- 选择匹配的字体样式。同一个主题面板提供一小组字体搭配——选择读起来最接近你网站排版的那一个。
- 移除标题/描述的冗余。如果你的联系页面已经有一个类似"联系我们"的标题,可以考虑将表单自己的标题留空或保持简约,这样就不会重复出现同一个标题两次。
- 刻意设置 iframe 的大小。默认的嵌入代码有固定的宽度和高度;将其包裹在响应式容器中(
width: 100%、基于百分比的高度,或带滚动的min-height),这样它在不同屏幕尺寸上就不会显得局促或留下多余的空白。
这些都不能让嵌入版本与原生 HTML 表单无法区分——它仍然渲染在 Google 的 iframe 中,采用 Google 的版式——但它能弥合典型联系页面上大部分的视觉差距。如果你的网站运行在 WordPress 上,请参见我们的Google 表单 WordPress 嵌入指南,了解区块编辑器和插件的具体步骤。
Google 表单 vs. mailto: 链接
mailto: 链接是可能最简单的选项——一个纯粹的超链接,打开访客的邮件客户端并预填好你的地址。它不需要任何设置,但有实际的缺点:它依赖访客在该设备上配置好了邮件客户端(许多移动浏览器和工作电脑没有配置),不提供任何字段验证,也不产生任何有条理的消息记录。Google 表单无论邮件设置如何都能在任何浏览器中工作,能在提交前验证输入,并将每条消息存储为你可以搜索、筛选和归档的电子表格中的一行。对于任何超越纯粹极简个人网站的场景,表单都是更可靠的选择。
| 选项 | 设置工作量 | 无邮件客户端也能工作 | 结构化/可搜索的记录 | 成本 |
|---|---|---|---|---|
| mailto: 链接 | 无 | 不能 | 没有 | 免费 |
| Google 表单嵌入 | 低——构建一次,粘贴一个 iframe | 能 | 有,通过关联的 Sheet | 免费 |
| 专用表单构建器插件 | 中——安装、配置、设计样式 | 能 | 有,通常内置垃圾信息过滤 | 超出免费套餐后通常需付费 |
| 自定义编码表单 + 后端 | 高——需要开发人员 | 能 | 有,完全自定义 | 开发时间/成本 |
离开桌面构建联系表单本身
上述大部分设置——添加字段、开启邮箱验证、选择主题颜色——都是在一个基于浏览器的编辑器中完成的,在手机上使用起来会比较笨拙。如果你在离开笔记本电脑的情况下为客户的网站草拟字段,或者想在交给负责网站嵌入代码的人之前先起草表单结构,FormMaker 可以通过你自己的 Google 账户,用原生触屏编辑器构建同样真实的 Google 表单,这样等你回到办公桌前,表单就已经存在并可以配置和嵌入了。
解决常见的联系表单嵌入问题
- iframe 显示为空白框。确认表单的分享/可见性没有被限制为"特定人员"——公开联系表单需要将访问权限设置为"拥有链接的任何人",网站访客才能加载嵌入内容。
- 嵌入的表单看起来被截断,或内部有滚动条。默认的嵌入高度是一个固定的像素值;增加 iframe 代码中的
height属性,或将其设置得宽裕一些,让多余的空白成为可接受的代价。 - 提交内容没有出现在关联的 Sheet 中。确认真的从回复标签关联了一个 Sheet——在你关联之前,回复只存在于表单界面本身,而不在电子表格中。
- 你没有收到新消息的通知,错过了一次咨询。这是使用表单作为联系表单最常见的抱怨——请安装通知插件,而不是依赖记得手动检查。
常见问题
我可以把 Google 表单用作我网站上的联系表单吗?
可以。构建一个带有姓名、邮箱、主题和消息字段的表单,然后使用 Google 表单内置的嵌入 HTML 将其嵌入,它会被放置在你页面上的一个 iframe 中。
有人提交表单时,Google 表单会自动给我发邮件吗?
不会,默认情况下不会。要接收通知,请从 Google Workspace 应用市场安装一个通知插件,或手动查看回复标签或关联的 Sheet。
Google 表单会拦截垃圾提交吗?
它受益于 Google 通用的基础设施级滥用防护,但没有为表单所有者提供专门的、可配置的垃圾信息过滤器或验证码开关。高流量的公开表单仍可能出现一些垃圾信息。
对于联系表单来说,Google 表单比 mailto: 链接更好吗?
对于大多数网站来说是的。mailto: 链接依赖访客配置好了邮件客户端,且不提供结构化数据,而 Google 表单可以在任何浏览器中工作,能验证字段,并将每次提交整理进一个电子表格。
我可以让嵌入的 Google 表单与我网站的设计匹配吗?
只能部分做到。表单编辑器中的主题颜色和字体会带入嵌入内容中,但你无法完全移除 Google 的版式或 iframe 样式——它不会看起来与用你自己的 CSS 构建的原生 HTML 表单一模一样。