跳到主要内容
FormFlow

把长表单变成分步,而不改动提交端点

分步只把长表单拆成多屏显示,端点一动不动:仍然是同一个 POST 携带全部字段,分隔线跟着它下面那个字段走,必要时表单会退回一页显示。

本文由机器翻译。 阅读英文原文

A dark FormFlow plate showing a multi-step Form folding into one flat Form and one POST.

长表单是一页问题,而一页正是人们离开的地方。分步把它拆成几屏。分步不会做的事,是改动端点:表单仍然只提交一次,带上全部字段,发往你的标记里早就写好的那个地址。

分步是显示层的决定

一步(Step)是表单字段的一个具名分组,一次只向填写者显示一屏。把一个表单拆成几步,接收、配额、垃圾评分和保留都不会改变:判定器收到的请求体与之前一模一样,而一次提交仍然只是一次计费提交。

这就是全部约定,所以增加一步改的是显示,不是你的对接。HTML 里的地址、标记里的字段名、以及你套餐上的提交数量,都原地不动。分步在付费套餐中可用。

分隔属于它下面那个字段

在构建器里,分步分隔是“开启下一步”的那个字段上的一个标记——等同于在该字段上方画一条线。它跟着字段走,所以拖动字段,分隔也跟着移动。分步分隔不是丢在两个问题之间的分隔条;它是某一个字段的属性,从上往下读字段列表,就是在读步骤顺序。

由此有两个后果。重新排列字段就是重新排列步骤,你原先喜欢的一步可能被上面那一步吸收掉。空步骤会自动合上:FormFlow 不会保留一屏什么都没有的界面。

一个 POST 携带全部字段

表单一次只画一步,但浏览器仍然只发一个请求。填写者答过的全部内容一起到达,以表单结构中的字段名为键。端点参考在 /docs/api:一个 POST、一个请求体、一个回应。

curl -X POST https://formflow.digital/api/v1/f/ff_live_example \
  -H 'Content-Type: application/json' \
  -d '{
    "name": "Lena Ortiz",
    "email": "lena@example.com",
    "company": "Ortiz Studio",
    "budget": "5000",
    "brief": "A one-page site, live in June."
  }'

五个字段、三步、一个请求。没有跨屏需要对齐的部分提交,没有要重试的第二个请求,也没有每一步的回执。请求失败,这次尝试就失败了;请求成功,FormFlow 就持有一次提交,并且只判定一次。

表单何时平铺显示

表单会把全部字段平铺在一页、配一个提交按钮,出现在三种情况:它没有声明任何步骤、团队的套餐不再允许分步、或填写者的浏览器不运行 JavaScript。平铺不是事后补上的降级方案;它是分步在外面加的那层外壳。

关掉脚本的访客会拿到同样的字段、同样的字段名和同一个提交按钮——只是平铺在一页。表单没有坏,它只是一页而已。因套餐变化失去分步也不是一次迁移:表单在结构里保留着自己的步骤,在额度缺失时平铺显示,额度回来时又重新分步。

分步的钝处

分步也不会把结构藏起来。你声明的一切都在约定之内,不管某一屏是否显示它;浏览器认为哪些字段可见,从来不是决定什么会被接受的东西。如果某个字段必须“不存在”而不只是“看不见”,就不要声明它。

v1.0.0 的变更记录条目 写下了这一切所依据的那句话:把任何 HTML 表单指向 FormFlow,或使用托管页、嵌入代码,它就会接收、过滤、存储并转发每一次提交。分步重排的是这句话的中段。它不会把这句加长。