FormKita

Buat, publikasikan, dan analisis form tanpa ribet.

FormKita adalah platform pembuat form full-stack untuk tim kecil dan bisnis yang ingin membuat form, mengumpulkan respons, dan membaca hasil dalam satu alur yang rapi. Produk ini menggabungkan editor drag-and-drop, publikasi form, dan analitik respons agar tim bisa bergerak cepat tanpa bergantung pada engineering.

Business Goals

  • Mencapai 1,000 akun terdaftar dalam 90 hari pertama setelah peluncuran.
  • Mencapai conversion rate registrasi ke pembuatan form pertama sebesar minimal 35% dalam 30 hari.
  • Mencapai 25% pengguna aktif bulanan yang mempublikasikan setidaknya satu form dalam 60 hari.
  • Mencapai retensi pengguna aktif 30 hari sebesar minimal 20% dalam 90 hari.

User Goals

  • Membuat form pertama dalam waktu kurang dari 10 menit.
  • Menyimpan draft dan melihat preview publik secara real time sebelum publish.
  • Mendapatkan link publik dan embed code untuk berbagi form dengan cepat.
  • Melihat jumlah respons, grafik per field, dan mengekspor data ke CSV tanpa bantuan teknis.

Non-Goals

  • Membangun workflow automation kompleks seperti approval chain atau branching logic multi-level pada versi awal.
  • Mendukung payment collection, e-signature, atau upload file pada rilis pertama.
  • Menyediakan multi-tenant enterprise admin, SSO, atau role permission granular selain pemilik form.
  • Membangun mobile app native terpisah; produk ini fokus pada web responsive yang cepat.

Founder Rani, 32 - Rani menjalankan startup kecil dan perlu mengumpulkan leads dari landing page serta event. Ia butuh cara cepat untuk membuat form yang terlihat profesional dan bisa dibagikan ke tim.

Founder Rani, 32

  • As a founder, I want to create a lead capture form quickly, so that I can start collecting prospects the same day.
  • As a founder, I want to publish a form with a public link, so that I can share it on social media and email.
  • As a founder, I want to see response trends, so that I can measure campaign effectiveness.

Ops Manager Budi, 41 - Budi mengelola operasional internal seperti request vendor, survei karyawan, dan pengumpulan data harian. Ia butuh validasi sederhana dan hasil yang mudah diekspor.

Ops Manager Budi, 41

  • As an ops manager, I want required fields and clear validation, so that submitted data is complete.
  • As an ops manager, I want to reorder fields with drag and drop, so that the form matches my process.
  • As an ops manager, I want to export CSV, so that I can analyze responses in spreadsheets.

Marketing Specialist Sinta, 28 - Sinta membuat kampanye berkala dan ingin mengetahui form mana yang paling banyak menghasilkan respons. Ia membutuhkan dashboard ringkas dan analytics yang mudah dibaca.

Marketing Specialist Sinta, 28

  • As a marketer, I want a dashboard showing form status and response counts, so that I can prioritize active campaigns.
  • As a marketer, I want field-wise charts, so that I can identify drop-off or weak questions.
  • As a marketer, I want analytics events tracked automatically, so that I can report performance accurately.

Landing Page · High priority

  • Halaman landing harus menjelaskan value proposition, mendorong registrasi/login, dan memberikan pengalaman awal yang cepat dan halus.
  • Menampilkan hero, benefit utama, CTA register/login, dan ringkasan fitur inti.
  • Menggunakan Lenis untuk smooth scroll dan GSAP untuk animasi subtle pada elemen hero dan CTA.
  • Memuat cepat dengan prioritas aset penting, lazy load untuk elemen sekunder, dan optimasi gambar.
  • Responsif untuk mobile terlebih dahulu dan tetap jelas tanpa animasi bila prefers-reduced-motion aktif.

Authentication and Route Protection · High priority

  • Semua route kecuali landing dan form publik harus dilindungi agar hanya pengguna terautentikasi yang bisa mengelola form.
  • Register dan login menggunakan Auth.js dengan adapter Astro dan database PostgreSQL.
  • Session harus dipersist dan diverifikasi pada server-side sebelum mengakses dashboard, editor, analytics, dan publish settings.
  • Pengguna yang belum login diarahkan ke login tanpa kehilangan konteks navigasi.
  • Public form submission tetap dapat diakses melalui slug publik atau slug plus password opsional.

