FormKita

Buat form, publish cepat, dan pahami responnya.

FormKita adalah platform form builder untuk tim kecil hingga bisnis yang ingin membuat, mempublikasikan, dan menganalisis form tanpa proses teknis yang rumit. Produk ini menggabungkan landing page yang cepat, autentikasi, editor drag-and-drop, publish link/embed, dan analytics respon dalam satu alur yang ringkas.

Business Goals

  • Mencapai conversion rate landing page ke register sebesar 8% dalam 90 hari pertama.
  • Meningkatkan aktivasi pengguna baru hingga 60% berhasil membuat minimal 1 form dalam 24 jam pertama.
  • Mencapai retensi pengguna aktif bulanan sebesar 35% pada akhir bulan ke-3.
  • Mendorong 25% akun aktif untuk melakukan publish form lebih dari 3 kali per bulan.
  • Menjaga waktu pembuatan form pertama rata-rata di bawah 10 menit.

User Goals

  • Pengguna dapat membuat form tanpa coding dengan cepat.
  • Pengguna dapat menyimpan draft dan melanjutkan edit kapan saja.
  • Pengguna dapat membagikan form lewat link publik atau embed code.
  • Pengguna dapat melihat jumlah respons dan performa tiap field.
  • Pengguna dapat mengekspor data respons ke CSV untuk analisis lanjut.

Non-Goals

  • Tidak menyediakan logika branching kompleks antar pertanyaan pada versi awal.
  • Tidak membangun pipeline pembayaran, subscription, atau invoicing di fase pertama.
  • Tidak fokus pada survey enterprise dengan kontrol akses multi-level yang rumit.
  • Tidak menyediakan integrasi CRM lanjutan di MVP.

Owner UMKM Rina, 34 - Rina perlu mengumpulkan leads dari promosi Instagram dan acara offline. Ia ingin membuat form sederhana, membagikannya cepat, lalu melihat data masuk tanpa bantuan tim teknis.

Owner UMKM Rina, 34

  • As a UMKM owner, I want to create a contact form quickly, so that I can capture leads from campaigns.
  • As a non-technical user, I want to publish a form with one link, so that I can share it instantly on WhatsApp and social media.
  • As a business owner, I want to see response counts and export CSV, so that I can follow up leads efficiently.

Ops Marketing Dimas, 29 - Dimas mengelola beberapa campaign sekaligus dan butuh membandingkan performa form per campaign. Ia mengandalkan analytics sederhana yang cepat dipahami.

Ops Marketing Dimas, 29

  • As a marketing operator, I want to duplicate and edit forms from the dashboard, so that I can launch campaign variants faster.
  • As a campaign manager, I want to see field-level response charts, so that I can identify drop-off or popular answers.
  • As a marketer, I want embed code, so that I can place forms on landing pages without engineering help.

Admin Internal Nisa, 41 - Nisa mengelola proses pengumpulan data internal seperti registrasi event atau kebutuhan karyawan. Ia membutuhkan draft, publish, dan kontrol basic validation.

Admin Internal Nisa, 41

  • As an admin user, I want to save drafts before publishing, so that I can review content before it goes live.
  • As an admin user, I want required fields, so that I can avoid incomplete submissions.
  • As an admin user, I want login-protected access to my workspace, so that form assets stay organized and private.

Landing Page · High priority

  • Halaman depan harus menjelaskan nilai produk dan mendorong pengguna masuk ke alur pembuatan form.
  • Menampilkan hero section dengan CTA utama untuk Register dan CTA sekunder untuk Login.
  • Menjelaskan manfaat utama: buat form, publish cepat, dan lihat analytics.
  • Mendukung animasi GSAP dan smooth scrolling Lenis tanpa mengganggu performa.
  • Memuat cepat dengan optimasi static generation melalui Astro.

Authentication · High priority

  • Sistem login dan register harus aman dan sederhana untuk onboarding cepat.
  • Mendukung register dan login dengan email serta password melalui Auth JS.
  • Menampilkan validasi input dan pesan error yang jelas untuk kredensial salah atau email duplikat.
  • Menyimpan sesi pengguna agar dashboard tetap tersedia setelah refresh.
  • Mendukung logout dan proteksi route dashboard, editor, publish, dan analytics.

