Cara Membuat Form Builder

Form builder memungkinkan orang merancang form mereka sendiri — memilih field, mengatur aturan, lalu mempublikasikan tautan — dan kemudian mengumpulkan pengirimannya. Di baliknya ada tiga bagian: definisi form yang disimpan sebagai data, renderer yang mengubah definisi menjadi form yang berfungsi, dan penyimpanan pengiriman dengan notifikasi dan ekspor. Sebelum membuatnya, pastikan Anda benar-benar membutuhkannya: jika hanya perlu form kontak atau form lamaran, buat form itu langsung dan lewati builder sepenuhnya.

Apakah Anda benar-benar membutuhkan builder?

Situasi Anda	Buat ini
Satu atau dua form yang jarang berubah	Form itu sendiri. Lihat cara menambahkan form kontak.
Banyak form, dibuat oleh non-developer di tim Anda	Form builder internal
Form menjadi bagian dari produk Anda (pelanggan membuat form)	Form builder dengan akun, batasan, dan embed
Anda terutama ingin hasil survei dan grafik	Aplikasi survei

Builder adalah proyek yang lebih besar daripada sebuah form, karena setiap tipe field harus berfungsi di editor, form publik, validasi, penyimpanan, notifikasi, dan ekspor.

Apa saja yang dibutuhkan form builder

Definisi form

Simpan setiap form sebagai daftar field, disimpan sebagai data terstruktur (JSON di kolom Postgres berfungsi baik). Sebuah field bisa terlihat seperti ini:

id — ID stabil yang tidak pernah berubah, bahkan jika label berubah
type — teks, email, angka, teks panjang, pilihan, kotak centang, tanggal, file
label dan teks bantuan
wajib, min / maks, jenis file yang diizinkan
opsi untuk field pilihan
urutan, dan opsional kondisi ("tampilkan hanya jika field X bernilai Y")

Editor mengubah daftar ini; form publik membacanya. Itulah intinya: tanpa kode baru untuk setiap form.

Pengiriman

Pengiriman — form, versi form, waktu pengiriman, jawaban berdasarkan ID field, status (baru, sudah dibaca, diarsipkan).
File — file yang diunggah disimpan di penyimpanan file, dengan pengiriman hanya menyimpan referensinya, tidak pernah di dalam baris database.

Halaman

Daftar form dengan jumlah pengiriman.
Editor — tambah, urutkan ulang, dan atur field, dengan pratinjau langsung di sebelahnya.
Pengaturan — pesan konfirmasi atau pengalihan, email notifikasi, tanggal buka/tutup, batas pengiriman.
Form publik di tautannya sendiri, dan versi yang bisa di-embed untuk website lain.
Tabel pengiriman dengan pencarian, status, tampilan detail, dan ekspor CSV.

Keputusan dan trade-off

Versioning. Seseorang pasti akan mengganti nama "Telepon" menjadi "Nomor seluler" setelah 200 pengiriman. Jika jawaban disimpan berdasarkan ID field dan setiap pengiriman mencatat versi form, pengiriman lama tetap tampil dengan benar. Tanpa itu, data Anda diam-diam kacau.

Validasi berjalan dua kali. Periksa field di browser untuk umpan balik cepat, dan lagi di server, karena siapa pun bisa mengirim data langsung ke endpoint Anda. Pemeriksaan di server yang menentukan.

Unggahan file. Ini membawa biaya penyimpanan, batas ukuran, pemeriksaan jenis file, dan pertanyaan privasi (CV, KTP, form medis). Batasi jenis dan ukuran, dan jadikan file yang diunggah privat secara default, hanya bisa dibaca oleh pemilik form. Lihat cara menambahkan unggahan file ke aplikasi Anda.

Notifikasi. "Kirimi saya email saat ada yang mengirim" adalah hal yang wajar. Ini membutuhkan penyedia email dan kunci API; lihat cara mengirim email dari aplikasi Anda.

Spam. Form publik akan ditemukan oleh bot. Gunakan field honeypot (tersembunyi dari orang, diisi oleh bot), batas laju per IP, validasi di sisi server, dan jika perlu, layanan CAPTCHA.

Embed. Embed iframe adalah cara paling sederhana dan paling aman untuk menaruh form di website orang lain. Embed berbasis script terlihat lebih menyatu, tetapi lebih sulit dibangun dan diamankan.

Logika kondisional. "Tampilkan field ini hanya jika…" sangat populer dan melipatgandakan pengujian. Tambahkan setelah dasar-dasarnya kokoh.

Prompt pertama yang berhasil

