Bina dan benamkan borang pendaftaran

Diterbitkan: 16 Julai 2026 · Kemas kini terakhir: 12 September 2026 · Oleh Marcus Biel

Borang terbenam diletakkan terus dalam halaman sedia ada di laman web anda. Borang ini menjadi sebahagian daripada kandungan halaman, bukannya muncul di atas kandungan tersebut.

Borang terbenam sesuai digunakan dalam artikel blog, halaman pendaratan di laman web sendiri, bahagian buletin e-mel, bar sisi dan pengaki. Lokasi anda meletakkan kod borang menentukan tempat borang itu dipaparkan.

Panduan ini menerangkan langkah yang khusus untuk borang terbenam. Fungsi penyuntingan visual yang dikongsi oleh semua jenis borang diterangkan dalam panduan utama pembina borang pendaftaran.

Cipta borang terbenam

Buka “Signup Forms”, klik “Create Form” dan pilih “Embedded Form”. Masukkan nama dalaman yang jelas, kemudian teruskan ke pembina.

Anda juga boleh mengedit borang sedia ada dengan mengklik namanya pada halaman gambaran keseluruhan Signup Forms.

Nama dalaman tidak dipaparkan secara automatik kepada pelawat. Namakan borang mengikut lokasi atau tujuannya, contohnya “Buletin halaman utama”, “Pengaki blog” atau “Kemas kini produk”.

Pilih reka bentuk permulaan

Untuk borang terbenam, anda boleh memilih borang kosong, borang standard atau salah satu daripada empat templat reka bentuk:

• Calm note
• Coupon strip
• Dark editorial
• Minimal blue

Pilih reka bentuk yang paling sesuai dengan ruang dan gaya laman web tempat borang akan dipaparkan. Setiap reka bentuk permulaan boleh diubah sepenuhnya selepas dipilih.

Reka bentuk borang terbenam

Gunakan “Layout” dan “Content” untuk menyusun borang. Borang terbenam boleh mengandungi borang pendaftaran bersama teks sokongan, imej, senarai, butang, pautan media sosial, pembilang pelanggan, ruang kosong atau pemisah.

Untuk bar sisi atau pengaki yang sempit, reka bentuk satu lajur biasanya paling mudah dibaca. Dalam bahagian halaman yang lebih lebar, susun atur dua lajur membolehkan penerangan ringkas atau imej diletakkan di sebelah medan.

Pilih blok borang pendaftaran untuk menetapkan medan pelanggan, medan wajib, label, teg tersembunyi, penunjuk kemajuan dan pembilang pelanggan pilihan. Anda kemudian boleh menggayakan bekas borang, medan dan butang hantar secara berasingan.

Buka “Page settings” untuk menukar latar belakang dan tetapan lalai reka bentuk keseluruhan bagi kanvas borang terbenam. Pertimbangkan juga reka bentuk laman web di sekelilingnya. Latar belakang telus atau ringkas biasanya lebih serasi dengan halaman, manakala latar belakang berkontras membantu tawaran pendaftaran lebih menonjol.

Arahan lengkap tentang susun atur, kandungan, lapisan, medan, teg, tipografi dan penampilan tersedia dalam Menggunakan pembina borang pendaftaran.

Hubungkan aliran pendaftaran

Gunakan kawalan aliran pendaftaran dalam pengepala pembina untuk menyemak perkara yang berlaku selepas borang dihantar, e-mel pengesahan langganan (double opt-in) yang akan dihantar dan paparan yang dilihat pelawat selepas pengesahan.

Anda boleh memilih aliran sedia ada, mengedit aliran yang telah ditetapkan atau mencipta aliran baharu. Jika aliran yang dipilih turut digunakan oleh borang lain, ingat bahawa perubahan pada aliran itu boleh menjejaskan borang tersebut juga.

Pratonton dan simpan

Klik “Preview” untuk menyemak borang lengkap sebelum meletakkannya di laman web. Semak susunan medan, label, ruang untuk mesej ralat, teks butang dan jumlah kandungan sokongan.

Klik “Save changes” untuk menyimpan versi semasa. Kembali ke halaman gambaran keseluruhan Signup Forms apabila anda bersedia untuk membenamkan borang.

Aktifkan borang

Borang terbenam mesti aktif sebelum kodnya boleh digunakan untuk paparan awam.

Jika borang tidak aktif, buka menu tindakan tiga titiknya pada halaman gambaran keseluruhan Signup Forms dan pilih “Activate”. Borang yang aktif memaparkan tindakan “Show Code Snippet”.

