FormKita

Buat, publikasikan, dan analisis form dalam satu alur sederhana.

FormKita adalah platform pembuatan form untuk tim yang ingin mengumpulkan respons tanpa setup yang rumit. Pengguna bisa membuat form, menyusunnya dengan drag-and-drop, memublikasikan tautan publik, lalu melihat analitik respons dan ekspor CSV dari satu dashboard.

Business Goals

  • Mencapai conversion rate register-to-first-form sebesar 35% dalam 90 hari setelah launch.
  • Meningkatkan jumlah form yang dipublikasikan menjadi 60% dari form yang dibuat dalam 6 bulan.
  • Menjaga monthly active users dari pengguna terdaftar di atas 40% dalam 6 bulan.
  • Mencapai 25% pengguna aktif yang menggunakan fitur analitik minimal sekali per minggu dalam 3 bulan.
  • Menurunkan churn pengguna baru di bawah 15% pada bulan ke-3.

User Goals

  • Membuat form pertama dalam waktu kurang dari 10 menit.
  • Menyimpan perubahan sebagai draft tanpa kehilangan data.
  • Mempublikasikan form dengan link publik dan embed code.
  • Melihat ringkasan respons dan chart per field dengan cepat.
  • Mengekspor respons ke CSV untuk analisis lanjutan.

Non-Goals

  • Membangun automation workflow kompleks atau form builder enterprise tingkat lanjut.
  • Mendukung logic branching multi-level pada v1.
  • Menyediakan editor kolaboratif real-time multi-user pada v1.
  • Mengganti sistem BI atau data warehouse pihak ketiga.

Pemilik UMKM Dita, 34 - Dita sering mengumpulkan lead, order, dan feedback dari pelanggan melalui form sederhana. Ia butuh cara cepat untuk membuat form yang terlihat rapi dan mudah dibagikan.

Pemilik UMKM Dita, 34

  • As a pemilik bisnis, I want to membuat form dalam beberapa menit, so that saya bisa segera mulai mengumpulkan data pelanggan.
  • As a pemilik bisnis, I want to melihat jumlah respons dan status publish, so that saya tahu form mana yang aktif dan efektif.
  • As a pemilik bisnis, I want to export data ke CSV, so that saya bisa memprosesnya di spreadsheet.

Recruiter Raka, 29 - Raka mengelola banyak form untuk rekrutmen, screening, dan pengumpulan data kandidat. Ia butuh dashboard yang jelas dan analitik yang cukup untuk memantau performa form.

Recruiter Raka, 29

  • As a recruiter, I want to mengurutkan field dengan drag-and-drop, so that saya bisa membuat alur form yang lebih logis.
  • As a recruiter, I want to menandai field wajib, so that data yang masuk lebih lengkap.
  • As a recruiter, I want to mempublikasikan form dengan embed code, so that saya bisa menaruhnya di situs perusahaan.

Operations Admin Sari, 41 - Sari mengelola form internal untuk permintaan aset, cuti, dan approval sederhana. Ia membutuhkan keamanan akses dan kontrol status draft versus published.

Operations Admin Sari, 41

  • As an ops admin, I want to login dengan aman, so that form internal tidak diakses sembarang orang.
  • As an ops admin, I want to menyimpan draft sebelum publish, so that tim saya bisa review sebelum tayang.
  • As an ops admin, I want to melihat audit event, so that perubahan penting bisa ditelusuri.

Landing Page dan Autentikasi · High priority

  • Menyediakan landing page yang menjelaskan manfaat produk dan jalur register/login yang jelas.
  • Landing page menampilkan hero, benefit utama, CTA register dan login.
  • Animasi subtle menggunakan GSAP, scroll halus menggunakan Lenis.
  • Register dan login ditangani oleh Auth.js dengan sesi aman.
  • Route terproteksi untuk semua halaman kecuali landing dan halaman publik form.
  • State login gagal menampilkan pesan error yang jelas tanpa mengganggu alur.

