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 を参照してください。