Dashboard · High priority

  • Dashboard menjadi pusat kontrol untuk melihat form, status, dan statistik ringkas.
  • Menampilkan daftar form dengan status draft atau published.
  • Menampilkan statistik ringkas seperti total form, total respons, dan form aktif.
  • Menyediakan tombol Create New Form yang langsung membuka editor.
  • Mendukung pencarian dasar dan empty state yang mengarahkan ke pembuatan form pertama.

Form Editor · High priority

  • Editor harus memudahkan pengguna membangun form dengan komponen dasar dan drag-and-drop.
  • Mendukung Add Text Field, Add Multiple Choice, Add Number Field, Drag and Drop Reorder, Required Toggle, dan Save Draft.
  • Menyediakan preview form secara real-time saat field diubah atau diurutkan.
  • Melakukan validasi untuk label kosong, field duplikat, dan field required yang tidak lengkap.
  • Menjaga draft otomatis atau save manual agar perubahan tidak hilang saat navigasi.

Publish dan Analytics · High priority

  • Setelah form siap, pengguna harus bisa mempublikasikan dan memantau hasilnya.
  • Menyediakan Generate Public Link untuk berbagi form secara publik.
  • Menyediakan Embed Code Snippet untuk dipasang di website eksternal.
  • Menampilkan Response Count, Field-wise Chart, dan Export CSV pada halaman analytics.
  • Memisahkan tampilan form publik dari dashboard internal untuk keamanan dan keterbacaan.

First-Time User Flow

  • Masuk ke landing page dan memahami manfaat FormKita dalam beberapa detik.
  • Klik Register atau Login untuk masuk ke workspace pribadi.
  • Sampai ke dashboard dengan orientasi singkat dan tombol Create New Form.
  • Buat form pertama melalui editor drag-and-drop, lalu simpan draft.
  • Publish form melalui public link atau embed code.
  • Lihat respons masuk di analytics dalam waktu kurang dari 10 menit dari registrasi hingga publish pertama.

1. Landing Page

  • Pengguna pertama kali melihat pesan produk, bukti manfaat, dan CTA untuk memulai. Halaman ini harus cukup kuat untuk mendorong registrasi tanpa penjelasan panjang.
  • Hero jelas dengan CTA utama Register dan CTA sekunder Login.
  • Contoh use case singkat untuk form leads, registrasi, dan feedback.
  • Animasi ringan dan smooth scroll tetap hemat resource di mobile.

2. Authentication

  • Pengguna membuat akun atau login agar form tersimpan di workspace pribadi. Alur harus singkat agar tidak menghambat time to value.
  • Validasi email, password, dan error state harus mudah dipahami.
  • Sesi pengguna dipertahankan agar akses kembali ke dashboard instan.
  • Jika registrasi gagal, tampilkan alasan spesifik tanpa kehilangan input.

3. Dashboard

  • Pengguna melihat daftar form, metrik ringkas, dan tombol untuk mulai membuat form baru. Dashboard harus menjadi pusat navigasi yang sederhana.
  • Tampilkan status draft, published, dan jumlah respons per form.
  • Empty state mengarahkan ke pembuatan form pertama.
  • Aksi cepat untuk buka editor, lihat analytics, atau salin link publik.

4. Form Editor

  • Pengguna menyusun form dengan field dasar dan mengatur urutan pertanyaan secara visual. Editor harus terasa cepat, jelas, dan tahan terhadap kesalahan konfigurasi.
  • Field default mencakup text, multiple choice, dan number.
  • Drag and drop reorder harus responsif dan tetap akurat di mobile fallback.
  • Required toggle, validasi label, dan save draft mencegah form tidak siap publish.

5. Publish Form

  • Pengguna menyiapkan form untuk disebarkan ke publik atau ditanam di situs lain. Output publish harus instan dan mudah disalin.
  • Generate public link sekali klik dengan status published.
  • Sediakan embed snippet yang siap ditempel ke website.
  • Jika form belum lengkap, tampilkan daftar perbaikan sebelum publish.