Dashboard · High priority

  • Dashboard menjadi pusat kontrol untuk melihat seluruh form dan statusnya secara cepat.
  • Menampilkan daftar form, total responses, status draft atau published, dan tombol Create New Form.
  • Mendukung empty state yang menjelaskan langkah berikutnya bila belum ada form.
  • Menampilkan ringkasan metrik dasar per form tanpa perlu masuk ke detail.
  • Menyediakan navigasi ke editor, publish, dan analytics untuk tiap form.

Form Editor · High priority

  • Editor harus memudahkan pembuatan form yang reusable, cepat, dan mudah divalidasi.
  • FieldBuilder reusable mendukung drag-and-drop reorder dan tipe field text, multiple choice, dan number.
  • Setiap field memiliki required toggle, label, dan urutan yang tersimpan ke database.
  • Save draft harus tersedia setiap saat dan memicu event draft_saved.
  • Live preview harus menunjukkan perilaku publik termasuk state kosong dan validasi required.

Publishing and Analytics · High priority

  • Setelah form siap, pengguna harus dapat mempublikasikan dan melihat hasilnya dengan jelas.
  • Publish menghasilkan public link berbasis slug dan embed code snippet untuk website lain.
  • Analytics menampilkan response count, chart per field, dan tombol export CSV.
  • Halaman analytics mencatat event analytics_viewed dan mendukung empty state bila respons masih nol.
  • Form publik harus mobile-friendly, cepat, dan aman dengan opsi password opsional.

First-Time User Experience

  • Pengguna tiba di landing page dan langsung melihat value proposition, benefit, serta CTA register/login.
  • Pengguna memilih Register atau Login dan masuk ke autentikasi tanpa gangguan.
  • Setelah login, pengguna diarahkan ke dashboard dengan empty state yang jelas jika belum punya form.
  • Pengguna menekan Create New Form, memberi nama form, lalu mulai menambahkan field pertama.
  • Dalam waktu kurang dari 10 menit, pengguna bisa menyimpan draft, melihat preview, dan siap publish.

1. Landing to Account Creation

  • Landing page harus mengonversi pengunjung menjadi pengguna terdaftar dengan alur singkat dan ringan.
  • Hero menonjolkan manfaat utama dan CTA yang jelas.
  • Animasi GSAP hanya sebagai aksen halus, bukan elemen yang mengganggu.
  • Smooth scroll Lenis harus tetap responsif dan tidak menghambat navigasi.

2. Authentication

  • Register dan login harus terasa aman, cepat, dan sederhana untuk mengurangi friksi awal.
  • Form autentikasi harus menampilkan error yang jelas untuk email salah, password lemah, atau kredensial tidak valid.
  • Session tersimpan server-side dan setiap route privat memeriksa autentikasi sebelum render.
  • Pengguna yang sudah login tidak perlu melihat ulang flow register/login.

3. Dashboard Overview

  • Dashboard memberikan gambaran status semua form dan menuntun pengguna ke tindakan berikutnya.
  • Tampilkan status draft/published, jumlah respons, dan waktu update terakhir.
  • Gunakan empty state edukatif bila daftar form kosong.
  • Aksi utama harus satu klik menuju create form atau edit form.

4. Build and Preview Form

  • Editor memungkinkan pengguna menyusun form dengan cepat memakai komponen yang dapat dipakai ulang.
  • FieldBuilder mendukung drag-and-drop reorder serta required toggle per field.
  • Validasi harus mencegah field tanpa label dan tipe harus konsisten.
  • Live preview memperlihatkan layout final dan responsif di mobile.

5. Publish and Share

  • Pengguna mempublikasikan form setelah siap dan membagikannya dalam beberapa cara.
  • Generate slug unik dan public link saat publish.
  • Sediakan embed code yang dapat disalin ke situs eksternal.
  • Jika password diaktifkan, tampilkan form gate sebelum submission.

6. Analyze Results

  • Analytics membantu pengguna memahami performa form dan mengekspor data untuk tindak lanjut.
  • Tampilkan response count, chart per field, dan tabel respons bila diperlukan.
  • Export CSV harus menjaga encoding dan header kolom konsisten.
  • Bila belum ada data, tampilkan empty state yang menjelaskan cara mendapatkan respons pertama.

Advanced Features

  • Password protection untuk public form dengan alur verifikasi ringan.
  • Audit trail untuk perubahan penting seperti draft_saved dan published.
  • Embed snippet yang siap dipasang ke website eksternal.
  • Optimasi SEO dan metadata untuk halaman landing dan public form.
  • Support empty state dan error state yang berbeda untuk dashboard, editor, dan analytics.

