FormKita

Buat form, publikasikan cepat, pantau hasilnya langsung.

FormKita adalah platform pembuat form untuk tim, UMKM, dan creator yang ingin membuat form dengan cepat tanpa coding. Produk ini menggabungkan landing page yang kuat, editor form drag-and-drop, publikasi instan, dan analitik respon dalam satu alur yang sederhana.

Business Goals

  • Mencapai conversion rate landing page ke sign-up minimal 8% dalam 90 hari setelah rilis MVP.
  • Meningkatkan activation rate pengguna baru yang membuat dan mempublikasikan form pertama menjadi 60% dalam 30 hari.
  • Mencapai retention bulanan pengguna aktif sebesar 35% dalam 3 bulan.
  • Menekan waktu rata-rata dari login ke form pertama terbit di bawah 10 menit.
  • Mendorong 20% akun aktif untuk menggunakan fitur analitik minimal 2 kali per minggu.

User Goals

  • Pengguna dapat membuat form tanpa menulis kode.
  • Pengguna dapat membagikan form lewat link publik atau embed code.
  • Pengguna dapat melihat ringkasan respon dan tren pengisian dengan cepat.
  • Pengguna dapat mengelola beberapa form dari satu dashboard.
  • Pengguna dapat mengubah struktur form tanpa mengganggu alur publikasi.

Non-Goals

  • Tidak membangun suite survei enterprise dengan branching logic sangat kompleks pada MVP.
  • Tidak menyediakan pembayaran, invoicing, atau workflow CRM bawaan.
  • Tidak mendukung impor form dari semua platform pihak ketiga pada tahap awal.
  • Tidak membangun analitik lanjutan seperti cohort analysis atau BI custom dashboard.

Owner UMKM Rina, 34 - Rina mengelola bisnis kecil dan sering perlu mengumpulkan leads, pesanan, atau pendaftaran event. Ia butuh cara cepat untuk membuat form yang terlihat profesional dan mudah dibagikan.

Owner UMKM Rina, 34

  • As a UMKM owner, I want to membuat form pendaftaran dalam beberapa menit, so that saya bisa segera mengumpulkan data pelanggan.
  • As a UMKM owner, I want to melihat jumlah respon masuk setiap hari, so that saya tahu kampanye mana yang efektif.
  • As a UMKM owner, I want to membagikan form lewat link dan embed, so that form bisa dipasang di website dan media sosial.

Marketer Dimas, 29 - Dimas menjalankan kampanye digital dan perlu form untuk lead generation, webinar, dan survei singkat. Ia peduli pada konversi, tampilan, dan kecepatan publish.

Marketer Dimas, 29

  • As a marketer, I want to menduplikasi form yang sudah sukses, so that saya bisa menjalankan kampanye baru lebih cepat.
  • As a marketer, I want to melihat drop-off dan completion rate, so that saya bisa memperbaiki pertanyaan yang menghambat.
  • As a marketer, I want to menyesuaikan field dan urutan pertanyaan, so that form sesuai tujuan campaign.

Ops Coordinator Sari, 41 - Sari mengurus operasional komunitas dan internal request form untuk absensi, registrasi, dan pengumpulan data. Ia membutuhkan alur yang sederhana, stabil, dan mudah dipahami oleh banyak pengguna.

Ops Coordinator Sari, 41

  • As an ops coordinator, I want to mengatur beberapa form dalam dashboard, so that semua kebutuhan administrasi rapi.
  • As an ops coordinator, I want to menyalin link publik dengan cepat, so that saya bisa mengirimnya lewat email atau chat.
  • As an ops coordinator, I want to memeriksa respon terbaru dengan filter dasar, so that saya bisa menindaklanjuti data penting lebih cepat.

Landing Page · High priority

  • Halaman utama harus memperkenalkan FormKita dan mendorong pengguna masuk ke alur sign-up.
  • Hero section dengan value proposition, contoh hasil form, dan CTA utama ke register.
  • Tampilan responsif dengan animasi GSAP ringan dan smooth scrolling Lenis di desktop dan mobile.
  • Section fitur, testimoni singkat, dan pricing teaser untuk meningkatkan trust.
  • SEO dasar, metadata social sharing, dan struktur konten yang optimal untuk Astro static generation.

