# How to Vibe Code Your Own Reform (and Stop Paying for It)

> No-code form builder for high-converting lead generation

- Site: https://reform.app
- Category: Form Builder / Lead Generation SaaS
- Platforms: Web app
- Verdict: **Solid side project** (68/100 vibecodeable)
- Estimated effort: 2-3 weeks part-time

## Verdict

Build a personal subset for your own landing pages; skip the commercial integrations and enterprise compliance.

Building a functional personal clone of a form builder like Reform is an achievable solid side project, but maintaining a production service that handles third-party embeds, secure iframe cross-origin messaging, and real-time partial response tracking takes genuine engineering effort. Modern AI coding tools easily handle the frontend form rendering engine and basic database schema, but you will still spend hours debugging client-side script injection, state debouncing for draft saves, and iframe height resizing bugs.

### What you can't replicate

- The FunnelEnvy conversion rate optimization playbook baked into pre-built templates
- Pre-existing native OAuth connectors for Salesforce and HubSpot

## What it does

A modern, conversion-focused alternative to legacy form builders, designed to maximize lead quality and quantity with multi-step logic, embed widgets, and deep CRM integrations.

### Core features

- Multi-step drag-and-drop form builder with block customization
- Embeddable form widgets (iframes and web components)
- Conditional routing logic based on user inputs
- Real-time partial response collection and draft saving
- Spam prevention (reCAPTCHA) and email validation
- Webhook dispatching and basic CRM/spreadsheet integrations

## The business

### Pricing

- Free: $0/mo — For testing form workflows without commitment.
- Basic: $15/mo — Ideal for early-stage startups with simple lead-gen funnels.
- Pro: $35/mo — Best for scaling GTM teams running advanced lead-gen workflows.

Founded 2021.
Team size: Small team.

## The hard parts

- Designing a robust embeddable widget system that resizes gracefully and isolates CSS inside host websites without style leaking
- Building real-time incremental state saving for partial submissions without creating database write bottlenecks on every keystroke
- Implementing complex conditional branching logic trees for multi-step form step evaluation
- Maintaining reliable webhook dispatch queues with retry logic and error logging for downstream integrations

## How to vibe code Reform

### Prerequisites

- Node.js (free): Runtime environment for Next.js development.
- GitHub (free): Source control and deployment pipeline integration.

### Recommended AI tools

- Claude Code: Handles end-to-end scaffolding of the form builder UI, database schema, and server actions from terminal prompts.
- Cursor: Best for iterative frontend work on complex drag-and-drop form step editors and embed scripts.

### Stack

- Frontend: Next.js
- Backend: Next.js Server Actions
- Database: Turso
- Auth: better-auth
- Payments: none
- Other: Vercel AI SDK, Tailwind CSS, PostHog

### Hosting

- Vercel (Hosting the Next.js form builder dashboard and public form rendering engine.): $0/mo
- Cloudflare (Hosting lightweight embed script assets on the global edge network.): $0/mo

### Build guide

1. **Project Scaffolding & Database Setup** — Initialize the Next.js project with Tailwind CSS, configure Turso database connectivity, and set up better-auth for single-user or team authentication.

```
Create a new Next.js project using App Router, TypeScript, and Tailwind CSS. Configure Turso (libSQL) as the database client with Drizzle ORM. Set up better-auth for secure user authentication with email and password. Create database schemas for users, forms, form_blocks, submissions, and partial_submissions. The forms table should store form title, branding colors, settings (JSON), and slug. The form_blocks table should store block type (text, email, textarea, select), label, placeholder, required status, and step order. Implement migration scripts and verify database connection.
```

2. **Form Builder UI & Block Configuration** — Build an intuitive form builder dashboard allowing users to add, reorder, and configure blocks across multiple steps.

```
Build a dashboard page in Next.js App Router for managing forms (/dashboard/forms/[id]). Create a visual form builder component where users can add blocks (text, email, choice, textarea), reorder them using drag-and-drop state, and organize them into multi-step pages. Implement real-time auto-saving of form configuration changes to the backend using server actions with proper debouncing. Add a brand customization sidebar to tweak primary colors, fonts, and logo URLs.
```

3. **Public Form Renderer & Multi-Step Logic** — Create the public-facing respondent view that renders forms cleanly with step navigation and client-side validation.

```
Implement the public form rendering page at /s/[slug]. Build a multi-step form runner component that renders one or more blocks per step based on the form configuration. Add client-side validation using Zod before allowing users to proceed to the next step. Include progress bars, smooth page transition animations, and a customizable 'Thank You' redirect page upon successful completion.
```

4. **Partial Submissions & Draft Saving** — Capture partial data and abandoned submissions incrementally as respondents type or progress through steps.

```
Implement partial submission tracking for the public form runner. As respondents type into fields or transition between steps, debounced background requests should incrementally update a partial_submissions table in Turso with the current state and metadata (IP, user agent, timestamps). Create a dashboard view for form owners at /dashboard/forms/[id]/submissions to review both completed submissions and abandoned partial responses.
```

5. **Embeddable Widgets & Webhook Dispatcher** — Build lightweight embed scripts and iframe wrappers so forms can be embedded on external websites, alongside a basic webhook dispatcher.

```
Build a JavaScript embed snippet generator that hosts an iframe pointing to the public form renderer, complete with automatic height resizing via window.postMessage to prevent scrollbars on host sites. Implement a webhook dispatch system using Next.js server actions that fires form submission payloads to configured destination URLs with signature verification headers upon completion.
```

### Cost vs paying

**Starting costs (one-time):**

- Domain name (optional): $12
- Total: ~$12 one-time

**Ongoing costs (monthly):**

- Vercel Hobby & Turso Free Tier: $0/mo
- Total: $0/mo

- Paying for the SaaS instead: $35/mo
- Build time: 25 hours
- AI tool credits: $20
- Break-even: 0 months (built for personal use)

## Sources

- [Reform.app Homepage](https://reform.app)
- [Reform.app Pricing](https://reform.app/pricing)
- [Reform.app Features](https://reform.app/features)