formsmd-builder

Forms.md 构建器

使用 Forms.md 库构建可用于生产环境的 Typeform 风格表单。

快速入门

1. 创建包含 Forms.md 样板代码的 HTML 文件
2. 使用 DSL（类似 Markdown 的语法）编写表单内容
3. 添加 Typeform 风格的 CSS 主题以提升效果

样板模板

<!DOCTYPE html>
<html lang="en" class="fmd-root" data-fmd-color-scheme="light">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>{{TITLE}}</title>
  <link rel="stylesheet" href="https://unpkg.com/formsmd/dist/css/formsmd.min.css">
  <style>
    /* Typeform-style overrides - see references/typeform-theme.md */
    .fmd-root {
      --fmd-form-question-font-size: 28px;
      --fmd-slide-transition-duration: 400ms;
      --fmd-border-radius: 24px;
      --fmd-spacer: 24px;
      --fmd-main-container-width: 640px;
    }
    .fmd-root .fmd-form-control {
      border: none;
      border-bottom: 2px solid rgba(0,0,0,0.2);
      border-radius: 0;
      background: transparent;
      font-size: 1.25em;
      padding: 12px 0;
    }
    .fmd-root .fmd-form-control:focus {
      border-bottom-color: rgb(var(--fmd-accent-rgb));
      box-shadow: none;
    }
    .fmd-root .fmd-btn {
      padding: 16px 32px;
      font-size: 18px;
      font-weight: 600;
    }
    .fmd-root .fmd-form-check-label {
      padding: 16px 20px;
      border: 2px solid rgba(0,0,0,0.1);
      border-radius: 12px;
      margin-bottom: 12px;
    }
    .fmd-root .fmd-form-check-input:checked + .fmd-form-check-label {
      border-color: rgb(var(--fmd-accent-rgb));
      background: rgba(var(--fmd-accent-rgb), 0.08);
    }
  </style>
</head>
<body class="fmd-body">
  <script src="https://unpkg.com/formsmd/dist/js/formsmd.bundle.min.js"></script>
  <script>
    const template = `
{{FORM_CONTENT}}
`;
    const form = new Formsmd(template, document, {
      isFullPage: true
    });
    form.init();
  </script>
</body>
</html>

表单内容 DSL

设置块（顶部）：

#! title = Survey Title
#! post-url = /api/submit
#! accent = #6366f1
#! rounded = pill
#! button-alignment = center

幻灯片之间用 --- 分隔：

# Welcome!
Ready to get started?

---
-> start -> Let's go!

name* = TextInput(
    | question = What's your name?
    | placeholder = Enter your name
)

---

role* = ChoiceInput(
    | question = What's your role?
    | choices = Developer, Designer, Manager, Other
)

---
-> role == "Other"

roleOther* = TextInput(
    | question = Tell us about your role
)

---

email* = EmailInput(
    | question = Your email?
    | description = We'll send you the results
)

---
-> end

关键语法

元素	语法
必填字段	name*（星号）
幻灯片分隔符	---
逻辑跳转	-> condition
起始幻灯片	-> start
结束幻灯片	-> end
进度	|> 50%

参考资料

• 完整 DSL 语法：参见 references/syntax.md
• Typeform 主题 CSS：参见 references/typeform-theme.md

常见模式

条件幻灯片（根据上一个答案显示）

---
-> previousField == "specific_value"

幻灯片内的条件字段

::: [{$ triggerField $}]
{% if triggerField == "Other" %}
otherField = TextInput(| question = Please specify)
{% endif %}
:::

评分 + 后续问题

rating* = RatingInput(
    | question = How was your experience?
    | outof = 5
)

---
-> rating <= 2

feedback = TextInput(
    | question = What could we improve?
    | multiline
)

输出

生成一个 .html 文件，其中包含：

• Forms.md CSS（CDN 或内联）
• Forms.md JS（CDN 或内联）
• Typeform 风格主题 CSS
• 使用 DSL 编写的表单模板

表单仅在客户端运行——打开 HTML 文件即可使用，也可以部署到任意静态托管服务。

收集表单提交内容

要收集并存储表单回复，请使用 Forms API 设置后端。

完整工作流

1. 创建表单后端 - 调用 Forms API 创建存储
2. 构建 HTML 表单 - 在表单的 post-url 中使用 submitUrl
3. 部署表单 - 将 HTML 文件托管在任意位置
4. 查看结果 - 使用 resultsUrl 查看提交内容

步骤 1：创建表单后端

POST https://api.rebyte.ai/api/forms/create
Content-Type: application/json

{
  "taskId": "current-task-attempt-id",
  "title": "My Survey",
  "fields": ["name", "email", "rating", "feedback"]
}

响应：

{
  "formId": "abc123",
  "taskId": "current-task-attempt-id",
  "submitUrl": "https://api.rebyte.ai/api/forms/submit/TASK_ID/FORM_ID",
  "resultsUrl": "https://api.rebyte.ai/api/forms/results/TASK_ID/FORM_ID"
}

步骤 2：配置表单 HTML

在表单的设置中使用响应里的 submitUrl：

#! post-url = https://api.rebyte.ai/api/forms/submit/TASK_ID/FORM_ID

步骤 3：向用户提供 URL

创建并部署表单后，向用户提供：

• 分发 URL：托管 HTML 表单的位置（供答题者访问）
• 结果 URL：步骤 1 中的 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。