SaaS · React
Form builder
Product site for a form builder with a responses mock, logic features, steps, pricing and FAQ.

What you get
A warm, editorial product site for an online form builder: a hero showing incoming responses, features, a conditional-logic split, three steps, monthly pricing, quotes and an FAQ. All content lives in src/site.ts.
Files
Exactly what is copied into a new project: 13 files, nothing generated.
Explorer 13
import type { Site } from "./types"; /** Everything this site shows. Edit freely. */export const site: Site = { "brand": "Fieldnote", "nav": [ { "label": "Features", "href": "#features" }, { "label": "Logic", "href": "#logic" }, { "label": "Pricing", "href": "#pricing" }, { "label": "FAQ", "href": "#faq" } ], "navCta": { "label": "Build a form", "href": "#start" }, "sections": [ { "kind": "hero", "variant": "split", "eyebrow": "Forms and surveys", "title": "Forms people finish, and answers you can use.", "text": "Build a form in the editor, share a link or embed it, and watch responses arrive as tidy rows. Conditional logic, file uploads and payments included.", "primary": { "label": "Build your first form", "href": "#start" }, "secondary": { "label": "See the logic editor", "href": "#logic" }, "visual": { "type": "mock", "title": "Workshop sign-up · Responses", "rows": [ { "label": "Maya Chen · Saturday AM · Beginner", "value": "2 min ago", "tone": "#2f5d50" }, { "label": "Tobias Brandt · Sunday PM · Intermediate", "value": "18 min ago", "tone": "#2f5d50" }, { "label": "Sofia Ruiz · Saturday AM · paid $45", "value": "1 h ago", "tone": "#047857" }, { "label": "Partial: stopped at question 4", "value": "Today", "tone": "#b45309" } ], "footer": "86 responses · 74% completion rate · avg. 1 min 52 s" } }, { "kind": "features", "id": "features", "eyebrow": "Features", "title": "Everything a good form needs", "columns": 4, "items": [ { "title": "Twenty field types", "text": "Text, choices, ratings, dates, signatures, file uploads and more.", "icon": "box" }, { "title": "Payments", "text": "Charge a fixed or calculated amount through your own Stripe account.", "icon": "lock" }, { "title": "Integrations", "text": "Send responses to a spreadsheet, a webhook or your email.", "icon": "bolt" }, { "title": "Accessible by default", "text": "Keyboard-friendly, labelled fields and readable contrast in every theme.", "icon": "check" } ] }, { "kind": "split", "id": "logic", "eyebrow": "Conditional logic", "title": "Ask only what matters to each person", "text": "Skip questions, show sections and calculate prices from earlier answers. The editor shows the paths as a simple list of rules.", "bullets": [ "Branch on any answer", "Calculated fields for quotes and scores", "Preview each path before you publish" ], "visual": { "type": "card", "tone": "#1d2a24", "title": "Rule 3 of 5", "lines": [ "If level is Beginner", "Show the equipment section", "Add $10 kit fee to total" ] }, "reverse": true }, { "kind": "steps", "eyebrow": "How it works", "title": "From blank page to first response", "items": [ { "title": "Start from a template or blank", "text": "Registration, feedback, job applications, order forms and more." }, { "title": "Style it to match", "text": "Set your font, colours and logo once and every form follows." }, { "title": "Share and collect", "text": "Send the link, embed it on your site, or print a QR code." } ] }, { "kind": "pricing", "id": "pricing", "eyebrow": "Pricing", "title": "Start free, upgrade for volume", "text": "Monthly plans. Response counts reset on the first of each month.", "plans": [ { "name": "Free", "price": "$0", "period": "/month", "text": "For occasional forms.", "features": [ "100 responses / month", "Unlimited forms", "Basic logic" ], "cta": { "label": "Start free", "href": "#start" } }, { "name": "Plus", "price": "$19", "period": "/month", "text": "For regular collection.", "features": [ "5,000 responses / month", "Payments and calculations", "File uploads up to 1 GB", "Remove Fieldnote branding" ], "featured": true, "cta": { "label": "Try Plus", "href": "#start" } }, { "name": "Business", "price": "$49", "period": "/month", "text": "For teams sharing forms.", "features": [ "25,000 responses / month", "5 editors", "Custom domain", "Response approvals" ], "cta": { "label": "Choose Business", "href": "#start" } } ] }, { "kind": "quotes", "eyebrow": "People using Fieldnote", "title": "Shorter forms, more replies", "items": [ { "quote": "Logic took our intake form from 30 questions to about 12 for most people.", "name": "Dr. Ruth A.", "role": "Clinic administrator" }, { "quote": "Workshop sign-ups and payments in one form. No more chasing transfers.", "name": "Callum B.", "role": "Pottery teacher" }, { "quote": "The responses land in our sheet already clean. That alone sold me.", "name": "Mira J.", "role": "Events coordinator" } ] }, { "kind": "faq", "id": "faq", "eyebrow": "FAQ", "title": "Questions", "items": [ { "q": "Can respondents save and finish later?", "a": "Yes, on Plus and above. They get a link by email to pick up where they left off." }, { "q": "Where are uploaded files stored?", "a": "In your Fieldnote account, downloadable individually or as a zip. You can also forward them to cloud storage." }, { "q": "What happens if I hit my response limit?", "a": "The form keeps accepting responses for 48 hours while we let you know, then pauses until you upgrade or the month resets." } ] }, { "kind": "cta", "id": "start", "title": "Your next form, done before lunch", "text": "Pick a template, change the questions, share the link.", "primary": { "label": "Build a form", "href": "#pricing" }, "secondary": { "label": "Read the FAQ", "href": "#faq" } } ], "footer": { "text": "Online forms and surveys with logic and payments.", "columns": [ { "title": "Product", "links": [ "Templates", "Integrations", "Pricing" ] }, { "title": "Help", "links": [ "Guides", "Accessibility", "Contact" ] } ], "legal": "© Fieldnote. Sample content: replace it in src/site.ts." }};Remix
Remix this template
Describe what to change and the agent starts from Form builder's files. The box is already started for you: finish “Start from Form builder and …”
Dependencies
Documented from the template's package.json. The runtime has a prebuilt dependency set for Vite + React + TypeScript, so installs are fast.
- react^19.1.0
- react-dom^19.1.0
- vite^6.3.0
- @vitejs/plugin-react^4.4.0
- tailwindcss^4.1.0
- @tailwindcss/vite^4.1.0
- typescript^5.8.0
How it runs
- Framework
- Vite + React + TypeScript
- Dev command
- npm run dev
- Build command
- npm run build
- Output directory
- dist
- Port
- 5173
- Entry route
- /
Projects run in an isolated sandbox with a live preview. Read the projects documentation for settings, snapshots and deployment.
Keep browsing
All templates
Error monitoring
Dark developer-focused site for an error tracking tool with a live issues mock, SDK steps and pricing.

Product analytics
Crisp site for a product analytics tool with a funnel mock, retention features, event pricing and FAQ.
- Featured

SaaS starter
Marketing pages, sign-in and sign-up screens, and an authenticated app area with a mocked session you replace with real auth.
Build on Form builder
Create a free account, start from this template, and ask the AI agent to turn it into your app.