UI Highlights

  • Gunakan warna primer #2D336B untuk navigasi, tombol primer, heading, aksen interaktif, dan border fokus.
  • Gunakan warna sekunder #FFF2F2 untuk latar belakang halaman, card, dan area kontras.
  • Semua teks di atas #FFF2F2 wajib memakai #2D336B dengan rasio kontras minimal 4.5:1.
  • Prioritaskan komponen reusable, terutama FieldBuilder, agar editor mudah dikembangkan.
  • Semua halaman harus aksesibel, keyboard-friendly, dan mendukung prefers-reduced-motion.
  • Halaman publik form harus sangat cepat, mobile-friendly, dan minim gangguan visual.

Rani menjalankan kampanye webinar dan butuh form pendaftaran yang bisa dibuat cepat tanpa menunggu tim engineering. Di FormKita, ia membuka dashboard, membuat form baru, drag-and-drop beberapa field, lalu menyimpan draft dan melihat preview dalam hitungan menit.

Saat form dipublikasikan, FormKita otomatis menghasilkan public link dan embed code yang bisa dipasang di landing page kampanye. Rani mulai menerima respons, melihat chart per field untuk menemukan pertanyaan yang paling sering ditinggalkan, lalu mengekspor CSV untuk follow-up tim sales.

Hasilnya, Rani tidak hanya menghemat waktu pembuatan form, tetapi juga mendapat visibilitas yang jelas tentang performa kampanye. Bagi bisnis, ini berarti time-to-publish lebih cepat, respons lebih banyak, dan keputusan yang lebih berbasis data.

User-Centric Metrics

  • 80% pengguna baru berhasil membuat draft form pertama dalam 10 menit.
  • Minimal 60% pengguna yang login kembali melihat dashboard dalam 7 hari.
  • Minimal 35% form yang dibuat mencapai status published dalam 24 jam.
  • Rata-rata waktu dari login ke publish kurang dari 15 menit.
  • Tingkat completion submission pada public form di atas 75% untuk form dengan maksimal 8 field.

Business Metrics

  • Conversion register ke form_created minimal 35% dalam 30 hari.
  • Monthly active creators tumbuh 15% per bulan selama 3 bulan pertama.
  • Retensi 30 hari minimal 20% untuk pengguna yang pernah publish.
  • Rata-rata 1.5 form published per pengguna aktif dalam 60 hari.
  • CSV export digunakan oleh minimal 25% akun aktif yang memiliki lebih dari 20 respons.

Technical Metrics

  • Uptime layanan 99.9% per bulan.
  • P95 response time untuk dashboard dan editor di bawah 300 ms.
  • P95 public form submission di bawah 500 ms server-side.
  • 0 pelanggaran akses untuk route privat dalam audit keamanan dasar.

Tracking Plan

  • page_view pada landing, dashboard, editor, analytics, dan public form.
  • register saat akun berhasil dibuat.
  • login saat sesi aktif berhasil dibuat.
  • form_created saat form baru disimpan pertama kali.
  • draft_saved saat draft editor disimpan.
  • published saat form aktif dan public link dibuat.
  • response_submitted saat public form berhasil dikirim.
  • analytics_viewed saat pengguna membuka analytics.
  • csv_exported saat pengguna mengekspor data.

Technical Needs

  • Astro full-stack dengan API routes untuk SSR, routing, dan server actions.
  • React untuk Dashboard, Editor, dan Analytics yang interaktif.
  • TypeScript di semua layer backend logic dan komponen utama.
  • PostgreSQL sebagai database utama dengan Prisma ORM untuk schema, query, dan migrasi.
  • Auth.js dengan adapter Astro dan PostgreSQL untuk register, login, session, dan route protection.
  • Komponen FieldBuilder yang reusable untuk drag-and-drop, validation, dan preview state.
  • Instrumentasi event analytics yang terpusat dan konsisten pada client dan server.

Integration Points

  • Auth.js untuk autentikasi dan session management.
  • PostgreSQL untuk penyimpanan user, form, field, response, publish setting, dan audit event.
  • Prisma untuk model data dan migrasi schema.
  • CSV export generator di server untuk download respons.
  • Opsional webhook atau analytics pipeline internal di fase berikutnya untuk pelacakan event.