6. Form Analytics

  • Pengguna membaca performa form dan respons yang masuk dalam bentuk angka dan grafik. Fokusnya adalah pemahaman cepat tanpa analisis manual yang berat.
  • Tampilkan response count, chart per field, dan trend sederhana.
  • Sediakan export CSV untuk analisis lanjutan.
  • Jika data kosong, tampilkan edukasi tentang cara mendapatkan respons pertama.

Advanced Use Cases

  • Duplikasi form untuk campaign A/B sederhana.
  • Draft autosave untuk mencegah kehilangan perubahan saat koneksi tidak stabil.
  • Filter analytics per form dan rentang waktu dasar.
  • Embed mode yang aman untuk website eksternal.
  • Fallback empty state dan error recovery saat publish atau export gagal.

UI Principles

  • Landing page menggunakan animasi GSAP yang halus dan tidak berlebihan.
  • Lenis dipakai hanya pada landing page untuk pengalaman scroll yang nyaman.
  • Kontras warna dan ukuran font harus lolos aksesibilitas dasar WCAG AA.
  • Editor harus menampilkan drag handle, state validasi, dan preview yang mudah dipahami.
  • Halaman dashboard dan analytics harus memprioritaskan keterbacaan data dan pemuatan cepat.

Rina menjalankan promo kecil untuk layanan catering dan biasanya menerima pesan acak di WhatsApp. Ia butuh cara cepat untuk mengumpulkan nama, nomor telepon, dan kebutuhan acara tanpa minta bantuan developer.

Dengan FormKita, Rina masuk, membuat form kontak dengan tiga field, menandai nomor telepon sebagai required, lalu menyimpan draft dan mem-publish link publik dalam hitungan menit. Ia menempelkan embed code di website sederhana yang dipakai untuk promosi acara.

Beberapa hari kemudian, Rina membuka analytics untuk melihat jumlah respons, distribusi jawaban per field, dan mengekspor CSV untuk follow-up. Hasilnya, proses pengumpulan lead jadi lebih rapi, respons lebih cepat ditangani, dan biaya operasional turun karena tidak perlu tools tambahan.

User-Centric Metrics

  • 80% pengguna baru berhasil membuat draft form pertama dalam 10 menit.
  • 70% form pertama yang dibuat berhasil dipublish dalam sesi yang sama.
  • Minimal 50% pengguna aktif membuka analytics setidaknya sekali per minggu.
  • Rata-rata waktu untuk menambahkan 3 field pertama di editor di bawah 2 menit.
  • Tingkat keberhasilan export CSV di atas 99%.

Business Metrics

  • Conversion landing page ke register minimal 8% per bulan.
  • Activation rate pengguna baru mencapai 60% dalam 24 jam pertama.
  • Monthly active user retention mencapai 35% pada bulan ke-3.
  • 25% akun aktif membuat minimal 2 form per bulan.
  • Growth organik dari share link menghasilkan 15% akun baru tanpa paid acquisition.

Technical Metrics

  • Uptime layanan 99.9% per bulan.
  • P95 response time halaman dashboard di bawah 500 ms.
  • P95 submit respons publik di bawah 300 ms.
  • Zero critical security incident terkait sesi atau akses data pengguna.

Tracking Plan

  • Track landing_page_cta_clicked untuk mengukur minat awal.
  • Track auth_registered dan auth_logged_in untuk funnel onboarding.
  • Track form_created dan form_saved_draft untuk mengukur aktivasi editor.
  • Track form_published_public_link dan form_published_embed_code untuk adopsi publish.
  • Track response_submitted untuk volume penggunaan.
  • Track analytics_viewed untuk engagement pasca publish.
  • Track csv_exported untuk penggunaan fitur data.