Auth Login Register · High priority

  • Sistem autentikasi harus mendukung pembuatan akun, login, logout, dan pemulihan akses.
  • Gunakan Auth JS untuk email dan password atau provider yang dipilih tim.
  • Validasi input, error state, dan pesan sukses harus jelas dan aman.
  • Session harus persist di dashboard dan editor form tanpa login ulang selama masa sesi aktif.
  • Dukung redirect ke dashboard setelah autentikasi berhasil.

Dashboard · High priority

  • Dashboard menampilkan daftar form, status publish, dan statistik ringkas agar pengguna bisa mengelola aset utama.
  • Daftar form dengan nama, status draft/published, jumlah respon, dan last updated.
  • Tombol buat form baru yang langsung membuka editor dengan template kosong atau template dasar.
  • Ringkasan metrik seperti total respon, publish rate, dan form aktif.
  • State kosong yang memberi panduan langkah pertama untuk pengguna baru.

Editor Form · High priority

  • Editor memungkinkan pengguna menyusun field form secara visual tanpa coding.
  • Drag-and-drop atau konfigurasi field seperti text, email, number, pilihan ganda, checkbox, dan date.
  • Panel properti untuk label, placeholder, required, opsi jawaban, dan validasi dasar.
  • Autosave untuk setiap perubahan penting dan pengingat saat keluar tanpa menyimpan.
  • Perlakuan aman untuk field invalid, duplikasi nama field, dan urutan komponen yang tidak konsisten.

Publish dan Analisis · High priority

  • Pengguna harus bisa mempublikasikan form dan melihat performanya setelah live.
  • Generate public link dan embed code yang siap ditempel di website.
  • Status publish harus berubah dari draft ke live dengan versi form yang terkunci saat dipublikasikan.
  • Halaman analisis menampilkan grafik respon, total submission, completion rate, dan tren harian.
  • Filter dasar per rentang tanggal dan ekspor data respon ke CSV.

First-Time User Experience

  • Pengguna membuka landing page dan memahami manfaat utama dalam kurang dari 10 detik.
  • Pengguna klik CTA sign up dan masuk ke halaman autentikasi.
  • Setelah register, pengguna diarahkan ke dashboard kosong dengan petunjuk langkah berikutnya.
  • Pengguna membuat form pertama dari template default atau canvas kosong.
  • Pengguna menambahkan field, menyimpan, lalu mem-publish form dalam waktu target di bawah 10 menit.
  • Pengguna melihat link publik dan mulai memantau respon di analisis awal.

1. Masuk dan Mulai

  • Pengguna login atau register lalu dibawa ke dashboard pribadi.
  • Redirect otomatis ke dashboard setelah autentikasi berhasil.
  • Jika sesi berakhir, pengguna harus kembali ke login dengan pesan yang jelas.
  • Error autentikasi harus spesifik tetapi tidak membocorkan detail sensitif.

2. Buat Form Baru

  • Pengguna memilih form baru dari dashboard untuk memulai editor.
  • Sediakan template dasar seperti lead form, registration form, dan contact form.
  • Nama form wajib unik per workspace atau akun agar mudah dikelola.
  • Jika pengguna membatalkan, draft kosong tidak boleh muncul di daftar aktif.

3. Rancang Field

  • Pengguna menyusun field dan mengatur properti setiap komponen.
  • Field harus bisa dipindah urut, diedit, diduplikasi, dan dihapus.
  • Validasi required, format email, dan panjang input minimal harus terlihat di UI.
  • Jika ada field tidak valid, simpan tetap boleh dilakukan tetapi statusnya harus menandai masalah.

4. Publikasikan

  • Pengguna menerbitkan form dan mendapatkan kanal distribusi.
  • Sistem menghasilkan public URL dan embed code secara instan.
  • Versi yang dipublish harus tercatat agar perubahan berikutnya tidak merusak form live.
  • Jika publish gagal, tampilkan alasan dan retry action yang jelas.

