Chapters

Contents

the email tool that makes email marketing simple

Sign Up FreeNo credit card required.
maildroppa-promo-notebookmaildroppa-promo-spaceship

Bina dan Benamkan Borang Pendaftaran

Published: · Last updated: · By

In brief

Pelajari cara mereka bentuk borang terbenam Maildroppa, mengaktifkannya, menyalin kod JavaScript atau HTML, memasangnya di laman web dan mengujinya.

Borang Terbenam diletakkan terus di dalam halaman sedia ada di laman web anda. Borang ini kekal sebagai sebahagian daripada kandungan sekeliling dan bukannya muncul di atasnya.

Borang Terbenam sesuai digunakan dalam artikel blog, halaman pendaratan di laman web sendiri, bahagian surat berita, bar sisi dan pengaki. Lokasi anda menambahkan kod borang menentukan tempat borang itu dipaparkan.

Panduan ini merangkumi langkah-langkah yang khusus untuk Borang Terbenam. Fungsi penyuntingan visual yang umum diterangkan dalam panduan Pembina Borang Pendaftaran.

Pembina Borang Terbenam: pembina lengkap

Mencipta Borang Terbenam

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

Anda juga boleh mengedit borang sedia ada dengan mengklik namanya dalam Gambaran Keseluruhan Signup Forms.

Nama dalaman tidak dipaparkan secara automatik kepada pelawat. Namakan borang berdasarkan lokasi atau tujuannya, contohnya “Homepage Newsletter”, “Blog Footer”, atau “Product Updates”.

Memilih Reka Bentuk Permulaan

Borang Terbenam menawarkan borang kosong, borang standard dan empat templat reka bentuk:

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

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

Pembina Borang Terbenam: templat permulaan

Mereka Bentuk Borang Terbenam

Gunakan “Layout” dan “Content” untuk menyusun borang. Borang Terbenam boleh mengandungi borang pendaftaran bersama teks sokongan, imej, senarai, butang, pautan sosial, kaunter 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 boleh meletakkan penerangan ringkas atau imej di sebelah medan.

Pilih blok borang pendaftaran untuk memilih medan pelanggan, medan wajib, label, tag tersembunyi, penunjuk kemajuan dan kaunter pelanggan pilihan. Anda kemudiannya boleh menggayakan bekas borang, medan dan butang hantar secara berasingan.

Buka “Page settings” untuk menukar latar belakang dan tetapan reka bentuk keseluruhan bagi kanvas Borang Terbenam. Ambil kira laman web sekeliling. Latar belakang telus atau ringkas biasanya lebih menyatu secara semula jadi, manakala latar belakang yang berkontras membantu tawaran pendaftaran lebih menonjol.

Arahan lengkap untuk susun atur, kandungan, lapisan, medan, tag, tipografi dan penampilan terdapat dalam Menggunakan Pembina Borang Pendaftaran.

Menyambungkan Aliran Pendaftaran

Gunakan kawalan aliran pendaftaran dalam pengepala pembina untuk menyemak perkara yang berlaku selepas penghantaran, e-mel Double Opt-in yang dihantar dan perkara yang dilihat pelawat selepas pengesahan.

Anda boleh memilih aliran sedia ada, mengedit aliran yang ditetapkan atau mencipta aliran baharu. Jika aliran yang dipilih dikongsi dengan borang lain, ingat bahawa pengeditannya boleh menjejaskan borang-borang tersebut juga.

Membuat Pratonton dan Menyimpan

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

Klik “Save changes” untuk menyimpan versi semasa. Kembali ke Gambaran Keseluruhan Signup Forms apabila anda bersedia untuk membenamkannya.

Mengaktifkan Borang

Borang Terbenam mesti aktif sebelum kod awamnya boleh digunakan.

Jika borang tidak aktif, buka menu tindakan tiga titiknya dalam Gambaran Keseluruhan Signup Forms dan pilih “Activate”. Borang aktif memaparkan tindakan “Show Code Snippet”.

Nyahaktifkan borang apabila ia tidak lagi patut tersedia di laman web anda. Penyahaktifan menjadikan borang tidak tersedia tanpa memadam reka bentuk atau data laporan terdahulu.

Pembina Borang Terbenam: baris borang terbenam yang aktif

Menyalin Kod JavaScript

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

Kod tersebut mengikut struktur ini:

<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 borang tersimpan semasa melalui masa jalan borang Maildroppa. Apabila anda mengedit dan menyimpan borang yang sama dalam Maildroppa kemudian, coretan sedia ada masih merujuk kepada ID borang tersebut. Anda tidak perlu mencipta borang baharu semata-mata untuk menukar teks atau reka bentuknya.

Pembina Borang Terbenam: dialog benam borang

Menambahkan Borang ke Laman Web Anda

Tampal skrip di lokasi halaman tempat Borang Terbenam itu patut 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. Dalam laman web tersuai, tambahkan skrip pada templat atau penanda halaman yang berkaitan.

Sesetengah penyunting laman web membuang tag 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 bahagian kod tersuai khusus sistem tersebut atau bertanya kepada pihak yang mengurus laman web.

Jangan tampal coretan Borang Terbenam yang sama beberapa kali pada satu halaman melainkan anda memang mahu borang yang sama di beberapa lokasi dan telah menguji persediaan tersebut.

Menggunakan Tab HTML

Tab “HTML” menyediakan penanda borang yang dijana. Pilihan ini bertujuan untuk pelaksanaan tersuai apabila anda mahu bekerja secara langsung dengan HTML yang dipaparkan.

Salin penanda lengkap jika anda memilih kaedah ini. Oleh sebab integrasi HTML tersuai boleh dipengaruhi oleh gaya dan pelaksanaan laman web anda, uji medan, pengesahan, penghantaran dan aliran pengesahan dengan teliti.

Untuk borang yang diuruskan oleh Maildroppa secara biasa, coretan JavaScript ialah integrasi yang lebih ringkas dan memuatkan konfigurasi borang awam semasa berdasarkan IDnya.

Menguji 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 Double Opt-in.
  6. Sahkan alamat tersebut dan semak respons akhir.
  7. Pastikan pelanggan dan sebarang tag tersembunyi muncul dengan betul dalam Maildroppa.

Jika borang lebih lebar daripada bekas laman webnya, laraskan lebar borang, susun atur lajur, jarak dalam atau tetapan susunan mudah alih dalam pembina. Elakkan membaiki masalah susun atur dengan mengubah kod Maildroppa yang dijana.

Mengemas Kini Borang Terbenam

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

Jika borang perlu dibuang buat sementara waktu, nyahaktifkannya daripada Gambaran Keseluruhan Signup Forms. Jika borang itu tidak lagi diperlukan, buang coretan tersebut daripada laman web juga supaya halaman tidak mengandungi kod yang tidak digunakan.

Ready to Send Better Emails?

Stop juggling bloated tools or overpriced plans. Maildroppa offers personal support, GDPR-level privacy, and powerful email marketing - starting free forever.

Sign Up For Free

No credit card required. No time limit.