Cara Menambahkan Formulir Kontak ke Situs Web Anda (yang Benar-Benar Sampai ke Anda)

Untuk menambahkan formulir kontak yang berfungsi, buat formulir singkat (nama, email, pesan), kirim ke rute server yang memvalidasi input, simpan pesan ke basis data, lalu kirim notifikasi email kepada Anda melalui penyedia email menggunakan kunci API rahasia. Tambahkan kolom honeypot tersembunyi dan pembatasan laju untuk menghentikan sebagian besar spam, tampilkan pesan sukses yang jelas, dan uji dari awal sampai akhir di situs yang sudah terbit. Menyimpan sebelum mengirim email adalah bagian terpenting: jika email gagal, pertanyaan tetap tersimpan.

Pilihan Anda

Jika situs Anda sudah memiliki backend dan basis data — yang sering dimiliki aplikasi yang dibangun dengan pembuat aplikasi AI — pilihan terakhir adalah yang paling andal dan menjaga pertanyaan tetap berada di tempat yang bisa Anda lihat.

Apa saja yang ada di formulir kontak yang baik

• Kolom sesedikit mungkin. Nama, email, pesan. Tambahkan dropdown subjek (“Penjualan”, “Dukungan”, “Lainnya”) hanya jika Anda akan mengarahkan pesan berdasarkan subjek itu.
• Label yang jelas di atas setiap kolom, bukan sekadar placeholder yang hilang saat diketik.
• Validasi yang membantu: “Masukkan alamat email yang valid”, ditampilkan di dekat kolomnya.
• Kondisi sukses yang menjelaskan apa yang terjadi selanjutnya: “Terima kasih — kami membalas dalam satu hari kerja.”
• Catatan privasi yang menjelaskan bagaimana Anda akan memakai data tersebut, dengan tautan ke kebijakan privasi Anda.
• Cadangan seperti alamat email atau nomor telepon Anda bagi orang yang lebih suka cara itu.

Contoh prompt

Formulir dasar:

Tambahkan formulir kontak di halaman Kontak dengan nama, email, dan pesan (semuanya wajib, pesan maksimal 2.000 karakter). Kirim ke rute server yang memvalidasi input, menyimpannya ke tabel contact_messages beserta waktu diterima, dan menampilkan pesan sukses: “Terima kasih, kami akan membalas dalam satu hari kerja.” Tampilkan error kolom secara inline. Pastikan berfungsi dengan baik di ponsel.

Notifikasi email:

Ketika pesan kontak disimpan, kirim email notifikasi kepada saya di hello@example.com menggunakan Resend dengan kunci di RESEND_API_KEY. Atur reply-to ke email pengirim agar saya bisa membalas langsung. Jika pengiriman gagal, simpan pesan yang sudah tersimpan dan catat error-nya tanpa menampilkan kunci.

Perlindungan spam:

Tambahkan perlindungan spam ke formulir kontak: kolom honeypot tersembunyi yang harus tetap kosong, batas 5 pengiriman per IP per jam di server, dan tolak pesan dengan lebih dari 3 tautan. Abaikan diam-diam pengiriman honeypot, tetapi tetap tampilkan pesan sukses.

Kotak masuk:

Tambahkan halaman admin yang dilindungi kata sandi yang mencantumkan pesan kontak, yang terbaru di atas, dengan kotak centang “sudah ditangani” dan filter untuk pesan yang belum ditangani.

Langkah demi langkah