5. Pantau Respon

  • Pengguna membuka analisis untuk melihat performa form.
  • Tampilkan grafik harian, total submission, dan completion rate.
  • Sediakan daftar respon terbaru dan opsi ekspor CSV.
  • Jika data masih sedikit, tampilkan empty analytics state yang informatif.

Advanced Features

  • Template form yang dapat disimpan dan digunakan ulang.
  • Duplikasi form dengan mempertahankan struktur dan pengaturan publish.
  • Mode embed dengan ukuran responsif untuk website eksternal.
  • Filter analitik berdasarkan rentang tanggal dan status respon.
  • Versi draft dan published untuk menghindari perubahan tak sengaja pada form aktif.

UI Principles

  • Landing page visual kuat dengan animasi GSAP yang terasa ringan, bukan mengganggu.
  • Smooth scrolling Lenis hanya dipakai di landing page untuk menjaga kesan premium.
  • Editor harus sangat jelas secara visual, dengan panel kiri komponen dan panel kanan properti.
  • Kontras warna dan fokus keyboard harus memenuhi standar aksesibilitas dasar.
  • Dashboard dan analitik harus memprioritaskan keterbacaan angka dan state kosong yang informatif.

Rina menjalankan toko online kecil dan sering kehilangan calon pelanggan karena form ordernya dibuat manual di chat. Ia butuh cara yang lebih rapi untuk mengumpulkan nama, nomor telepon, dan pilihan produk tanpa harus minta bantuan developer.

Dengan FormKita, Rina membuka landing page, daftar, lalu memilih template order form dari dashboard. Dalam beberapa menit ia menambahkan field, mem-publish link publik, dan menempelkan embed code ke websitenya.

Setelah form live, Rina melihat respon masuk di halaman analisis dan tahu produk mana yang paling sering dipilih. Ia menghemat waktu operasional, mendapatkan data lebih rapi, dan bisa mengukur kampanye dengan lebih baik.

User-Centric Metrics

  • 80% pengguna baru berhasil membuat form pertama dalam 10 menit.
  • Minimal 70% pengguna dashboard kembali membuka produk dalam 7 hari.
  • Completion rate form rata-rata mencapai di atas 60% untuk template default.
  • Skor kepuasan pengguna awal minimal 4.3 dari 5.
  • Kurang dari 5% pengguna mengalami error kritis saat publish.

Business Metrics

  • Conversion landing page ke pendaftaran minimal 8% dalam 90 hari.
  • 30% akun baru mem-publish minimal satu form dalam 24 jam.
  • 35% monthly active retention pada bulan ketiga.
  • 20% pengguna aktif menggunakan analitik lebih dari dua kali per minggu.

Technical Metrics

  • Uptime layanan 99.9% per bulan.
  • P95 time to interactive landing page di bawah 2.5 detik.
  • P95 response time dashboard dan editor di bawah 300 ms untuk operasi umum.
  • Tidak lebih dari 1% request autentikasi gagal karena kesalahan sistem.

Tracking Plan

  • view_landing_page
  • click_cta_signup
  • complete_registration
  • create_form
  • add_field_to_form
  • publish_form
  • view_analytics_dashboard

Technical Needs

  • Astro untuk landing page, routing statik, dan optimasi performa awal.
  • Komponen interaktif di dashboard dan editor menggunakan React island atau setara di Astro.
  • GSAP untuk animasi hero dan micro-interaction di landing page.
  • Lenis untuk smooth scrolling pada landing page desktop dan mobile.
  • Auth JS untuk login, register, session handling, dan proteksi route.
  • Backend API terpisah untuk form CRUD, publish flow, submission intake, dan analytics aggregation.
  • Database relasional seperti PostgreSQL untuk form, field, response, versioning, dan audit log.

Integration Points

  • Auth JS provider untuk credential login dan opsi OAuth jika dibutuhkan.
  • PostgreSQL melalui Prisma atau Drizzle sebagai layer akses data.
  • Object storage seperti S3 kompatibel jika ada attachment di masa depan.
  • Email delivery seperti Resend untuk verifikasi dan notifikasi akun.
  • Analytics event pipeline ke PostHog atau Plausible untuk pelacakan produk.

