如何给你的静态页面添加动态的表单？-也许你不需要用Typeform？

在构建 Nextify 官网时,我需要为公司官网添加一个联系方式。由于公司官网通常不会有较大的变化,所以我选择了传统的 HTML + jQuery 的方式。但随之而来的问题就是,全站静态化后无法增加一些动态的功能。

面对这个问题,我有两个选择:

1. 选择像 Typeform 之类的 SaaS 工具;
2. 自建一个 API 网关,比如使用 FastAPI 等框架。

然而,秉承着内容大于形式的原则,我最终选择了使用 Google Forms。本文将详细介绍如何使用 Google Forms 作为后端来接收请求。

步骤

1. 创建 Google Form

创建你需要的字段，这里以 ​Saasfly Waitlist 为例。由于我们只需要一个 email，所以对应的在 Google form 只需要 email 这一个字段。具体如下：

2. 预览表单

打开 preview 之后，你会看到如下页面

3. 获取字段名称

全选、拷贝（CTRL + A , CTRL + C ）到我创建的​小工具 拷贝进去（CTRL +V），就可以看到对应字段的值。示例如下：

4. 修改项目环境变量

打开你fork or clone 的​项目，然后修改如下两个环境变量：

NEXT_PUBLIC_GOOGLE_FORM_URL='https://docs.google.com/forms/d/e/********/formResponse'
NEXT_PUBLIC_GOOGLE_FORM_EMAIL='entry.**********'

注意⚠️：你 preview 的 forms url 应该是如下：https://docs.google.com/forms/d/e/**********/viewform ， 需要将viewform 修改成formResponse。

5.启动开发服务器

bun run dev

6. 开始你的旅程吧!

参考：Custom Google Forms for your static website | PQVST

开源项目：GitHub - saasfly/waitlist: Kickstart your AI startup journey with a waitlist instead of a SaaS template. 大家点点star~谢谢啦