formsmd-builder

📁 rebyteai-template/rebyte-skills 📅 8 days ago

总安装量

周安装量

#54986

全站排名

安装命令

npx skills add https://github.com/rebyteai-template/rebyte-skills --skill formsmd-builder

Agent 安装分布

opencode 3

gemini-cli 3

claude-code 3

github-copilot 3

codex 3

kimi-cli 3

Skill 文档

Forms.md Builder

Build production-ready, Typeform-style forms using the Forms.md library.

Quick Start

Create an HTML file with Forms.md boilerplate
Write form content in the DSL (Markdown-like syntax)
Add Typeform-style CSS theme for polish

Boilerplate Template

<!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>

Form Content DSL

Settings block (top):

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

Slides separated by ---:

# 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

Key Syntax

Element	Syntax
Required field	`name*` (asterisk)
Slide separator	`---`
Logic jump	`-> condition`
Start slide	`-> start`
End slide	`-> end`
Progress	`\|> 50%`

References

Full DSL syntax: See references/syntax.md
Typeform theme CSS: See references/typeform-theme.md

Common Patterns

Conditional slide (show based on previous answer)

---
-> previousField == "specific_value"

Conditional field within slide

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

Rating + Follow-up

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

---
-> rating <= 2

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

Output

Generate a single .html file containing:

Forms.md CSS (CDN or inline)
Forms.md JS (CDN or inline)
Typeform-style theme CSS
Form template in the DSL

The form works client-side only – just open the HTML file or deploy to any static host.

Collecting Form Submissions

To collect and store form responses, set up the backend using the Forms API.

Complete Workflow

Create form backend – Call the Forms API to create storage
Build the HTML form – Use the submitUrl in the form’s post-url
Deploy the form – Host the HTML file anywhere
View results – Use the resultsUrl to see submissions

Step 1: Create Form Backend

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"]
}

Response:

{
  "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"
}

Step 2: Configure Form HTML

Use the submitUrl from the response in the form’s settings:

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

Step 3: Provide URLs to User

After creating and deploying the form, give the user:

Distribution URL: Where the HTML form is hosted (for respondents)
Results URL: The resultsUrl from Step 1 (for viewing submissions)

Viewing Results

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

For full API documentation, see relay/docs/data-proxy/forms-api.md.

GitHub 仓库 ↗ ← 返回陌讯 Skills 聚合平台