Data Storage & Privacy

  • Simpan data respon form secara terpisah dari data akun untuk memudahkan kontrol akses.
  • Enkripsi data sensitif saat transit dan at rest.
  • Sediakan kebijakan retensi data dan kemampuan hapus akun sesuai GDPR dan CCPA.
  • Batasi akses analitik dan data respon berdasarkan kepemilikan akun atau workspace.
  • Log audit untuk publish, edit, dan delete agar perubahan bisa ditelusuri.

Scalability & Performance

  • Cache landing page statik via CDN untuk performa global yang cepat.
  • Gunakan pagination dan lazy loading pada daftar form dan respon.
  • Pisahkan penulisan submission dari agregasi analitik agar publish dan submit tetap cepat.
  • Siapkan background job untuk rekap metrik harian dan ekspor CSV.

Potential Challenges

  • Drag-and-drop editor bisa terasa kompleks, mitigasinya gunakan template awal dan empty state yang sangat jelas.
  • Analitik real-time dapat membebani database, mitigasinya gunakan agregasi async dan caching.
  • Autentikasi dan session bisa menjadi sumber error, mitigasinya pakai Auth JS dengan flow standar dan testing end-to-end.
  • Perubahan schema form dapat merusak publish lama, mitigasinya gunakan versioning form.
  • Animasi landing page dapat menurunkan performa, mitigasinya batasi efek ke elemen hero dan gunakan optimasi aset.

Team & resourcing - Small team - 2 engineers, 1 designer, part-time PM, and QA support on release week.

Phase 1: MVP Foundation · Weeks 1-3

  • Astro landing page dengan CTA dan konten utama.
  • Auth JS login/register dan proteksi dashboard.
  • Database schema dasar untuk user, form, field, dan draft.

Phase 2: Form Builder and Publish · Weeks 4-6

  • Dashboard daftar form dan statistik ringkas.
  • Editor form drag-and-drop dengan field dasar.
  • Publish link publik dan embed code untuk form live.

Phase 3: Analytics and Polish · Weeks 7-8

  • Halaman analisis respon dengan grafik dan metrik inti.
  • Ekspor CSV dan filter tanggal dasar.
  • Animasi GSAP, smooth scrolling Lenis, dan perbaikan aksesibilitas.

Phase 4: Stability and Growth · Weeks 9-10

  • Optimasi performa, logging, dan monitoring.
  • Template form tambahan dan duplikasi form.
  • Hardening keamanan, validasi edge case, dan final bug fixes.

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

Build a web app called FormKita, a form builder platform with a strong landing page, authentication, dashboard, drag-and-drop form editor, publishing, and analytics.

Use Astro for the landing page and static generation. Use GSAP for tasteful landing page animations and Lenis for smooth scrolling on the landing page. Use Auth.js for login, register, logout, and session protection. Use PostgreSQL with Prisma for the backend data model.

Primary screens and flows:
Landing page with hero, feature sections, CTA, and responsive design
Login and register pages
Dashboard showing list of forms, quick stats, and a create form button
Form editor with drag-and-drop or configurable fields such as text, email, radio, checkbox, select, date, number
Publish flow that generates a public link and embed code
Analytics page showing submissions, charts, completion rate, and recent responses

Data model:
User, Workspace optional, Form, FormVersion, Field, Submission, SubmissionAnswer, PublishRecord, AnalyticsEvent
Support draft and published form versions, autosave, duplicate form, CSV export, and basic date filtering

Implementation requirements:
Keep the landing page performant and visually polished
Make dashboard and editor interactive and accessible
Protect authenticated routes
Add validation, loading states, empty states, and error handling
Use a clean modern UI with responsive layouts and keyboard accessibility
Instrument events for landing CTA clicks, signup completion, form creation, field additions, publish, and analytics view

Deliver a production-ready MVP with sensible defaults, clean folder structure, reusable components, and clear separation between marketing site, app pages, API routes, and database layer.

Business Idea

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: Prompt untuk AI membuatkan PRD