How to Build a Form Builder Backend with Lovable

1-- Run in Supabase SQL Editor
2create table forms (
3  id uuid primary key default gen_random_uuid(),
4  title text not null,
5  description text,
6  owner_id uuid references auth.users(id),
7  is_published boolean default false,
8  accepts_responses boolean default true,
9  created_at timestamptz default now(),
10  updated_at timestamptz default now()
11);
12
13create table form_fields (
14  id uuid primary key default gen_random_uuid(),
15  form_id uuid references forms(id) on delete cascade,
16  field_type text not null check (field_type in ('text','email','number','textarea','select','checkbox','radio','date')),
17  label text not null,
18  placeholder text,
19  required boolean default false,
20  options jsonb default '[]',
21  position int not null,
22  created_at timestamptz default now()
23);
24
25create table submissions (
26  id uuid primary key default gen_random_uuid(),
27  form_id uuid references forms(id) on delete cascade,
28  responses jsonb not null,
29  submitted_at timestamptz default now(),
30  respondent_ip text
31);
32
33create index idx_form_fields_form_position on form_fields(form_id, position);
34create index idx_submissions_form_submitted on submissions(form_id, submitted_at);
35
36alter table forms enable row level security;
37alter table form_fields enable row level security;
38alter table submissions enable row level security;
39
40create policy "Owners manage forms" on forms for all using (owner_id = auth.uid());
41create policy "Owners manage fields" on form_fields for all using (
42  form_id in (select id from forms where owner_id = auth.uid())
43);
44create policy "Public read published forms" on forms for select using (is_published = true);
45create policy "Public read published fields" on form_fields for select using (
46  form_id in (select id from forms where is_published = true)
47);
48create policy "Anyone insert submissions" on submissions for insert with check (
49  form_id in (select id from forms where accepts_responses = true)
50);
51create policy "Owners read submissions" on submissions for select using (
52  form_id in (select id from forms where owner_id = auth.uid())
53);

1Build the form builder at /builder/:formId.
2
3Left panel - Field Editor:
41. Field type palette at top (8 buttons in a 4x2 grid):
5   text, email, number, textarea, select, checkbox, radio, date
6   Each button is an outlined Card with an icon and label.
7   Clicking adds a new field to the form with a default label.
8
92. Added fields list below the palette:
10   Render each field_fields row as a draggable item.
11   Each item shows: drag handle icon, field_type Badge, label Input (editable inline), required Switch, delete Button.
12   For 'select' and 'radio' fields, show a comma-separated options Input.
13   Reordering updates the position column in Supabase.
14
15Right panel - Live Preview:
16   Import and render the <FormRenderer> component (built in Step 3).
17   Pass the current fields array to FormRenderer.
18   Re-render on every field change.
19
20Top bar: form title Input, 'Published' Switch (updates forms.is_published), and a 'Share' Button that copies /forms/:id/fill to clipboard.