Dashboard Form · High priority

  • Menampilkan daftar form milik user beserta status, ringkasan respons, dan aksi utama.
  • Menampilkan list form dengan nama, total responses, status draft atau published.
  • Menyediakan tombol Create New Form yang langsung membuka editor.
  • Empty state menjelaskan langkah pertama ketika belum ada form.
  • Dashboard memuat data secara cepat dengan pagination atau lazy loading bila daftar besar.
  • Klik form membuka editor atau detail analitik sesuai konteks.

Editor Form · High priority

  • Memungkinkan pembuatan dan penyusunan field form dengan drag-and-drop serta live preview.
  • Mendukung tipe field text, multiple choice, dan number.
  • Setiap field memiliki required toggle, label, dan urutan yang dapat diubah.
  • Mendukung save draft agar perubahan tidak hilang.
  • Live preview memperlihatkan hasil akhir sebelum publish.
  • Validasi mencegah field kosong, label duplikat yang tidak masuk akal, dan urutan yang rusak.

Publish dan Distribusi · High priority

  • Mengubah draft menjadi form publik yang dapat dibagikan dan disematkan.
  • Generate public link berbasis slug unik.
  • Menyediakan embed code snippet untuk dipasang di situs eksternal.
  • Dapat mengaktifkan password opsional untuk form publik tertentu.
  • Status publish tersimpan dan terlihat di dashboard.
  • Link publik harus tetap cepat di mobile dan aman dari akses route internal.

Analisis dan Ekspor · Medium priority

  • Menyediakan insight respons dan opsi ekspor data untuk analisis lanjutan.
  • Menampilkan response count dan chart per field.
  • Menyediakan filter dasar berdasarkan form dan waktu bila diperlukan.
  • Mendukung export CSV dari data respons.
  • Analitik hanya bisa diakses pengguna yang memiliki form terkait.
  • Empty state analytics menjelaskan bahwa data akan muncul setelah ada respons.

First-Time User Experience

  • Pengguna membuka landing page dan melihat value proposition, benefit, serta CTA yang jelas.
  • Pengguna memilih register atau login dan masuk dengan Auth.js.
  • Setelah login, dashboard menampilkan form yang ada atau empty state jika belum ada.
  • Pengguna klik Create New Form dan masuk ke editor.
  • Target time-to-value adalah form pertama tersimpan sebagai draft dalam kurang dari 10 menit.
  • Setelah itu pengguna dapat publish dan membagikan link publik tanpa berpindah tools.

1. Masuk ke Landing

  • Pengguna pertama kali melihat hero sederhana dengan penjelasan singkat manfaat produk. CTA menuju register dan login harus mudah ditemukan tanpa distraksi.
  • Gunakan Lenis untuk scroll halus dan GSAP untuk animasi ringan yang tidak mengganggu.
  • Pastikan CTA tetap terlihat jelas di desktop dan mobile.
  • Landing harus cepat dimuat dan tetap informatif saat JS belum penuh aktif.

2. Autentikasi

  • Pengguna register atau login sebelum mengakses dashboard dan editor. Semua route selain landing dan halaman publik form harus dilindungi.
  • Tampilkan error autentikasi yang spesifik jika kredensial salah.
  • Sesi harus bertahan dengan aman dan logout tersedia di navigasi.
  • Redirect otomatis ke dashboard setelah login sukses.

3. Kelola Dashboard

  • Dashboard menampilkan semua form beserta total respons dan status draft atau published. Pengguna dapat memulai form baru atau membuka form yang sudah ada.
  • Empty state memberi panduan langkah berikutnya saat daftar kosong.
  • Daftar harus mudah discan, dengan aksi utama yang jelas.
  • Gunakan loading state yang ringkas agar UI terasa responsif.

