Cara Menambah Borang Hubungi ke Laman Web Anda (Yang Benar-benar Sampai kepada Anda)

Untuk menambah borang hubungi yang berfungsi, bina borang ringkas (nama, e-mel, mesej), hantarkannya ke laluan pelayan yang mengesahkan input, simpan mesej ke pangkalan data, dan kemudian e-mel pemberitahuan kepada anda melalui pembekal e-mel menggunakan kunci API rahsia. Tambah medan madu tersembunyi dan had kadar untuk menghentikan kebanyakan spam, tunjukkan mesej kejayaan yang jelas, dan uji dari hujung ke hujung pada laman yang diterbitkan. Menyimpan sebelum menghantar e-mel adalah bahagian yang penting: jika e-mel gagal, anda masih ada pertanyaan itu.

Pilihan anda

Jika laman anda sudah mempunyai backend dan pangkalan data — yang sering dimiliki oleh aplikasi yang dibina dengan pembina aplikasi AI — pilihan terakhir ialah yang paling boleh dipercayai dan memastikan pertanyaan kekal di tempat anda boleh melihatnya.

Apa yang ada dalam borang hubungi yang baik

• Medan yang seminimum mungkin. Nama, e-mel, mesej. Tambah senarai juntai bawah subjek (“Jualan”, “Sokongan”, “Lain”) hanya jika anda akan menghalakan mengikut subjek tersebut.
• Label yang jelas di atas setiap medan, bukan sekadar teks placeholder yang hilang.
• Pengesahan yang membantu: “Masukkan alamat e-mel yang sah”, dipaparkan di sebelah medan.
• Keadaan kejayaan yang memberitahu apa yang berlaku seterusnya: “Terima kasih — kami membalas dalam masa satu hari bekerja.”
• Nota privasi yang menyatakan bagaimana anda akan menggunakan butiran itu, dipautkan ke dasar privasi anda.
• Alternatif seperti alamat e-mel atau nombor telefon anda untuk orang yang lebih suka cara itu.

Contoh prompt

Borang asas:

Tambah borang hubungi pada halaman Hubungi dengan nama, e-mel dan mesej (semua wajib, mesej sehingga 2,000 aksara). Hantar ke laluan pelayan yang mengesahkan input, simpan ke jadual contact_messages dengan masa diterima, dan tunjukkan mesej kejayaan: “Terima kasih, kami akan membalas dalam masa satu hari bekerja.” Tunjukkan ralat medan secara sebaris. Pastikan ia berfungsi dengan baik pada telefon.

Pemberitahuan e-mel:

Apabila mesej hubungi disimpan, hantar e-mel pemberitahuan kepada saya di hello@example.com menggunakan Resend dengan kunci dalam RESEND_API_KEY. Tetapkan reply-to kepada e-mel pengirim supaya saya boleh membalas terus. Jika penghantaran gagal, simpan mesej yang telah disimpan dan log ralat tanpa mendedahkan kunci.

Perlindungan spam:

Tambah perlindungan spam pada borang hubungi: medan madu tersembunyi yang mesti kekal kosong, had 5 penghantaran setiap IP sejam pada pelayan, dan tolak mesej dengan lebih daripada 3 pautan. Buang penghantaran madu secara senyap tetapi tetap tunjukkan kejayaan.

Kotak masuk:

Tambah halaman pentadbir yang dilindungi kata laluan yang menyenaraikan mesej hubungi, yang terbaharu dahulu, dengan kotak semak “telah dikendalikan” dan penapis untuk mesej yang belum dikendalikan.

Langkah demi langkah