1. Tentukan ke mana pesan dikirim: siapa yang menerima notifikasi, dan siapa yang membalas.
2. Bangun formulirnya dengan kolom di atas, label yang dapat diakses, dan kolom input yang ramah ponsel (gunakan tipe input email agar ponsel menampilkan keyboard yang tepat).
3. Buat rute server. Rute ini memeriksa kolom wajib, format email, dan batas panjang. Jangan pernah hanya mengandalkan validasi di browser.
4. Simpan ke basis data lebih dulu. Lihat cara menambahkan basis data ke aplikasi Anda.
5. Siapkan penyedia email. Buat akun, verifikasi domain pengirim Anda, dan simpan kunci API sebagai rahasia. Cara mengirim email dari aplikasi Anda membahas pengaturan domain (SPF, DKIM) secara rinci.
6. Kirim notifikasi dari server setelah penyimpanan. Gunakan domain Anda yang sudah terverifikasi sebagai pengirim dan alamat pengunjung sebagai reply-to — jangan mengirim “dari” alamat pengunjung, karena kemungkinan akan ditolak sebagai pemalsuan.
7. Opsional, kirim balasan otomatis kepada pengunjung, tetapi buat singkat; balasan otomatis ke alamat spam bisa merusak reputasi pengirim Anda.
8. Tambahkan perlindungan spam: honeypot, pembatasan laju, lalu pemeriksaan bergaya CAPTCHA jika diperlukan.
9. Uji di situs yang sudah terbit: kirim, periksa basis datanya, periksa kotak masuk dan folder spam Anda, klik balas.

Menghentikan spam

Formulir kontak menarik bot dalam hitungan hari setelah dipublikasikan. Tambahkan lapisan pertahanan dari yang paling ringan hingga yang paling mengganggu:

1. Kolom honeypot. Kolom yang disembunyikan dari manusia; bot akan mengisinya. Ini tidak merugikan pengunjung sungguhan sama sekali.
2. Pembatasan laju di server. Membatasi berapa banyak pesan yang bisa dikirim satu alamat dalam satu periode.
3. Aturan konten. Tolak pesan yang penuh tautan, atau kolom pesan yang kosong atau terlalu panjang secara tidak masuk akal.
4. Pemeriksaan bergaya CAPTCHA, seperti Cloudflare Turnstile atau Google reCAPTCHA. Tokennya harus diverifikasi di server Anda; pemeriksaan yang hanya berjalan di browser bisa dilewati.

Kesalahan umum

• Menampilkan “Terkirim!” padahal tidak ada yang terkirim. Antarmuka menampilkan sukses sebelum atau tanpa menunggu respons server. Selalu tunggu konfirmasi dari server.
• Hanya email, tanpa basis data. Satu kunci yang salah konfigurasi dan pertanyaan hilang selama berminggu-minggu tanpa ada yang menyadarinya.
• Kunci API di kode frontend. Siapa pun bisa memakainya untuk mengirim email atas nama Anda.
• Domain pengirim yang belum diverifikasi. Notifikasi masuk ke spam atau tidak pernah tiba.
• Mengirim “dari” email pengunjung. Gunakan reply-to.
• Tanpa batas panjang. Bot menempelkan blok teks yang sangat panjang.
• Tidak pernah menguji situs yang sudah aktif. Kunci dan domain sering berbeda antara pratinjau dan produksi.

Daftar periksa

• Formulir singkat dengan label yang terlihat dan error yang jelas
• Validasi di server dan batas panjang
• Setiap pesan disimpan ke basis data
• Email notifikasi dikirim dari domain yang terverifikasi, dengan reply-to diatur
• Kunci API email hanya disimpan sebagai rahasia sisi server
• Honeypot dan pembatasan laju sudah terpasang
• Pesan sukses muncul hanya setelah server mengonfirmasi
• Catatan privasi menautkan ke kebijakan privasi Anda
• Diuji dari awal sampai akhir di situs yang sudah terbit, termasuk folder spam

Formulir kontak di Mythex

Di Mythex, Anda bisa membangun semuanya dari chat. Mintalah formulir dan basis data dalam prompt yang sama (atau ketik /database) agar pengiriman tersimpan. Mythex tidak memiliki produk pengiriman email bawaan, jadi untuk notifikasi Anda membawa penyedia seperti Resend, SendGrid, atau Postmark, menambahkan kuncinya dengan /secrets atau pengaturan proyek, lalu minta agen mengirim dari server — lihat Kirim email dari aplikasi Anda. Sebelum Anda mengandalkannya, jalankan App Testing (/test) terhadap formulir di Preview, lalu terbitkan dan uji di URL langsung.

Formulir kontak adalah bagian penting dari sebagian besar situs web bisnis kecil dan halaman arahan. Periksa daftar periksa keamanan sebelum peluncuran.

Pertanyaan