Buat dan Tampilkan Formulir Popup

Published: 16 Juli 2026 · Last updated: 21 Juli 2026 · By Marcus Biel

Popup ditampilkan di atas konten situs web Anda. Popup menempatkan penawaran pendaftaran langsung dalam pandangan pengunjung, sementara halaman di bawahnya tetap berada di tempatnya.

Popup berguna untuk penawaran buletin, diskon, pendaftaran acara, lead magnet, dan ajakan bertindak terarah lainnya. Karena Popup mengganggu pengalaman halaman yang normal, waktu dan frekuensinya sama pentingnya dengan desain.

Panduan ini menjelaskan pengaturan khusus Popup. Tata letak, blok konten, kolom pelanggan, tag, tipografi, lapisan, dan alur pendaftaran dibahas dalam panduan Signup Form Builder utama.

Membuat Popup

Buka “Signup Forms”, klik “Create Form”, lalu pilih “Popup”. Masukkan nama internal yang jelas dan lanjutkan ke builder.

Anda juga dapat mengedit Popup yang sudah ada dengan mengeklik namanya di Signup Forms Overview.

Gunakan nama yang menjelaskan penawaran atau penempatannya, seperti “Homepage Discount Popup”, “Webinar Registration Popup”, atau “Guide Download Popup”. Nama internal tidak otomatis ditampilkan kepada pengunjung.

Memilih Template Popup

Popup menyediakan formulir kosong, formulir standar, dan empat template yang telah didesain:

• Clean discount
• Warm guide
• Dark webinar
• Soft community

Pilih template yang ukuran dan struktur kontennya sesuai dengan penawaran. Semua teks, kolom, warna, gambar, jarak, dan tata letak dapat diubah setelahnya.

Mendesain Popup

Gunakan builder visual untuk menata Popup. Anda dapat menggabungkan formulir pendaftaran dengan teks, gambar, video, daftar, tombol, tautan sosial, penghitung pelanggan, spacer, dan pemisah.

Buat pesan utama cukup singkat agar dapat langsung dipahami. Judul yang jelas, satu penjelasan singkat, dan tombol kirim yang spesifik biasanya lebih efektif daripada beberapa pesan yang saling bersaing.

Pilih blok signup form untuk mengonfigurasi kolom, informasi wajib, tag tersembunyi, indikator progres, penghitung pelanggan, input, dan tombol kirim. Buka “Page settings” untuk mengubah latar belakang Popup secara keseluruhan dan default tampilannya.

Popup muncul di atas situs web dengan kontrol tutup. Sisakan ruang visual yang cukup di sekitar teks dan kolom penting agar formulir tetap mudah digunakan pada layar kecil.

Mengonfigurasi Perilaku Popup

Pilih blok signup form dan buka “Widget Settings”. Bagian ini mengatur kapan Popup ditampilkan dan seberapa sering pengunjung dapat melihatnya.

Display Delay

“Display Delay” menentukan berapa detik Maildroppa menunggu sebelum menampilkan Popup di halaman situs web yang disematkan.

Masukkan 0 untuk menampilkannya tanpa penundaan tambahan. Gunakan nilai yang lebih besar jika pengunjung perlu waktu untuk membaca halaman sebelum penawaran muncul. Builder menerima penundaan hingga 86.400 detik.

Pilih penundaan berdasarkan halaman tersebut. Penundaan singkat mungkin sesuai untuk halaman kampanye yang terfokus, sedangkan penundaan lebih lama dapat terasa tidak terlalu mengganggu dalam sebuah artikel.

Display Frequency

“Display Frequency” mengatur periode setelah Popup dapat ditampilkan kembali kepada pengunjung yang sama. Opsi yang tersedia adalah:

• Always
• Once per hour
• Once per day
• Once per week
• Once per month

Gunakan “Always” dengan hati-hati. Popup yang berulang kali mengganggu pengunjung yang sama dapat membuat frustrasi. Frekuensi harian atau mingguan sering kali menjadi titik awal yang lebih baik untuk penawaran situs web umum.

Frekuensi disimpan di browser pengunjung. Oleh karena itu, pengujian di browser lain, jendela penjelajahan pribadi, atau penyimpanan browser yang telah dihapus dapat menghasilkan hasil yang berbeda.

Menggunakan Exit Intent

Aktifkan “Exit Intent Popup” jika Popup harus dibuka setelah pengunjung menggerakkan pointer keluar dari area halaman, yang menunjukkan bahwa mereka mungkin akan meninggalkan halaman.

Saat exit intent diaktifkan, Popup menunggu perilaku ini alih-alih mengikuti tampilan tertunda normal. Frekuensi tampilan yang dipilih tetap mencegah Popup ditampilkan kembali terlalu cepat.

Exit intent didasarkan pada pergerakan pointer dan karena itu terutama relevan pada browser desktop dan laptop. Perangkat sentuh tidak memberikan sinyal keluar yang sama. Selalu pastikan pengunjung seluler tetap dapat menemukan penawaran pendaftaran Anda melalui halaman itu sendiri atau formulir lain yang sesuai.

Membuka Popup Secara Manual dari Elemen Halaman

Popup dapat terbuka saat pengunjung mengeklik tombol, gambar, atau tautan tertentu di situs web Anda. Ini adalah pemicu klik manual. Fitur ini berbeda dari “Exit Intent Popup”, yang merespons saat pengunjung menggerakkan pointer keluar dari halaman.