4. Buat dan Edit Form

  • Editor mendukung drag-and-drop reorder field dan konfigurasi field dasar. Pengguna dapat menambah text, multiple choice, atau number serta menandai required.
  • Live preview menampilkan hasil saat pengguna mengubah field.
  • Save draft harus bisa dipanggil kapan saja tanpa publish.
  • Validasi mencegah field tanpa label atau konfigurasi yang tidak lengkap.

5. Publish Form

  • Setelah selesai, pengguna memublikasikan form untuk mendapatkan link publik dan embed code. Slug harus unik dan dapat disesuaikan bila diperlukan.
  • Jika slug sudah dipakai, tampilkan pesan konflik yang jelas.
  • Password opsional dapat diaktifkan untuk form tertentu.
  • Status published harus langsung tercermin di dashboard.

6. Pantau Analitik

  • Pengguna melihat response count, chart per field, dan export CSV dari halaman analitik. Halaman ini harus tetap ringan, informatif, dan mudah dipahami.
  • Analitik menampilkan empty state jika belum ada respons.
  • Export CSV harus memberi feedback sukses atau gagal.
  • Lacak event analytics_viewed dan csv_exported untuk pengukuran penggunaan.

Advanced Features

  • Password protection untuk form publik tertentu.
  • Audit log untuk mencatat aksi penting seperti create, draft save, publish, dan export.
  • Embed code snippet yang siap ditempel ke website eksternal.
  • Slug public link yang dapat dibaca manusia dan tetap unik.
  • Penanganan edge case seperti form tanpa field, response parsial, dan link publik nonaktif.

UI Highlights

  • Warna primer #2D336B dipakai untuk navigasi, tombol utama, heading, aksen interaktif, dan border fokus.
  • Warna sekunder #FFF2F2 dipakai untuk latar halaman, card, dan area kontras agar tampilan terasa ringan.
  • Whitespace luas dengan padding 40px atau lebih antar blok untuk menjaga tampilan minimalis.
  • Tipografi sans-serif bersih dengan batas ukuran 16px body, 24px subheading, dan 40px hero.
  • Hapus dekorasi tidak perlu seperti shadow berat, gradien, dan radius berlebihan.
  • Pembatas section UI memakai garis tipis 1px warna #2D336B opacity 20% dengan whitespace vertikal 32px di atas dan bawah.
  • Pastikan aksesibilitas keyboard, fokus yang terlihat jelas, kontras yang cukup, dan empty state yang informatif.
  • Halaman publik form harus cepat, responsif, dan nyaman di layar mobile.

Dita menjalankan toko kecil dan biasanya membuat form lewat alat yang berbeda-beda, lalu menyalin data ke spreadsheet secara manual. Akibatnya, ia sering lupa memublikasikan form atau tidak tahu mana yang benar-benar dipakai pelanggan.

Dengan FormKita, Dita membuka dashboard, membuat form dengan drag-and-drop, menandai field wajib, lalu menyimpan draft sebelum publish. Dalam beberapa menit ia mendapatkan public link dan embed code, sehingga form bisa dipasang di website tanpa bantuan developer.

Setelah form aktif, Dita melihat jumlah respons, chart per field, dan mengekspor CSV saat diperlukan. Ia menghemat waktu operasional, mendapatkan data yang lebih rapi, dan bisa mengukur performa form secara langsung.

User-Centric Metrics

  • Median waktu membuat form pertama di bawah 10 menit.
  • Minimal 70% pengguna baru menyelesaikan pembuatan draft pertama pada sesi pertama.
  • Setidaknya 50% form yang dibuat menerima minimal 1 respons dalam 7 hari.
  • Tingkat sukses publish di atas 95% tanpa error konfigurasi.
  • Nilai kepuasan pengguna awal minimal 4.3 dari 5 berdasarkan survei in-app.

