How to Add a Dynamic Form Builder to Your App (Copy-Paste Prompts Included)

Yes. The key architectural shift is storing the form definition as JSONB owned by the user who created it, with a separate renderer that reads that JSON at runtime. Each user gets rows in the `forms` table scoped to their user_id, and the renderer is a stateless component that accepts any valid schema. This is exactly the pattern described in this guide — the builder UI writes to Supabase, the public form URL reads from it.

Store conditions as a JSON array on each field: `[{ field_id, operator, value }]`. On the renderer side, call react-hook-form's watch() to get live form values and evaluate each field's conditions with a pure JS function inside useMemo. The field renders or returns null based on the evaluation result. The critical detail: the evaluator must be memoized and take the raw watch() output as its dependency — any derived state between the evaluator and the dependency array triggers infinite re-render loops.

Yes, a database. The submission collector (a Supabase Edge Function) validates answers server-side and writes them to the `form_submissions` table as a JSONB answers object. Supabase's free tier handles thousands of submissions per month. The alternative — email-only submission without a database — works only if you never need to query, filter, or export submission data, which most form use cases require within weeks of launch.

Yes, but it requires the renderer to be built as a standalone embeddable component. The simplest approach: host the renderer at a public URL and embed it in an iframe on the external site. A more robust approach: publish the renderer as a JavaScript snippet that mounts to a div on the host page. The iframe approach is achievable with an AI build; the JavaScript snippet approach requires custom development to handle cross-origin communication, theming, and submission callbacks.

Three layers: first, add Cloudflare Turnstile (free) as a hidden CAPTCHA on the submission form — it blocks most bots without user friction. Second, rate-limit the submission Edge Function by IP using Upstash Ratelimit (free tier: 10K requests/day). Third, add a duplicate fingerprint check in the Edge Function that rejects submissions with identical answers from the same IP within 60 seconds. Together these prevent the vast majority of spam without requiring submitters to log in.

Yes. File upload fields upload to Supabase Storage via a presigned URL and store the file path in the submission's answers JSONB. Set file type restrictions in the react-dropzone accept prop (e.g., PDFs and images only) and size limits (typically 10MB for public forms). The file URL in the submission record lets form owners download attachments from the submissions dashboard.

Add a Download CSV button to the submissions dashboard that calls Papa.unparse() from the papaparse library on the submissions array fetched from Supabase. For Excel output, use ExcelJS in a Supabase Edge Function — it produces a proper .xlsx with bold headers and auto-sized columns. Always use `quotes: true` in Papa.unparse() to handle field values that contain commas or line breaks.

Typeform and Tally are right for standalone forms. Build your own when the form is embedded in a product your users own — meaning your users need to create and manage forms within your app under your branding, with submissions stored in your database alongside the rest of your data. The moment you need custom logic, white-label embedding, or submission data joined with your own tables for reporting, external tools become a dead end.