SuperAPI AI 工具集

formsmd-builder

前端与建站

查看项目

更新于 10-16 02:12

技能介绍

用途

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 模板

使用方式

使用流程:

  1. 创建 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 }) 初始化)。
  2. 用 DSL 编写表单内容:顶部设置块(#! title = ... 等),幻灯片之间用 --- 分隔。
  3. 添加 Typeform 风格 CSS 主题进行美化。

表单仅在客户端运行,直接打开 HTML 文件或部署到任意静态托管即可。

收集表单提交

如需收集和存储表单回复,需使用 Forms API 搭建后端:

  1. 创建表单后端:POST https://api.rebyte.ai/api/forms/create,请求体包含 taskId、title、fields(字段名数组)。响应返回 formId、taskId、submitUrl、resultsUrl。
  2. 配置表单 HTML:将 submitUrl 填入表单设置 #! post-url = ...。
  3. 部署表单并交付 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 后端
  • 价格、收费等信息暂未提供
  • 官方文档之外的扩展能力暂未提供