Data Storage & Privacy

  • Simpan data form dan respons hanya untuk pemilik form yang terautentikasi atau public submission yang valid.
  • Password public form harus disimpan hashed, bukan plaintext.
  • AuditEvent mencatat aksi penting tanpa menyimpan data sensitif yang tidak perlu.
  • Siapkan mekanisme penghapusan data dan ekspor untuk kepatuhan GDPR/CCPA bila diminta pengguna.
  • Gunakan sanitasi input pada semua field submission untuk mengurangi risiko injeksi dan data korup.

Scalability & Performance

  • Gunakan caching ringan untuk landing dan public form yang sudah dipublish.
  • Optimalkan query analitik dengan indeks pada formId, submittedAt, dan fieldId.
  • Pisahkan proses generate CSV agar tidak memblokir request utama untuk dataset besar.
  • Lazy load komponen interaktif dan chart di dashboard, editor, dan analytics.

Potential Challenges

  • Drag-and-drop editor bisa terasa berat di browser lambat; mitigasi dengan virtualized list dan state lokal yang ringan.
  • Query analytics bisa lambat saat respons besar; mitigasi dengan indeks database dan agregasi server-side.
  • Route protection yang salah konfigurasi bisa membuka data privat; mitigasi dengan middleware auth dan test akses per route.
  • Public form submission rentan spam; mitigasi dengan rate limit dasar dan validasi server-side.
  • Embed code bisa rusak di lingkungan eksternal; mitigasi dengan snippet sederhana dan dokumentasi implementasi yang jelas.

Team & resourcing - Small team - 2 full-stack engineers, 1 product designer, part-time PM.

Phase 1: MVP Foundation · Weeks 1–3

  • Setup Astro, React, TypeScript, Prisma, PostgreSQL, dan Auth.js.
  • Skema database awal untuk User, Form, FormField, FormResponse, FormResponseItem, PublishSetting, dan AuditEvent.
  • Landing page, register, login, route protection dasar, dan dashboard empty state.

Phase 2: Form Builder and Publishing · Weeks 4–6

  • Editor form dengan FieldBuilder drag-and-drop, required toggle, save draft, dan live preview.
  • Publish flow dengan slug public link, password opsional, dan embed code snippet.
  • Audit event untuk form_created, draft_saved, dan published.

Phase 3: Analytics and Export · Weeks 7–8

  • Halaman analytics dengan response count dan field-wise charts.
  • Export CSV server-side dari data respons.
  • Optimasi empty state, validasi field wajib, dan mobile performance untuk public form.

Phase 4: Polish and Launch · Weeks 9–10

  • Penyempurnaan UI, aksesibilitas keyboard, dan prefers-reduced-motion support.
  • Instrumentasi event lengkap page_view, register, login, response_submitted, analytics_viewed, dan csv_exported.
  • Hardening keamanan, testing alur utama, dan persiapan peluncuran awal.

Paste this into Cursor, Bolt, Lovable, or v0 to start building.

Build a full-stack web app called FormKita using Astro with React components, TypeScript, PostgreSQL, Prisma ORM, and Auth.js with the Astro adapter.

Product summary: FormKita is a form builder for small teams and businesses. It needs a public landing page with subtle GSAP animation and Lenis smooth scrolling, authenticated dashboard, drag-and-drop form editor, public form submission pages, publishing with public link and optional password, and analytics with response counts, field-wise charts, and CSV export.

Primary screens and flows:
1) Landing page with hero, benefits, register/login CTAs, GSAP subtle animation, Lenis smooth scroll.
2) Register and Login using Auth.js. Protect all routes except landing and public form pages.
3) Dashboard showing list of forms, total responses, draft/published status, and Create New Form button.
4) Form Editor with reusable FieldBuilder component supporting drag-and-drop reorder, field types: text, multiple choice, number, required toggle, save draft, and live preview.
5) Publish screen that generates a public slug link and embed code snippet, with optional password protection.
6) Analytics screen with response count, field-wise charts, and CSV export.
7) Public form submission page that is fast, mobile-friendly, and validates required fields server-side.

Data model:
User
Form(userId)
FormField(formId, type, label, required, order)
FormResponse(formId, submittedAt)
FormResponseItem(responseId, fieldId, value)
PublishSetting(formId, slug, isPublic, password optional)
AuditEvent(userId, action, timestamp)

Technical requirements:
- Use Astro API routes or a separate TypeScript server for CRUD form logic, publish flow, and analytics.
- Use PostgreSQL with Prisma migrations and clean relational schema.
- Use Auth.js for register/login/session handling and server-side route protection.
- Add instrumentation for page_view, register, login, form_created, draft_saved, published, response_submitted, analytics_viewed, csv_exported.
- Implement accessible UI, empty states, optimized loading, reusable components, and responsive design.

