用途
formsmd-builder 用于构建生产就绪的、Typeform 风格的多步骤表单和问卷。当用户提出创建表单、构建问卷等需求时使用它,底层依赖 Forms.md 库。
主要能力
- 多步骤(幻灯片式)表单,幻灯片之间使用
---分隔 - 类似 Markdown 的 DSL 语法编写表单内容
- Typeform 风格的 CSS 主题,可对字体大小、过渡时长、圆角、间距、容器宽度、输入框样式、按钮、选项卡片等进行覆盖
- 逻辑跳转:使用
-> condition按条件跳转,如-> role == "Other" - 开始页与结束页:
-> start、-> end - 必填字段:字段名后加星号,如
name* - 进度显示:
|> 50% - 条件字段:在幻灯片内使用
::: [{$ triggerField $}]配合{% if ... %}模板 - 评分与追问:RatingInput 结合条件跳转,如
-> rating <= 2后展示多行反馈 - 设置块:可配置 title、post-url、accent、rounded、button-alignment
- 输出为单个
.html文件,包含 CSS、JS、主题和 DSL 模板
使用方式
使用流程:
- 创建 HTML 文件,加入 Forms.md 样板代码(head 中引入
https://unpkg.com/formsmd/dist/css/formsmd.min.css,body 中引入https://unpkg.com/formsmd/dist/js/formsmd.bundle.min.js,并用new Formsmd(template, document, { isFullPage: true })初始化)。 - 用 DSL 编写表单内容:顶部设置块(
#! title = ...等),幻灯片之间用---分隔。 - 添加 Typeform 风格 CSS 主题进行美化。
表单仅在客户端运行,直接打开 HTML 文件或部署到任意静态托管即可。
收集表单提交
如需收集和存储表单回复,需使用 Forms API 搭建后端:
- 创建表单后端:
POST https://api.rebyte.ai/api/forms/create,请求体包含 taskId、title、fields(字段名数组)。响应返回 formId、taskId、submitUrl、resultsUrl。 - 配置表单 HTML:将 submitUrl 填入表单设置
#! post-url = ...。 - 部署表单并交付 URL:向用户提供分发 URL(HTML 托管地址)和结果 URL(resultsUrl)。
查看结果
- JSON:
GET https://api.rebyte.ai/api/forms/results/TASK_ID/FORM_ID - CSV:
GET https://api.rebyte.ai/api/forms/results/TASK_ID/FORM_ID/csv
更完整的 API 文档参见 relay/docs/data-proxy/forms-api.md。
适用场景
- 需要快速制作多步骤、交互感强的问卷或表单
- 需要条件逻辑(按前序答案显示不同后续问题)的调查
- 需要评分与追问式反馈收集的场景
- 可部署到任意静态托管,适合无后端环境下的表单原型或正式收集
限制
- 表单本身仅在客户端运行,若需存储提交数据必须额外配置 Forms API 后端
- 价格、收费等信息暂未提供
- 官方文档之外的扩展能力暂未提供