Technical Needs

  • Astro untuk landing page dan static generation agar cepat dan SEO-friendly.
  • GSAP untuk animasi visual landing page.
  • Lenis untuk smooth scrolling pada landing page.
  • Auth JS atau equivalent untuk autentikasi session-based.
  • Backend API berbasis Node.js dengan TypeScript untuk form CRUD, publish, dan analytics.
  • Database PostgreSQL yang cocok untuk relasi user, form, field, dan responses.
  • Object storage atau file system terkelola untuk export CSV bila diperlukan.

Integration Points

  • Auth provider via Auth JS seperti email/password atau OAuth extensible.
  • PostgreSQL sebagai sumber data utama.
  • Email service seperti Resend untuk verifikasi atau notifikasi opsional.
  • Analytics event pipeline internal atau PostHog untuk tracking produk.
  • CDN atau edge hosting seperti Vercel atau Cloudflare untuk distribusi cepat.

Data Storage & Privacy

  • Simpan data form dan response per workspace dengan isolation yang jelas.
  • Encrypt sensitive data in transit menggunakan HTTPS dan at rest di database.
  • Sediakan penghapusan data dan ekspor sesuai prinsip GDPR/CCPA jika diminta pengguna.
  • Minimalkan data yang dikumpulkan pada form publik dan jelaskan penggunaan data secara transparan.
  • Log akses admin dan perubahan form untuk audit dasar.

Scalability & Performance

  • Gunakan static generation untuk landing page agar beban server rendah.
  • Cache dashboard summary dan analytics ringan untuk mengurangi query berulang.
  • Optimalkan query respons dan chart aggregation agar tetap cepat saat data membesar.
  • Pisahkan publish endpoint dari dashboard agar trafik publik tidak mengganggu workspace internal.

Potential Challenges

  • Drag and drop di perangkat mobile bisa sulit; mitigasinya adalah menyediakan reorder handle yang sederhana dan fallback tap controls.
  • Analytics bisa lambat saat respons besar; mitigasinya adalah pre-aggregation dan pagination.
  • Pengguna gagal publish karena form belum valid; mitigasinya adalah checklist validasi sebelum publish.
  • Autentikasi yang terlalu rumit bisa menurunkan aktivasi; mitigasinya adalah signup singkat dengan password policy yang jelas.
  • Embed code berisiko salah pasang di situs eksternal; mitigasinya adalah snippet yang sudah disanitasi dan dokumentasi singkat.

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

Phase 1: MVP Foundation · Weeks 1-2

  • Landing page Astro dengan CTA utama.
  • Auth JS login/register dan protected routes.
  • Database schema awal untuk users, forms, fields, responses.
  • Dashboard dasar dengan daftar form dan tombol create form.

Phase 2: Editor and Drafting · Weeks 3-4

  • Form Editor dengan text, multiple choice, number field.
  • Drag and drop reorder dan required toggle.
  • Save draft dan autosave dasar.
  • Preview form internal sebelum publish.

Phase 3: Publish and Public Forms · Weeks 5-6

  • Generate public link untuk form.
  • Embed code snippet siap pakai.
  • Public form page untuk submit respons.
  • Validasi publish dan handling error dasar.

Phase 4: Analytics and Polish · Weeks 7-8

  • Analytics dashboard dengan response count dan field-wise chart.
  • Export CSV untuk respons.
  • Tracking event dasar dan insight ringkas di dashboard.
  • Penyempurnaan UI, performa, dan aksesibilitas.

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

Build a web app called FormKita, a simple form builder for small businesses and internal teams.
Use Astro for the landing page and static generation. Use Auth.js for authentication. Use PostgreSQL with Prisma for data storage, and a Node.js TypeScript backend for form CRUD, publishing, and analytics.

Core screens and flows:
1. Landing page with hero, benefit sections, CTA buttons for Register and Login, smooth scrolling with Lenis, and subtle GSAP animations.
2. Authentication pages for register and login.
3. Dashboard showing list of forms, total responses, draft/published status, and a Create New Form button.
4. Form editor with drag-and-drop field reordering and field types: text, multiple choice, number. Include required toggle, save draft, and live preview.
5. Publish screen that generates a public form link and embed code snippet.
6. Analytics screen showing response count, field-wise charts, and CSV export.

