在 Hugo 网站上提交 Google 表单
有时你需要向基于 hugo 的网站添加表单提交功能。
目录
不是每个第二个星期五，但仍然… 我们有两种主流方法
表单提交服务的常见选项
-
使用某种网络表单提交服务， 比如 https://getform.io（每月15.83美元的起步计划） 或 https://kwesforms.com（每月19美元）， 或 https://form-data.com（每1000次提交10美元）。 还有一些提供每月免费100次提交的替代方案。 但无论如何，都需要保护自己免受垃圾邮件的困扰。请参见令人烦恼的reCapcha。
-
Google表单。简单又方便。
以下是配置 从Hugo网站提交表单到Google表单的步骤列表。
在Google上设置表单
前往Google表单配置页面： https://docs.google.com/forms/u/0/
创建一个带有以下字段的网络表单：
- 联系电子邮件
- 姓名
- 消息
然后在屏幕右上角有一个垂直三点圆形按钮。
复制嵌入HTML，它应该看起来像这样：
<iframe src="https://docs.google.com/forms/d/e/qwesomenumbersandlettersqwe/viewform?embedded=true"
width="640" height="1142" frameborder="0" marginheight="0" marginwidth="0">加载中…</iframe>
Hugo网站配置
rawhtml
确保你有rawhtml短代码。
在文件layouts/shortcodes/rawhtml.html中：
<!-- raw html -->
{{ .Inner }}
创建联系页面
你可以将此添加到任何页面，但让我们先尝试在联系我们的页面上：
hugo new contact-us.md
在页面末尾添加从Google复制的嵌入HTML：
测试你的Hugo网站联系页面
要在本地测试Hugo网站：
hugo server -D
当Hugo显示标准信息后：
Environment: "development"
Serving pages from disk
Running in Fast Render Mode. For full rebuilds on change: hugo server --disableFastRender
Web Server is available at http://localhost:1313/ (bind address 127.0.0.1)
Press Ctrl+C to stop
前往：http://localhost:1313/contact-us
并查看提交是否正常工作，或者不工作。
还有一个表单设置限制每个提交者只能提交一次。 这需要Google登录。 此设置默认是开启的。
所以你可能想要关闭它。
在Google表单或电子表格中查看提交的表单数据
在你点击提交后，前往Google表单
并查看提交的详细信息。
或在Google电子表格中：
我网站上的联系我页面就是使用这种方法。