Design system:
- Primary color #2D336B for navigation, primary buttons, headings, interactive accents, and focus borders.
- Secondary color #FFF2F2 for page backgrounds, cards, and contrast areas.
- All text on #FFF2F2 must use #2D336B with at least 4.5:1 contrast.

Implement production-ready file structure, schema, server routes, client components, form validation, and realistic seed/sample data. Prioritize clear architecture, reusable components, and polished UX.

Business Idea

Anda adalah Product Manager yang ringkas dan langsung ke inti. Tugas Anda: hasilkan konten file PRD.md untuk produk FormKita dalam satu blok markdown. Aturan output PRD: - Judul utama: # PRD FormKita (ini satu-satunya header yang boleh menggunakan #). - Setiap bagian berikutnya gunakan teks tebal atau daftar, tetapi DILARANG menggunakan ##, ###, --, atau ** (kecuali untuk penekanan minimal, lebih baik gunakan daftar bernomor atau bullet). - Maksimal 3 kalimat per paragraf. - Langsung ke konten, tanpa pembukaan atau penutupan. Spesifikasi teknis wajib: - Framework: Astro (full-stack dengan API routes). UI interaktif (Dashboard, Editor, Analytics) menggunakan React. - Animasi landing: GSAP (efek subtle) dan Lenis (smooth scroll). - Autentikasi: Auth.js dengan adapter Astro dan database PostgreSQL. - Database: PostgreSQL dengan Prisma ORM. - Backend logic (CRUD form, publish, analytics) ditulis dalam TypeScript di dalam API routes Astro atau sebagai server terpisah yang terhubung (jelaskan dalam PRD). Alur pengguna (wajib): 1. Landing page (hero, benefit, CTA register/login, Lenis + GSAP). 2. Autentikasi (Register dan Login). 3. Dashboard (daftar form, total responses, status draft/published, tombol Create New Form). 4. Editor Form (drag-and-drop reorder field, tipe field: text, multiple choice, number. Fitur: required toggle, save draft, live preview). 5. Publish (generate public link, embed code snippet). 6. Analisis (response count, field-wise charts, export CSV). Model data (harus disebutkan): User, Form (userId), FormField (formId, type, label, required, order), FormResponse (formId, submittedAt), FormResponseItem (responseId, fieldId, value), PublishSetting (formId, slug, isPublic, password opsional), AuditEvent (userId, action, timestamp). Panduan warna wajib (untuk bagian Desain UI): - Primer: #2D336B (Indigo Tua) untuk navigasi, tombol primer, heading, aksen interaktif, dan border fokus. - Sekunder: #FFF2F2 (Champagne Petal) untuk latar belakang halaman, card, dan area kontras. - Kontras: Teks di atas #FFF2F2 wajib menggunakan #2D336B dengan rasio kontras minimal 4.5:1. Persyaratan tambahan: - Lindungi semua route kecuali landing dan halaman publik form (submission). - Validasi field wajib, tangani empty states dengan baik. - Halaman publik form harus cepat dan mobile-friendly. - Instrumentasi event: page_view, register, login, form_created, draft_saved, published, response_submitted, analytics_viewed, csv_exported. - Optimasi loading, aksesibilitas, dan struktur komponen yang reusable (khususnya FieldBuilder). Struktur PRD yang harus dihasilkan (urutkan persis): 1. Ringkasan Produk (1 kalimat). 2. Tujuan dan Sasaran (maks 3 poin). 3. Ruang Lingkup (Fitur Masuk dan Tidak Masuk, masing-masing 3 poin). 4. Alur Pengguna Detail (jelaskan 6 langkah di atas, tiap langkah maks 2 kalimat). 5. Persyaratan Fungsional (per halaman/fitur). 6. Persyaratan Non-Fungsional (kinerja, keamanan, aksesibilitas - total 3 poin). 7. Tumpukan Teknologi (sebutkan semua dan jelaskan integrasi Auth.js dan Prisma). 8. Desain Sistem & UI (masukkan panduan warna di sini). 9. Tolok Ukur Keberhasilan (3 metrik kuantitatif). Akhiri output PRD dengan kata "SELESAI" tanpa tambahan apa pun.

Make My PRD

Design by The Resonance | Powered by GPC – The AI Transformation Company