表单

不用后端也能用的表单

给静态网站上的表单加一个属性,每一条提交都会出现在你的仪表盘里。无需 JavaScript,不用嵌入小部件,不用第三方服务,填表的人也不必注册任何东西。

index.html
<form harvis-form="contact">
  <input name="email" type="email" required>
  <textarea name="message"></textarea>
  <button>Send</button>
</form>
how it works

三步,其中一步是重新部署

没有表单生成器要学,也没有接口地址要复制。这个属性就是全部设置。

  1. 01

    加上属性

    在 HTML 里给任意表单写上 harvis-form。如果网站上不止一个表单,就给它起个名字。action 和 method 不用写 —— 页面被送出时会自动补上。

  2. 02

    重新部署

    把文件夹再拖一次,或者运行 npx harvis。无需配置,不用粘贴密钥,也不必先去仪表盘里打开什么开关。

  3. 03

    读收到的内容

    提交会出现在仪表盘里你的网站下面,最新的在最前。点开一行就能读完整内容,也可以把全部导出成 CSV。

the markup

整件事就是两个属性

harvis 会在表单离开服务器时改写它,所以你写的页面依然是你写的那个页面。

你写的
<form harvis-form="contact"
      data-harvis-redirect="/thanks.html">
  <input name="email" type="email" required>
  <button>Send</button>
</form>
访客拿到的
<form harvis-form="contact"
      data-harvis-redirect="/thanks.html"
      action="/__harvis/form/contact" method="post">
  <input type="hidden" name="_harvis_redirect" value="/thanks.html">
  <input type="text" name="_harvis_hp" tabindex="-1" aria-hidden="true" style="…">
  <input name="email" type="email" required>
  <button>Send</button>
</form>

这两个属性

harvis-form
把该表单标记为需要收集。属性值就是它的名字,这样同一个网站上的多个表单不会混在一起;不写值就会收集到“default”名下。
data-harvis-redirect
可选。访客提交后要跳转到的、你网站上的页面。任何指向站外的地址都会被忽略。
included

你会得到什么

下面这些默认全部开启,而且都没有设置页面可调。

  • 无需 JavaScript

    表单就按 HTML 一直以来的方式提交。脚本被拦截时能用,在慢速手机上能用,在只渲染文本的浏览器里也能用。

  • 自动过滤垃圾信息

    每个表单都会附带一个真人看不见的诱饵字段,凡是填了它的提交都会被悄悄丢弃。频率限制则会限定单个访客、以及单个网站每小时能发送多少条。

  • 想要多少表单都行

    给它们起名字 —— 同一个网站上的联系表单和注册表单各有各的列表,可以分别筛选和导出。

  • 你自己的致谢页面

    把表单指向你自己写的页面,提交后访客就会到那里。不设置的话,他们会看到一个朴素的确认页面。

  • 随时导出

    点一下按钮就能拿到 CSV,任何人提交过的每个字段都有一列 —— 所以中途多加了一个问题的表单,打开后仍然是一张完整的表。

  • 不会追踪任何人

    没有追踪脚本,没有 cookie,页面里也没有第三方。访客的地址在存储前会先做哈希,而且只是为了让频率限制能区分两次提交。

limits

各项限制

对联系表单来说很宽裕,又紧到让一个盯上你网站的脚本填不满你的收件箱。

每条提交的字段数
30
单个字段长度
5,000 个字符
单条提交大小
64 KB
每个网站的提交量
每小时 60 条
每位访客的提交量
每小时 20 条
每个网站保留
1,000 条,最新的在前
faq

常见问题

在给静态网站加表单之前,大家通常会问这些。

什么是静态表单?

就是放在没有自己服务器的网站上的表单。通常这意味着表单没地方可以提交,所以静态网站往往要借用第三方表单服务。harvis 本来就在为你网站的每个页面提供服务,因此可以顺手把提交接下来。

我需要会写代码吗?

你只要会在一行 HTML 里加一个词就行。如果网站是 AI 写的,直接让它给表单加上 harvis-form 属性 —— 它知道怎么做,因为 harvis 面向 AI 助手发布的说明里就是这么写的。

关掉 JavaScript 还能用吗?

能。正是为此才这样设计。表单执行的是普通的 HTML 提交,浏览器随后跟随一次跳转 —— 和 JavaScript 出现之前表单的工作方式完全一样。

我能继续用自己的接口或别的表单服务吗?

能 —— 不加这个属性就行。没有 harvis-form 的表单会原样送出,连 action 都不动。而对加了这个属性的表单,harvis 会替换掉 action,因为加上属性正是你在说明提交该送到哪里。

访客可以上传附件吗?

暂时还不行。被收集的表单上的文件输入框对访客仍然可用,但文件不会被保存 —— 只保留文本字段。

如果我删掉网站,提交会怎么样?

会一起没了。提交属于网站而不属于某次部署,所以重新部署会保留它们,删除网站则会彻底移除。想留着的话,先导出一份 CSV。

把网站放到线上试试看

发布是免费的,大约两秒钟。给表单加上属性,重新部署,然后给自己发一条测试消息。

把网站放到线上