Beautiful forms that convert.
Create stunning forms, surveys, and quizzes in minutes. No response limits. No hidden fees.
Features • Tech Stack • Getting Started • Screenshots • Architecture • Pricing
- Drag & Drop Builder — Build forms visually with an intuitive editor. No coding required.
- Conditional Logic — Show or hide fields based on previous answers for smart, dynamic forms.
- No Response Limits — Collect unlimited responses on paid plans. No per-response fees.
- Beautiful Themes — Professionally designed themes or full customization to match your brand.
- Real-time Analytics — Track views, completion rates, and drop-off points.
- Powerful Integrations — Connect with Zapier, Webhooks, Google Sheets, Slack, and more.
- File Uploads — Accept documents, images, videos with configurable size limits.
- Custom Branding — Remove FormCraft branding, use your own domain and colors.
- Embeds & Sharing — Embed forms anywhere with one line of code, or share via link.
| Layer | Technology |
|---|---|
| Framework | Next.js 14 (App Router) |
| Language | TypeScript |
| Styling | Tailwind CSS |
| Database | Prisma ORM + SQLite (PostgreSQL-ready) |
| Auth | NextAuth.js v4 (Credentials + JWT) |
| Payments | Stripe (Subscriptions + One-time LTD) |
| State | Zustand (API-backed with debounced auto-save) |
| DnD | @dnd-kit (Drag & Drop form builder) |
| Animations | Framer Motion |
| Validation | Zod |
| Icons | Lucide React |
| Notifications | React Hot Toast |
- Node.js 18+
- npm or yarn
# Clone the repository
git clone https://github.com/beepboop2025/formcraft.git
cd formcraft
# Install dependencies
npm install
# Set up environment variables
cp .env.example .env
# Edit .env with your values (see Environment Variables below)
# Push database schema
npm run db:push
# Start the development server
npm run devOpen http://localhost:3000 to see the app.
Create a .env file in the root directory:
# Database
DATABASE_URL="file:./dev.db"
# Auth
NEXTAUTH_SECRET="your-secret-key"
NEXTAUTH_URL="http://localhost:3000"
# App
NEXT_PUBLIC_APP_URL="http://localhost:3000"
# Stripe (optional — for payments)
STRIPE_SECRET_KEY="sk_test_..."
STRIPE_WEBHOOK_SECRET="whsec_..."
STRIPE_LTD_PRICE_ID="price_..."
STRIPE_PRO_MONTHLY_PRICE_ID="price_..."
STRIPE_PRO_YEARLY_PRICE_ID="price_..."
STRIPE_BUSINESS_MONTHLY_PRICE_ID="price_..."
STRIPE_BUSINESS_YEARLY_PRICE_ID="price_..."
formcraft/
├── prisma/
│ └── schema.prisma # Database schema (User, Form, Response, etc.)
├── src/
│ ├── app/
│ │ ├── api/
│ │ │ ├── auth/ # NextAuth API route
│ │ │ ├── forms/ # CRUD API for forms
│ │ │ ├── public/ # Public form & submission endpoints
│ │ │ ├── stripe/ # Checkout & webhook handlers
│ │ │ └── user/ # User profile API
│ │ ├── builder/[formId]/ # Form builder editor
│ │ ├── checkout/ # Success & cancel pages
│ │ ├── dashboard/ # Dashboard, account settings, responses
│ │ ├── f/[formId]/ # Public form renderer
│ │ ├── login/ # Auth pages
│ │ └── register/
│ ├── components/
│ │ ├── builder/ # Builder UI (canvas, sidebar, header, share)
│ │ ├── dashboard/ # Dashboard cards, layout
│ │ ├── form/ # FormRenderer, field components
│ │ └── landing/ # Landing page sections
│ ├── lib/
│ │ ├── api.ts # Client-side API helpers
│ │ ├── auth-helpers.ts # Server-side auth utilities
│ │ ├── constants.ts # Site config, pricing, features
│ │ ├── prisma.ts # Prisma client singleton
│ │ ├── store.ts # Zustand store (API-backed)
│ │ └── stripe.ts # Stripe client
│ └── types.ts # TypeScript type definitions
├── .env.example
├── tailwind.config.ts
└── package.json
- API-backed state: Zustand store syncs with the server via debounced auto-save. Changes persist immediately without manual save.
- Plan-based access control: Free tier limited to 3 forms and 100 responses/month. Middleware enforces limits at the API layer.
- Slug-based public URLs: Forms are shared via
/f/[slug]with auto-generated nanoid slugs. - Stripe dual-mode: Supports both subscription billing (Pro/Business monthly/yearly) and one-time Lifetime Deal payments.
| Plan | Price | Highlights |
|---|---|---|
| Starter | Free | 3 forms, 100 responses/month, basic themes |
| Pro | $29/mo | Unlimited forms & responses, conditional logic, custom branding |
| Business | $79/mo | Team collaboration, custom domain, API access, white-label |
| Lifetime Deal | $149 one-time | Everything in Pro forever, all future features included |
npm run dev # Start development server
npm run build # Build for production
npm run start # Start production server
npm run db:push # Push Prisma schema to database
npm run db:studio # Open Prisma Studio (database GUI)
npm run db:seed # Seed database with sample dataFormCraft is ready for deployment on Vercel, Railway, or any Node.js hosting platform.
For production, swap SQLite for PostgreSQL by updating DATABASE_URL:
DATABASE_URL="postgresql://user:pass@host:5432/formcraft"Then update prisma/schema.prisma provider from sqlite to postgresql and run npm run db:push.
MIT
Built with Next.js, Tailwind CSS, Prisma, and Stripe.
FormCraft — Beautiful forms that convert.