Konfigurasikan dan pasang pemicu klik manual sebagai berikut:

1. Buka Popup di Signup Form Builder.
2. Klik blok signup form pada kanvas dan buka “Settings” di sebelah kanan.
3. Luaskan “Widget Settings” dan aktifkan “Open popup when a customer clicks a page element”.
4. Klik “Save changes”.
5. Kembali ke Signup Forms Overview dan aktifkan Popup jika sedang tidak aktif.
6. Klik “Show Code Snippet” pada baris Popup tersebut.

Dialog tersebut berisi dua nilai yang diperlukan di situs web Anda:

1. Salin seluruh kode dari tab “JavaScript” dan tambahkan ke halaman situs web tempat Popup harus tersedia.
2. Di bawah kode, salin ID yang ditampilkan di bawah “Add this ID to element from which you want to manually trigger Popup”.
3. Tambahkan nilai tersebut persis ke atribut id tombol, gambar, atau tautan yang harus membuka Popup.

ID mengikuti format berikut:

maildroppa-popup-btn-[form-id]

Contoh:

<button id="maildroppa-popup-btn-[form-id]">Get the guide</button>

JavaScript memuat Popup. ID menghubungkan Popup ke elemen halaman yang dipilih. Keduanya harus ada pada halaman yang sama dan telah dipublikasikan. Saat pengunjung mengeklik elemen dengan ID tersebut, skrip Maildroppa membuka Popup.

Jika tombol situs web Anda sudah memiliki ID dari sistem Popup lain, ganti ID tersebut dengan ID pemicu Maildroppa saat Maildroppa harus menangani klik tersebut. Jangan menempatkan Popup Maildroppa di dalam Popup kedua yang disediakan oleh builder situs web Anda.

Gunakan setiap ID HTML hanya sekali per halaman. Jika beberapa elemen harus membuka Popup yang sama, minta orang yang mengimplementasikan situs web untuk menghubungkan elemen-elemen tersebut tanpa menggandakan ID yang sama.

Menghubungkan Alur Pendaftaran

Tinjau alur pendaftaran yang ditetapkan pada header builder. Alur ini mengontrol respons pengiriman langsung, email Double Opt-in, dan hasil setelah konfirmasi.

Anda dapat memilih alur yang sudah ada, mengeditnya, atau membuat alur terpisah untuk Popup ini. Alur khusus berguna jika penawaran memerlukan pesan konfirmasi atau pengiriman lead magnet sendiri.

Mempratinjau dan Menyimpan

Klik “Preview” untuk memeriksa desain dan perilaku Popup tanpa mengubah versi yang digunakan di situs web Anda. Tinjau tata letak, kontrol tutup, urutan kolom, ruang validasi, dan respons pengiriman.

Klik “Save changes” saat Popup sudah siap. Kemudian kembali ke Signup Forms Overview.

Mengaktifkan dan Menyematkan Popup Secara Otomatis

Aktifkan Popup dari menu tindakan tiga titik jika belum aktif. Kemudian klik “Show Code Snippet” dan salin seluruh kode dari tab “JavaScript”.

Tambahkan skrip ke setiap halaman situs web tempat Popup harus tersedia. Kode tersebut berisi ID formulir unik Popup dan memuat konfigurasi tersimpan terkininya.

Tab “HTML” menyediakan markup yang dihasilkan untuk implementasi khusus. Jika menggunakannya, uji semua perilaku dan langkah pengiriman dengan cermat karena kode dan gaya situs web Anda dapat memengaruhi hasilnya.

Bagian ini berlaku jika Popup harus terbuka secara otomatis berdasarkan penundaan tampilan atau perilaku exit intent. Untuk tombol, gambar, atau tautan yang membuka Popup saat diklik, ikuti

.

Untuk petunjuk penyematan umum, lihat Membangun dan Menyematkan Formulir Tersemat.

Menguji Popup di Situs Web Anda

Uji Popup di halaman situs web yang sebenarnya setelah menambahkan kode:

1. Periksa penundaan yang dikonfigurasi.
2. Uji tombol tutup dan klik di luar formulir.
3. Jika diaktifkan, gerakkan pointer keluar dari halaman untuk menguji exit intent.
4. Jika diaktifkan, klik elemen halaman yang dikonfigurasi untuk menguji pemicu manual.
5. Periksa tata letak pada layar yang sempit.
6. Kirim formulir dan selesaikan proses Double Opt-in.
7. Verifikasi pelanggan dan tag tersembunyi di Maildroppa.

Pengaturan frekuensi dapat mencegah Popup muncul kembali selama pengujian berulang. Gunakan jendela penjelajahan pribadi atau hapus penyimpanan browser yang relevan saat memerlukan kunjungan pengujian yang bersih.

Memperbarui atau Menonaktifkan Popup

Untuk memperbarui Popup, buka di Maildroppa, edit desain atau perilakunya, pratinjau, lalu klik “Save changes”. Cuplikan JavaScript akan tetap menggunakan ID formulir yang sama.

Untuk berhenti menampilkannya sementara, pilih “Deactivate” dari menu tindakan. Penonaktifan mempertahankan Popup dan data laporan sebelumnya. Hapus juga skrip atau elemen pemicu dari situs web jika tidak lagi diperlukan.