Business Metrics

  • Conversion rate register ke form published pertama mencapai 30% dalam 90 hari.
  • Retensi 30 hari pengguna aktif minimal 40%.
  • 30% pengguna aktif bulanan membuka analytics setidaknya sekali.
  • Pendapatan dari paket lanjutan atau limit usage meningkat 15% quarter-over-quarter setelah launch.

Technical Metrics

  • Uptime layanan 99.9% per bulan.
  • P95 latency untuk dashboard dan editor di bawah 300ms.
  • P95 latency untuk halaman publik form di bawah 200ms.
  • 0 insiden akses data lintas user pada audit keamanan internal.

Tracking Plan

  • page_view
  • register
  • login
  • form_created
  • draft_saved
  • published
  • response_submitted
  • analytics_viewed
  • csv_exported

Technical Needs

  • Astro sebagai framework full-stack dengan API routes untuk CRUD form, publish, dan analytics.
  • React untuk dashboard, editor, dan analytics interaktif.
  • TypeScript di seluruh backend logic agar tipe data form, field, dan response konsisten.
  • PostgreSQL sebagai database utama dengan Prisma ORM.
  • Auth.js dengan adapter Astro untuk autentikasi dan sesi aman.
  • Komponen drag-and-drop untuk reorder field di editor.
  • Sistem event tracking untuk page_view, register, login, form_created, draft_saved, published, response_submitted, analytics_viewed, dan csv_exported.

Integration Points

  • Auth.js untuk register, login, sesi, dan proteksi route.
  • PostgreSQL untuk penyimpanan utama.
  • Prisma untuk migrasi, query, dan relasi model.
  • GSAP dan Lenis untuk pengalaman landing yang halus.
  • CSV export sebagai output file yang diunduh pengguna.

Data Storage & Privacy

  • Simpan hanya data yang diperlukan oleh model User, Form, FormField, FormResponse, FormResponseItem, PublishSetting, dan AuditEvent.
  • Semua route internal harus dilindungi, sementara landing dan halaman publik form tetap dapat diakses.
  • Sediakan kebijakan retensi dan penghapusan data respons bila pengguna menghapus form.
  • Pastikan data sensitif seperti password publik form disimpan aman dalam bentuk hash atau mekanisme setara.
  • Siapkan dasar kepatuhan GDPR/CCPA dengan penjelasan penggunaan data dan hak penghapusan.

Scalability & Performance

  • Gunakan query terindeks pada formId, userId, slug, submittedAt, dan timestamp.
  • Render halaman publik form secara ringan dengan payload minimal.
  • Paginasi atau lazy loading diperlukan untuk daftar form dan daftar respons besar.
  • Pisahkan beban analitik agregasi dari rendering editor agar pengalaman input tetap cepat.

Potential Challenges

  • Drag-and-drop bisa terasa berat di mobile; mitigasi dengan fallback reorder yang sederhana dan touch-friendly.
  • Analitik bisa lambat saat respons bertambah; mitigasi dengan agregasi server-side dan indeks database.
  • Slug publik berpotensi bentrok; mitigasi dengan validasi uniqueness saat publish dan opsi regenerate.
  • Password form publik bisa disalahgunakan jika tidak aman; mitigasi dengan hashing, rate limiting, dan audit log.
  • Route protection bisa salah konfigurasi; mitigasi dengan middleware atau guard yang diuji untuk semua route sensitif.

Team & resourcing - Small team - 2 engineers, 1 designer, part-time PM

Phase 1: MVP Foundation · Weeks 1–4

  • Setup Astro, React, TypeScript, Prisma, PostgreSQL, dan Auth.js.
  • Landing page, register/login, serta proteksi route dasar.
  • Skema database awal untuk semua model utama.
  • Dashboard sederhana dengan empty state dan create form flow.

Phase 2: Form Builder · Weeks 5–7

  • Editor form dengan drag-and-drop reorder.
  • Field type text, multiple choice, dan number.
  • Required toggle, save draft, dan live preview.
  • Public form submission page yang mobile-friendly.

