Forms
Create public forms that automatically create tasks from submissions.
Use Cases
- Customer Requests - Collect feature requests
- Bug Reports - Allow users to report issues
- Intake Forms - New project requests
- Surveys - Collect feedback
Creating a Form
Via UI
- Open a board
- Click Forms in the header
- Click + Create Form
- Add form fields
- Map fields to columns
- Save and share the public URL
Form Schema
interface Form {
id: string
boardId: string
name: string
description?: string
fields: FormField[]
submissions: FormSubmission[]
publicUrl: string
createdAt: string
}Form Fields
| Field Type | Input | Maps To |
|---|---|---|
text | Single line text | Text column |
textarea | Multi-line text | Text column |
email | Email input | Email column |
date | Date picker | Date column |
number | Numeric input | Number column |
dropdown | Select options | Dropdown/Status column |
Field Configuration
interface FormField {
id: string
type: "text" | "email" | "dropdown" | "date" | "number" | "textarea"
label: string
required: boolean
options?: string[] // For dropdown
mapToColumn?: string // Column ID to map values
}Column Mapping
Map form fields to board columns:
// Form field
{
label: "Priority Level",
type: "dropdown",
options: ["Low", "Medium", "High"],
mapToColumn: "priority-column-id"
}When submitted, the value automatically populates the mapped column.
Submissions
Submission Flow
Submission Schema
interface FormSubmission {
id: string
formId: string
data: Record<string, string> // field_id -> value
createdAt: string
taskId?: string // Created task ID
}Public URL
Each form has a unique public URL:
https://yourapp.com/forms/[form-id]Share this URL to collect submissions without authentication.
Store Usage
import { useAppStore } from '@/lib/store'
// Form actions
const addForm = useAppStore((s) => s.addForm)
const updateForm = useAppStore((s) => s.updateForm)
const deleteForm = useAppStore((s) => s.deleteForm)
const submitForm = useAppStore((s) => s.submitForm)
// Create form
addForm({
boardId: 'board-id',
name: 'Bug Report Form',
description: 'Report issues with our product',
fields: [
{ id: 'f1', type: 'text', label: 'Title', required: true },
{ id: 'f2', type: 'textarea', label: 'Description', required: true },
{ id: 'f3', type: 'dropdown', label: 'Severity', options: ['Low', 'Medium', 'High'] }
]
})
// Submit form (creates task)
submitForm(formId, {
f1: 'Login button broken',
f2: 'Cannot click the login button on mobile',
f3: 'High'
})Example: Bug Report Form
{
name: "Bug Report",
description: "Report a bug in our application",
fields: [
{
id: "title",
type: "text",
label: "Bug Title",
required: true,
mapToColumn: "name-column"
},
{
id: "description",
type: "textarea",
label: "Describe the bug",
required: true,
mapToColumn: "description-column"
},
{
id: "severity",
type: "dropdown",
label: "Severity",
options: ["Low", "Medium", "High", "Critical"],
mapToColumn: "priority-column"
},
{
id: "email",
type: "email",
label: "Your email",
required: true,
mapToColumn: "reporter-email-column"
}
]
}