Buatkan aplikasi web form builder untuk tim saya. Pengguna yang sudah login membuat form di editor dengan pratinjau langsung. Tipe field: teks pendek, teks panjang, email, angka, tanggal, pilihan tunggal, kotak centang, dan unggah file. Setiap field punya ID stabil, label, teks bantuan, penanda wajib, dan aturan khusus tipe (min/maks, opsi, jenis file yang diizinkan, dan batas ukuran 10 MB). Simpan definisi form sebagai JSON dengan nomor versi yang bertambah setiap kali dipublikasikan. Setiap form mendapatkan tautan publik dan kode embed iframe. Validasi pengiriman di server terhadap versi yang dipublikasikan, simpan jawaban berdasarkan ID field beserta versi form, dan simpan file yang diunggah di penyimpanan file privat. Tambahkan field honeypot tersembunyi dan batas laju per IP. Pemilik form melihat tabel pengiriman dengan status (baru, sudah dibaca, diarsipkan), tampilan detail, dan ekspor CSV. Simpan semuanya di database. Tinggalkan logika kondisional dan notifikasi email untuk nanti.

Langkah membangun

Editor dan definisi. Buat form dengan setiap tipe field dan lihat JSON yang tersimpan bersama agen. Apakah sudah bersih dan stabil?
Form publik. Isi di ponsel. Periksa pesan validasi dan layar konfirmasi.
Validasi server. Minta agen mengirim pengiriman yang melanggar aturan langsung ke server, melewati halaman. Pengiriman itu seharusnya ditolak.
Versioning. Ganti nama dan urutkan ulang field setelah beberapa pengiriman. Pengiriman lama seharusnya tetap menampilkan jawaban yang benar.
Unggahan. Coba file yang terlalu besar dan file dengan jenis yang salah. Pastikan orang asing tidak bisa membuka file yang diunggah dengan menebak tautannya.
Tabel pengiriman dan ekspor. Periksa ekspor CSV dengan koma, baris baru, dan karakter beraksen dalam jawaban.
Notifikasi, embed, logika. Tambahkan satu per satu.

Kesalahan umum

Menyimpan jawaban berdasarkan label. Label berubah. Gunakan ID field yang stabil.
Validasi hanya di browser. Itu hanya kenyamanan, bukan perlindungan.
File yang diunggah bersifat publik. Form sering mengumpulkan dokumen yang tidak ingin dilihat orang lain.
Tanpa perlindungan spam. Form publik bisa penuh dengan sampah dalam beberapa hari.
Membangun builder untuk satu form. Buat saja form-nya.
Pengiriman tanpa batas pada produk publik. Jika pelanggan membuat form, tetapkan batas per paket, atau satu form populer bisa membengkakkan tagihan hosting Anda.

Kapan produk siap pakai lebih baik

Alat form berbasis hosting sangat baik dan murah untuk sebagian besar kebutuhan. Mereka sudah menyelesaikan embed, spam, pembayaran, integrasi, dan aksesibilitas di puluhan tipe field. Jika tim Anda hanya butuh form, gunakan salah satunya — lihat alternatif Typeform dan alternatif Google Forms.

Bangun sendiri ketika pengiriman perlu berada di samping data Anda sendiri (mengisi CRM atau portal klien yang Anda jalankan), ketika Anda membutuhkan alur kerja setelah pengiriman yang tidak bisa dilakukan alat tersebut, ketika lokasi atau kepemilikan data menjadi syarat, atau ketika form adalah fitur dari produk yang Anda jual.

Membangunnya dengan Mythex

Di Mythex Anda mendeskripsikan builder dalam chat dan menguji editor serta form publik berdampingan di pratinjau langsung. Mythex menambahkan database khusus untuk definisi form dan pengiriman, dan mengaktifkan penyimpanan file secara otomatis ketika aplikasi Anda membutuhkan unggahan (dibatasi 1 GB di paket Free). Email notifikasi dikirim lewat penyedia yang Anda hubungkan dengan kunci Anda sendiri. Publikasikan aplikasi ke tautan mythex.ai, atau domain Anda sendiri di Pro, dan tautan form publik akan berfungsi dari sana.

Pertanyaan

Bagaimana form builder menyimpan form?

Biasanya sebagai definisi form: daftar field, masing-masing dengan tipe, label, aturan validasi, dan urutan, disimpan sebagai data terstruktur seperti JSON. Definisi yang sama menggerakkan editor dan form publik, sehingga menambah field tidak membutuhkan kode baru.

Bagaimana pengiriman form sebaiknya disimpan?

Simpan setiap pengiriman dengan referensi ke versi form saat dikirim, dan jawabannya dikunci berdasarkan ID field. Dengan begitu, mengganti nama atau mengurutkan ulang field nanti tidak merusak pengiriman lama.

Bagaimana cara menghentikan spam di form publik?

Kombinasikan field honeypot tersembunyi, pembatasan laju per alamat IP, validasi di sisi server, dan jika spam masih berlanjut, layanan CAPTCHA. Jangan pernah mengandalkan pengecekan yang hanya berjalan di browser.

Apakah saya butuh form builder lengkap atau cukup form biasa?

Jika Anda hanya butuh satu atau dua form tetap, buat langsung form tersebut — jauh lebih sederhana. Form builder layak dibuat ketika orang non-teknis perlu membuat dan mengubah banyak form tanpa meminta bantuan developer.