Data model:
User, Form, FormField, FormResponse, FormResponseItem, PublishSetting, AuditEvent.
A form belongs to one user. A form has many fields and many responses. A response has one or more response items tied to fields.

Requirements:
- Protect dashboard, editor, publish, and analytics routes.
- Validate required fields and handle empty states well.
- Make the public form submission flow fast and mobile-friendly.
- Instrument analytics events for page view, register, login, form created, draft saved, published, response submitted, analytics viewed, and CSV exported.
- Optimize for fast loading, accessibility, and clear UI.

Deliver a polished MVP with clean component structure, reusable form field builder components, and production-ready error handling.

Business Idea

Daftar nama fitur (feature name) untuk PRD FormKita: **Fitur Utama (berdasarkan alur):** - Landing Page - Authentication (Login / Register) - Dashboard - Form Editor - Form Publisher - Form Analytics **Sub-fitur Editor Form (wajib):** - Add Text Field - Add Multiple Choice - Add Number Field - Drag & Drop Reorder - Required Toggle - Save Draft **Sub-fitur Publish:** - Generate Public Link - Embed Code Snippet **Sub-fitur Analisis:** - Response Count - Field-wise Chart (grafik per pertanyaan) - Export CSV Prompt untuk AI membuatkan PRD.md Anda adalah Product Manager yang ringkas dan langsung ke inti. Buatkan file PRD.md untuk produk bernama FormKita dengan spesifikasi teknis dan alur pengguna yang sudah ditentukan. Patuhi aturan berikut: setiap bagian maksimal 3 kalimat, gunakan poin-poin pendek, dan hindari kata pengantar atau penutupan basa-basi. Langsung hasilkan konten PRD.md. Masukan teknis wajib: - Framework: Astro (untuk landing page dan static generation). - Animasi: GSAP untuk efek visual, Lenis untuk smooth scrolling di landing page. - Autentikasi: Auth JS (NextAuth.js atau equivalent) untuk login/register. - Penyimpanan data: Sesuaikan dengan kebutuhan form builder (misal database pilihan, tapi fokus ke alur). Alur pengguna (user flow) yang harus dicakup dalam PRD: 1. Landing Page - perkenalan produk dan call to action. 2. Login / Register - halaman autentikasi. 3. Dashboard - daftar form yang dibuat, statistik ringkas, tombol buat form baru. 4. Editor Form - antarmuka drag-and-drop atau konfigurasi field form (input teks, pilihan ganda, dll). 5. Publish Form - menghasilkan link publik atau embed code untuk form yang sudah siap. 6. Analisi Form - halaman melihat respon pengguna, grafik, dan metrik pengisian. Struktur wajib PRD.md yang harus Anda hasilkan secara berurutan: - Ringkasan Produk (1 kalimat) - Tujuan dan Sasaran (maksimal 3 poin) - Ruang Lingkup (fitur masuk dan fitur tidak masuk, masing-masing 3 poin) - Alur Pengguna Detail (jelaskan setiap langkah dari poin 1 sampai 6, tiap langkah maksimal 2 kalimat) - Persyaratan Fungsional (terkait setiap halaman, tulis dalam daftar pendek) - Persyaratan Non-Fungsional (kinerja, keamanan, aksesibilitas - total 3 poin) - Tumpukan Teknologi (sebutkan Astro, GSAP, Lenis, Auth JS, dan tambahkan basis data/sistem backend yang Anda rekomendasikan) - Tolok Ukur Keberhasilan (3 metrik kuantitatif) Instruksi tambahan: jangan tambahkan bagian "Kesimpulan" atau "Lampiran". Jangan ulangi pertanyaan saya. Mulai langsung dengan judul "# PRD FormKita" (gunakan satu hash untuk judul utama, tapi tidak boleh ada hash ganda atau tanda baca lain seperti ** atau --). Setelah selesai, akhiri dengan kata "SELESAI" tanpa tambahan apa pun.

Make My PRD

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

    PRD: Daftar nama fitur (feature name) untuk PRD...