Skip to content
codexa

SaaS · React

Form builder

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

Form builder starter, as built from its own files
Starter screenshot captured from this template's own build at 1440×900. It shows the template as it ships, not output generated from a prompt.

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.

Raw data: GET /api/v1/templates/saas-form-builder

src/site.ts
src/site.ts
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 …”

Agent ready

Creates a free account first; your idea is carried over.

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.

All templates
  • Error monitoring

    Dark developer-focused site for an error tracking tool with a live issues mock, SDK steps and pricing.

    React · 13 files · Beginner

  • Product analytics

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

    React · 13 files · Beginner

  • 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.

    React · 18 files · Intermediate

Build on Form builder

Create a free account, start from this template, and ask the AI agent to turn it into your app.