1import { useMemo } from 'react'
2import { useForm } from 'react-hook-form'
3import { zodResolver } from '@hookform/resolvers/zod'
4import { z } from 'zod'
5import { Form, FormField, FormItem, FormLabel, FormControl, FormMessage } from '@/components/ui/form'
6import { Input } from '@/components/ui/input'
7import { Textarea } from '@/components/ui/textarea'
8import { Checkbox } from '@/components/ui/checkbox'
9import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select'
10import { RadioGroup, RadioGroupItem } from '@/components/ui/radio-group'
11import { Button } from '@/components/ui/button'
12import { supabase } from '@/lib/supabase'
13import { toast } from 'sonner'
14
15export interface FormFieldDef {
16  id: string
17  field_type: 'text' | 'email' | 'number' | 'textarea' | 'select' | 'checkbox' | 'radio' | 'date'
18  label: string
19  placeholder?: string
20  required: boolean
21  options: string[]
22  position: number
23}
24
25function buildZodSchema(fields: FormFieldDef[]) {
26  const shape: Record<string, z.ZodTypeAny> = {}
27  for (const f of fields) {
28    let schema: z.ZodTypeAny
29    switch (f.field_type) {
30      case 'email': schema = z.string().email('Invalid email'); break
31      case 'number': schema = z.coerce.number(); break
32      case 'checkbox': schema = z.boolean(); break
33      default: schema = z.string()
34    }
35    if (f.required && f.field_type !== 'checkbox') {
36      schema = (schema as z.ZodString).min(1, `${f.label} is required`)
37    } else if (!f.required) {
38      schema = schema.optional()
39    }
40    shape[f.id] = schema
41  }
42  return z.object(shape)
43}
44
45interface FormRendererProps {
46  formId: string
47  fields: FormFieldDef[]
48  preview?: boolean
49}
50
51export function FormRenderer({ formId, fields, preview = false }: FormRendererProps) {
52  const sorted = useMemo(() => [...fields].sort((a, b) => a.position - b.position), [fields])
53  const schema = useMemo(() => buildZodSchema(sorted), [sorted])
54  type FormValues = z.infer<typeof schema>
55
56  const form = useForm<FormValues>({ resolver: zodResolver(schema) })
57
58  const onSubmit = async (values: FormValues) => {
59    if (preview) return
60    const { error } = await supabase.from('submissions').insert({ form_id: formId, responses: values })
61    if (error) { toast.error('Submission failed'); return }
62    toast.success('Response submitted!')
63    form.reset()
64  }
65
66  return (
67    <Form {...form}>
68      <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-6">
69        {sorted.map((f) => (
70          <FormField key={f.id} control={form.control} name={f.id as never}
71            render={({ field }) => (
72              <FormItem>
73                <FormLabel>{f.label}{f.required && <span className="text-red-500 ml-1">*</span>}</FormLabel>
74                <FormControl>
75                  {f.field_type === 'textarea' ? (
76                    <Textarea placeholder={f.placeholder} {...field} />
77                  ) : f.field_type === 'select' ? (
78                    <Select onValueChange={field.onChange} defaultValue={field.value}>
79                      <SelectTrigger><SelectValue placeholder={f.placeholder ?? 'Select...'} /></SelectTrigger>
80                      <SelectContent>{f.options.map(o => <SelectItem key={o} value={o}>{o}</SelectItem>)}</SelectContent>
81                    </Select>
82                  ) : f.field_type === 'checkbox' ? (
83                    <Checkbox checked={field.value} onCheckedChange={field.onChange} />
84                  ) : f.field_type === 'radio' ? (
85                    <RadioGroup onValueChange={field.onChange} defaultValue={field.value}>
86                      {f.options.map(o => (
87                        <div key={o} className="flex items-center gap-2">
88                          <RadioGroupItem value={o} id={`${f.id}-${o}`} />
89                          <label htmlFor={`${f.id}-${o}`}>{o}</label>
90                        </div>
91                      ))}
92                    </RadioGroup>
93                  ) : (
94                    <Input type={f.field_type} placeholder={f.placeholder} {...field} />
95                  )}
96                </FormControl>
97                <FormMessage />
98              </FormItem>
99            )}
100          />
101        ))}
102        {!preview && <Button type="submit">Submit</Button>}
103      </form>
104    </Form>
105  )
106}

1Build a /builder/:formId/submissions page.
2
3Fetch the form's form_fields ordered by position.
4Fetch all submissions for the form ordered by submitted_at DESC.
5
6Dynamically generate DataTable columns:
71. First column: submitted_at (formatted date)
82. One column per form field using field.label as the header
9   - For each submission row, access submission.responses[field.id]
10   - Truncate text values longer than 40 chars with an ellipsis
11   - Show boolean checkbox responses as a green checkmark or red X
123. Last column: Actions with a 'View Full' Button
13
14Clicking 'View Full' opens a Dialog showing all field labels and their full response values in a definition list.
15
16Above the table show:
17- Total submissions count Card
18- Average completion rate Card (submissions with all required fields filled)
19- Export CSV Button that downloads all submissions as a CSV file
20  (Map field IDs to field labels in the CSV header row)
21
22All columns and rows must be TypeScript typed.

1Add a Tabs component to the submissions page with two tabs: 'Responses' (the DataTable) and 'Analytics'.
2
3In the Analytics tab:
4
51. Submission volume chart:
6   Group submissions by date (date_trunc day in Supabase query).
7   Render as a shadcn BarChart (recharts) with x=date, y=count.
8   Use ResponsiveContainer width=100%.
9   Add a DateRangePicker above the chart to filter.
10
112. Field response charts (for select and radio fields only):
12   For each select/radio field, fetch all submissions and count how many times each option appears in responses[field.id].
13   Render each field's distribution as a horizontal BarChart.
14   Label each chart with the field's label as the heading.
15   Show the option label on the y-axis and count on the x-axis.
16
173. Key metrics row above charts:
18   - Total submissions (number)
19   - Submissions today (number)
20   - Most common answer for the first select/radio field
21
22All chart data fetching should be TypeScript typed.