1. Tentukan ke mana mesej pergi: siapa yang menerima pemberitahuan, dan siapa yang membalas.
2. Bina borang dengan medan di atas, label yang boleh diakses dan input mesra telefon (gunakan jenis input e-mel supaya telefon menunjukkan papan kekunci yang betul).
3. Cipta laluan pelayan. Ia menyemak medan wajib, format e-mel dan had panjang. Jangan sekali-kali percayai pengesahan hanya di pelayar.
4. Simpan ke pangkalan data dahulu. Lihat cara menambah pangkalan data ke aplikasi anda.
5. Sediakan pembekal e-mel. Cipta akaun, sahkan domain penghantaran anda, dan simpan kunci API sebagai rahsia. Cara menghantar e-mel dari aplikasi anda meliputi persediaan domain (SPF, DKIM) dengan terperinci.
6. Hantar pemberitahuan dari pelayan selepas menyimpan. Gunakan domain yang telah disahkan sebagai pengirim dan alamat pelawat sebagai reply-to — jangan hantar “dari” alamat pelawat, kerana ia mungkin ditolak sebagai spoofing.
7. Balasan automatik kepada pelawat adalah pilihan, tetapi pastikan ringkas; balasan automatik kepada alamat spam boleh merosakkan reputasi penghantar anda.
8. Tambah perlindungan spam: madu, had kadar, kemudian semakan seperti CAPTCHA jika perlu.
9. Uji pada laman yang diterbitkan: hantar, semak pangkalan data, semak kotak masuk dan folder spam anda, klik balas.

Menghentikan spam

Borang hubungi menarik bot dalam beberapa hari selepas dilancarkan. Lapiskan pertahanan daripada yang paling kurang mengganggu hingga paling mengganggu:

1. Medan madu. Medan yang tersembunyi daripada manusia; bot mengisinya. Ia tidak menjejaskan pelawat sebenar.
2. Had kadar pada pelayan. Mengehadkan berapa mesej satu alamat boleh hantar dalam satu tempoh.
3. Peraturan kandungan. Tolak mesej yang dipenuhi pautan, atau medan mesej yang kosong atau terlalu panjang.
4. Semakan seperti CAPTCHA, seperti Cloudflare Turnstile atau Google reCAPTCHA. Token mesti disahkan pada pelayan anda; semakan yang hanya berjalan dalam pelayar boleh dilangkau.

Kesilapan biasa

• Menunjukkan “Dihantar!” apabila tiada apa yang dihantar. UI menunjukkan kejayaan sebelum atau tanpa mengira respons pelayan. Sentiasa tunggu pelayan.
• E-mel sahaja, tiada pangkalan data. Satu kunci yang salah konfigurasi dan pertanyaan hilang selama berminggu-minggu tanpa sesiapa perasan.
• Kunci API dalam kod frontend. Sesiapa sahaja boleh menggunakannya untuk menghantar e-mel sebagai anda.
• Domain penghantaran yang belum disahkan. Pemberitahuan masuk ke spam atau tidak pernah tiba.
• Menghantar “dari” e-mel pelawat. Gunakan reply-to.
• Tiada had panjang. Bot menampal blok teks yang besar.
• Tidak pernah menguji laman langsung. Kunci dan domain selalunya berbeza antara pratonton dan pengeluaran.

Senarai semak

• Borang ringkas dengan label yang kelihatan dan ralat yang jelas
• Pengesahan dan had panjang di pelayan
• Setiap mesej disimpan ke pangkalan data
• E-mel pemberitahuan dihantar dari domain yang disahkan, dengan reply-to ditetapkan
• Kunci API e-mel disimpan hanya sebagai rahsia di pelayan
• Madu dan had kadar dipasang
• Mesej kejayaan hanya muncul selepas pelayan mengesahkan
• Nota privasi dipautkan ke dasar privasi anda
• Diuji dari hujung ke hujung pada laman yang diterbitkan, termasuk folder spam

Borang hubungi dalam Mythex

Di Mythex, anda boleh membina keseluruhan ini daripada sembang. Minta borang dan pangkalan data dalam prompt yang sama (atau taip /database) supaya penghantaran kekal. Mythex tidak mempunyai produk penghantaran e-mel terbina dalam, jadi untuk pemberitahuan anda membawa pembekal seperti Resend, SendGrid atau Postmark, tambahkan kuncinya dengan /secrets atau tetapan projek, dan minta ejen menghantar dari pelayan — lihat Hantar e-mel dari aplikasi anda. Sebelum anda bergantung kepadanya, jalankan App Testing (/test) pada borang dalam Preview, kemudian terbitkan dan uji pada URL langsung.

Borang hubungi ialah bahagian penting dalam kebanyakan laman web perniagaan kecil dan halaman pendaratan. Semak senarai semak keselamatan sebelum pelancaran.

Soalan lazim