Phase 3: Publish and Analytics · Weeks 8–10

  • Generate public link dan embed code.
  • Halaman analitik dengan response count dan field-wise charts.
  • Export CSV dan audit log untuk aksi penting.
  • Event tracking untuk semua event inti.

Phase 4: Hardening and Launch · Weeks 11–12

  • Performance tuning, accessibility pass, dan security review.
  • Empty states dan error states yang lebih lengkap.
  • Validasi final untuk publish, submission, dan CSV export.
  • Release candidate dan monitoring pasca-launch.

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

Build a full-stack web app called FormKita using Astro with React components for interactive UI, TypeScript, PostgreSQL, Prisma, and Auth.js with an Astro adapter. Create a minimal form builder platform with these screens and flows:
- Public landing page with hero, benefits, CTA register/login, subtle GSAP animations, and Lenis smooth scroll.
- Authentication pages for register and login.
- Protected dashboard showing user forms, total responses, draft/published status, and a Create New Form button.
- Form editor with drag-and-drop field reorder, field types text/multiple choice/number, required toggle, save draft, and live preview.
- Publish flow that generates a public link with unique slug and optional password protection, plus embed code snippet.
- Analytics page showing response count, field-wise charts, and CSV export.
- Public form submission page that is fast and mobile-friendly.

Use these database models: 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).

Implement backend CRUD, publish logic, analytics aggregation, and CSV export in Astro API routes. Protect all routes except the landing page and public form submission page. Add event tracking for page_view, register, login, form_created, draft_saved, published, response_submitted, analytics_viewed, and csv_exported. Use a minimal design system with primary color #2D336B and secondary color #FFF2F2, generous whitespace, clean sans-serif typography, and accessible focus states.

Generate a production-ready scaffold with realistic component structure, route structure, Prisma schema, authentication setup, and seedable sample data.

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. Output PRD wajib mengikuti prinsip desain minimalis dan memiliki pembatas visual yang jelas antar setiap bagian. Aturan output PRD: - Judul utama: # PRD FormKita (ini satu-satunya header yang boleh menggunakan #). - Gunakan daftar bernomor (1, 2, 3) dan bullet point (-) untuk detail. DILARANG menggunakan ##, ###, --, atau ** untuk format teks (kecuali untuk tombol/aksi, gunakan backtick). - Maksimal 3 kalimat per paragraf. - **Pembatas antar bagian**: Setiap bagian besar (Ringkasan, Tujuan, Ruang Lingkup, Alur, Fungsional, Non-Fungsional, Teknologi, Desain, Metrik) wajib dipisahkan dengan garis pembatas berupa `___` (garis bawah tiga kali) atau `<hr>` untuk menciptakan hierarki visual yang bersih dan memudahkan scanning. 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. 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 dan desain minimalis (untuk bagian Desain UI): - Warna primer: #2D336B (Indigo Tua) untuk navigasi, tombol primer, heading, aksen interaktif, dan border fokus. - Warna sekunder: #FFF2F2 (Champagne Petal) untuk latar belakang halaman, card, dan area kontras. - Prinsip minimalis: Gunakan whitespace yang luas (padding 40px+ antar blok), tipografi sans-serif bersih (ukuran terbatas: 16px untuk body, 24px untuk subheading, 40px untuk hero). Hilangkan semua dekorasi tidak perlu (bayangan, gradien, border radius berlebihan). Batasi maksimal 2 jenis ukuran font. - Khusus untuk pembatas antar section di UI (bukan di PRD): Gunakan garis horizontal tipis setebal 1px dengan warna #2D336B pada opacity 20%, diapit whitespace vertikal 32px. 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. Struktur PRD yang harus dihasilkan (urutkan persis, dan setiap bagian besar wajib dipisahkan dengan `___`): 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, tulis sebagai daftar padat). 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 dan minimalis 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

    PRD: Anda adalah Product Manager yang ringkas dan langsung ke...