Nyahaktifkan borang apabila ia tidak lagi sepatutnya tersedia di laman web anda. Penyahaktifan menjadikan borang tidak tersedia dalam talian tanpa memadam reka bentuk atau data laporan terdahulunya.

Salin kod JavaScript

Klik “Show Code Snippet” dan buka tab “JavaScript”. Maildroppa menyediakan skrip ringkas yang mengandungi ID unik borang.

Kod tersebut menggunakan struktur berikut:

<script async src="https://form.maildroppa.com/md-form-loader.js" data-md-form="[form-id]"></script>

Salin kod lengkap tanpa mengubah alamat skrip atau ID borang.

Pilihan JavaScript memuatkan versi borang terkini yang disimpan melalui persekitaran pelaksanaan borang Maildroppa. Apabila anda mengedit dan menyimpan borang yang sama dalam Maildroppa kemudian, cebisan kod sedia ada masih merujuk kepada ID borang tersebut. Anda tidak perlu mencipta borang baharu hanya untuk menukar teks atau reka bentuknya.

Tambahkan borang pada laman web anda

Tampal skrip pada lokasi halaman tempat borang terbenam sepatutnya dipaparkan.

Langkah tepat bergantung pada sistem laman web anda. Dalam pembina halaman atau sistem pengurusan kandungan, gunakan blok yang menerima HTML tersuai atau kod skrip. Untuk laman web tersuai, tambahkan skrip pada templat atau kod penanda halaman yang berkaitan.

Sesetengah penyunting laman web membuang teg skrip atas sebab keselamatan. Jika borang tidak muncul selepas halaman diterbitkan, semak dahulu sama ada penyunting mengekalkan skrip Maildroppa yang lengkap. Anda mungkin perlu menggunakan ruang khusus untuk kod tersuai dalam sistem tersebut atau bertanya kepada pengurus laman web.

Jangan tampal cebisan kod borang terbenam yang sama beberapa kali pada satu halaman, melainkan anda memang mahu memaparkan borang yang sama di beberapa lokasi dan telah menguji tetapan tersebut.

Gunakan tab HTML

Tab “HTML” menyediakan kod penanda borang yang dijana. Pilihan ini ditujukan untuk pelaksanaan tersuai apabila anda mahu menggunakan HTML yang dirender secara langsung.

Salin kod penanda yang lengkap jika anda memilih kaedah ini. Integrasi HTML tersuai boleh dipengaruhi oleh gaya dan pelaksanaan laman web anda. Oleh itu, uji medan, pengesahan input, penghantaran borang dan aliran pengesahan langganan dengan teliti.

Untuk borang biasa yang diuruskan oleh Maildroppa, cebisan kod JavaScript ialah kaedah integrasi yang lebih ringkas. Ia memuatkan konfigurasi semasa borang awam berdasarkan ID borang.

Uji borang terbenam

Terbitkan atau pratonton halaman laman web yang mengandungi kod tersebut. Kemudian, uji borang seperti seorang pelawat:

1. Pastikan borang muncul di kedudukan yang betul.
2. Lihat halaman pada skrin lebar dan sempit.
3. Lengkapkan setiap medan wajib.
4. Hantar borang dan semak responsnya.
5. Buka e-mel pengesahan langganan (double opt-in).
6. Sahkan alamat e-mel dan semak respons akhir.
7. Pastikan pelanggan dan sebarang teg tersembunyi dipaparkan dengan betul dalam Maildroppa.

Jika borang lebih lebar daripada bekasnya pada laman web, laraskan lebar borang, susun atur lajur, ruang dalaman atau tetapan susunan menegak untuk peranti mudah alih dalam pembina. Elakkan membaiki masalah susun atur dengan mengubah kod yang dijana oleh Maildroppa.

Kemas kini borang terbenam

Buka borang yang sama dalam Maildroppa, buat perubahan, pratonton perubahan tersebut dan klik “Save changes”. Cebisan kod JavaScript pada laman web anda terus menggunakan ID borang yang sama dan memuatkan konfigurasi awam yang disimpan.

Jika borang perlu dikeluarkan buat sementara waktu, nyahaktifkannya melalui halaman gambaran keseluruhan Signup Forms. Jika borang tidak lagi diperlukan, buang juga cebisan kodnya daripada laman web supaya halaman tidak mengandungi kod yang tidak digunakan.