如何将 Google 表单嵌入你的网站

2026 年 7 月更新 · 阅读时间 9 分钟

将访客引导到站外去填写表单,会在这个过程中流失一部分人。将 Google 表单直接嵌入你的页面能让人们留在原有场景中——这对联系表单、活动报名、反馈小组件,或任何你希望它看起来像是网站一部分而非跳转的内容都很有用。Google 免费内置了嵌入代码;以下是如何用好它。

获取内置的嵌入代码

1. 打开你的表单,点击右上角的发送。
2. 在对话框中,点击 < > 图标(嵌入 HTML)。
3. Google 会生成一段类似这样的 iframe 代码:

<iframe src="https://docs.google.com/forms/d/e/FORM_ID/viewform?embedded=true" width="640" height="921" frameborder="0" marginheight="0" marginwidth="0">Loading…</iframe>

4. 点击复制,然后将该代码粘贴到你网站上任何接受原始 HTML 的地方。

调整宽度和高度

Google 生成的默认尺寸是一个合理的估计值,但很少完全准确。直接在代码中编辑这两个数值:

• 宽度——将其设置为匹配你页面的内容列宽。常见的做法是使用 width="100%",并配合外层容器上的最大宽度限制,这样表单就能随页面缩放,而不是保持固定的像素尺寸。
• 高度——这是最容易出问题的一项。Google 表单不会随着你增加或删除问题而自动调整 iframe 大小,因此如果表单比高度值更长,底部就会被裁切,访客不得不在一个很小的框内滚动才能找到提交按钮。如果拿不准,把高度设置得明显比你以为需要的更高一些——一个短表单下方多出 200 到 300 像素的空白,远比一个长表单的提交按钮被截断问题要小得多。

在 WordPress 上嵌入

添加一个自定义 HTML区块(在区块编辑器中),或使用 HTML 模式下的文本小工具(经典编辑器),然后直接粘贴 iframe 代码。WordPress 会原样渲染它——无需插件,那些用于“导入” Google 表单的表单插件对于这种简单嵌入并无必要。

在 Squarespace 上嵌入

在页面上添加一个代码区块(编辑页面时从区块菜单中选择),粘贴 iframe HTML,然后保存。Squarespace 的代码区块可以毫无限制地接受这类原始嵌入内容,但请检查区块的宽度设置是否与页面网格匹配,以免表单超出其所在列。

在 Wix 上嵌入

Wix 需要使用“添加”面板中的嵌入 > 嵌入小工具(或“HTML iframe”)元素,然后将代码粘贴到随后打开的设置面板中。与 WordPress 和 Squarespace 不同,Wix 会将嵌入的 HTML 渲染在自己的 iframe 包装层中,因此除了编辑代码的高度值,你可能还需要在画布上手动调整该元素的尺寸。

在纯 HTML 页面中嵌入

如果你在手写页面代码,只需将 iframe 代码片段直接粘贴到你想让表单出现的 body 部分——无需特殊处理。建议将其包裹在一个带有最大宽度限制的容器 div 中,这样表单就不会在宽屏上从一端拉伸到另一端。

常见问题

1. 表单底部被截断了。这几乎总是高度设置的问题——请参阅上面的调整说明。增大高度值,直到整个表单——包括提交按钮和可能出现的任何“必填”错误提示——都能完整显示,而不需要内部滚动条。
2. 嵌入的表单在手机上看起来不响应。固定像素宽度不会为小屏幕缩小。在 iframe 中设置 width="100%",并让父元素上的 CSS 最大宽度控制上限,这样它就能在手机上自然缩小。
3. 表单加载为空白,或显示“拒绝连接”错误。这通常意味着嵌入该表单的页面是通过阻止第三方 iframe 的网络或 CMS 代理提供的。如果你直接管理网站的内容安全策略设置,请检查一下,因为严格的 frame-src 规则可能会悄无声息地阻止 Google 的域名。
4. 表单一直闪烁“Loading…”而无法完成加载。确认表单的共享设置允许任何拥有链接的人查看它——如果它被限制为仅特定人员或你的组织可见,那么公开页面上的嵌入 iframe 对外部访客而言,会像直接链接一样加载失败。
5. 样式与页面其他部分不一致。Google 表单在 iframe 内部渲染自己的字体和颜色,不会继承你网站的 CSS——从 iframe 外部没有受支持的方法可以重新设计表单的内部外观,只能调整它周围的容器。

嵌入与页面加载性能

嵌入的 Google 表单会独立于页面其余部分加载自己的 iframe 内容,这会增加一次额外的网络请求,并在表单本身出现之前带来一点延迟——通常不足以让人察觉,但如果你在审查页面速度,这一点值得了解。如果表单位于首屏以下,可以考虑对 iframe 进行延迟加载(在 iframe 标签上添加 loading="lazy"),这样它就不会与访客立即看到的内容争夺带宽。这是所有现代浏览器都支持的原生 HTML 属性,不需要额外的脚本。

无障碍方面的考虑

由于表单内容存在于 Google 自己的 iframe 中,它的无障碍性——屏幕阅读器标签、键盘导航、焦点顺序——是由 Google 表单本身决定的,而不是你在页面上能控制的东西。你能从自己这边改进的一点是,为 iframe 标签添加一个描述性的 title 属性(例如 title="活动报名表单"),屏幕阅读器会在进入嵌入内容之前朗读它。关于 Google 表单本身的无障碍程度,请参阅我们的Google 表单无障碍指南。

嵌入与直接链接的比较

嵌入能让访客留在你的页面上,与你网站周围的设计保持一致,并能减少将人重定向到陌生域名时出现的流失。对于放在专用页面上的短表单——比如联系表单或简单的反馈小组件——嵌入是更好的选择。

直接链接设置更简单(无需调整高度),能让表单获得完整、不受限制的布局,并避免长表单或多分节表单在局促的 iframe 内造成的“框内滚动”感。如果你的表单较长、包含文件上传,或使用了表格类问题,直接链接到它——参阅我们的分享 Google 表单指南——对填写者来说通常是更舒适的体验。

作为联系表单嵌入

将 Google 表单变成商业或作品集网站上的免费联系表单,是嵌入功能特别受欢迎的一种用法——无需后端,无需搭建邮件服务器,回复会直接进入你随时可以查看的 Google 表格。如果这正是你的目标,我们专门的将 Google 表单用作网站联系表单指南涵盖了字段选择,以及在基础嵌入之上值得添加的减少垃圾信息的设置。

常见问题

相关指南

• 如何分享 Google 表单
• 将 Google 表单用作联系表单
• 如何制作 Google 表单
• 在 WordPress 中嵌入 Google 表单,深入解析
• Google 表单无障碍指南