Pembuat Formulir Pendaftaran: Mendesain Formulir

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

Signup Form Builder adalah editor visual untuk semua formulir pendaftaran dan landing page Maildroppa.

Anda dapat menggunakannya untuk mengatur tata letak, menambahkan teks dan gambar, mengonfigurasi kolom pelanggan, mengubah warna dan font, menetapkan tag, serta menentukan apa yang terjadi setelah seseorang mengirimkan formulir. Kanvas menampilkan hasilnya saat Anda bekerja, jadi Anda tidak perlu menulis kode untuk mendesain pengalaman pendaftaran yang lengkap.

Maildroppa menggunakan builder yang sama untuk empat jenis formulir:

• Landing Pages adalah halaman mandiri lengkap yang Anda publikasikan dan bagikan melalui tautan.
• Embedded Forms ditempatkan langsung di dalam halaman pada situs web Anda.
• Popups muncul di atas situs web Anda dan juga dapat dibuka dari elemen halaman.
• Slide-ins muncul di tepi atau posisi tertentu pada jendela browser.

Panduan ini menjelaskan semua fungsi yang digunakan bersama oleh jenis formulir tersebut. Panduan tertaut menjelaskan pengaturan dan langkah yang hanya khusus untuk masing-masing jenis.

Membuka Signup Form Builder

Buka “Signup Forms” di Maildroppa. Anda kemudian dapat mengeklik “Create Form” untuk membuat Landing Page, Embedded Form, Popup, atau Slide-in baru.

Untuk melanjutkan pekerjaan pada formulir yang sudah ada, klik namanya atau pilih “Edit Form” dari menu tindakan bertanda tiga titik di Signup Forms Overview.

Berikan nama internal yang jelas untuk formulir tersebut. Nama seperti “Berita Utama Homepage”, “Popup Webinar”, atau “Lead Magnet Musim Panas” lebih mudah dikenali nantinya daripada nama umum seperti “Formulir 1”. Nama formulir membantu Anda mengelola formulir di Maildroppa dan tidak otomatis ditampilkan kepada pengunjung.

Memahami Builder

Builder terbagi menjadi empat area utama.

Bilah atas berisi nama formulir dan tindakan utama. Di sini Anda dapat kembali ke ikhtisar, melihat pratinjau pekerjaan, dan menyimpannya. Landing Pages juga menampilkan kontrol draf dan publikasinya di bilah ini.

Sidebar kiri berisi “Layout”, “Content”, dan “Layers”. Gunakan area ini untuk membuat struktur, menambahkan elemen baru, dan mengelola semua yang sudah ditempatkan di kanvas.

Kanvas adalah area kerja utama. Kanvas menampilkan halaman atau formulir saat ini. Klik elemen untuk memilihnya. Anda juga dapat menyeret elemen ke lokasi lain atau menambahkan elemen baru dari sidebar kiri.

Sidebar kanan berisi “Settings” dan “Page settings”. “Settings” mengubah elemen yang dipilih. “Page settings” mengubah latar belakang dan default desain secara keseluruhan.

Pada layar yang lebih kecil, sidebar terbuka sebagai panel menggunakan tombol “Content” dan “Settings”. Fungsi yang tersedia tetap sama.

Memulai dengan Template

Saat membuat formulir, builder menawarkan desain awal untuk jenis formulir yang dipilih. Anda dapat memulai dengan desain kosong, menggunakan formulir standar, atau memilih template siap pakai.

Template menyediakan tata letak awal, warna, tipografi, dan contoh konten. Template tidak membatasi hal-hal yang dapat Anda ubah nantinya. Setelah memilih template, setiap elemen tetap dapat diedit, dipindahkan, diduplikasi, diubah gayanya, atau dihapus.

Setiap jenis formulir memiliki template yang sesuai dengan tujuannya. Misalnya, Landing Pages mencakup desain halaman lengkap untuk Newsletter, Lead Magnet, Webinar, dan Waitlist. Embedded Forms, Popups, dan Slide-ins memiliki desain awal ringkasnya sendiri.

Jika Anda tidak yakin template mana yang harus dipilih, pilih template yang strukturnya paling mendekati tujuan Anda. Mengubah teks, warna, dan gambar biasanya lebih cepat daripada membangun struktur yang sama dari kanvas kosong.

Membuat Tata Letak

Buka “Layout” di sidebar kiri untuk menambahkan baris sel baru. Tata letak yang tersedia meliputi:

• Satu sel
• Dua, tiga, atau empat sel dengan ukuran sama
• Dua sel dengan rasio 2:1
• Dua sel dengan rasio 1:2

Klik tata letak untuk menambahkannya pada posisi penyisipan saat ini, atau seret ke kanvas. Anda kemudian dapat menempatkan konten di dalam setiap sel.

Pilih kotak atau kolom untuk menyesuaikan ukuran, spasi, perataan, latar belakang, batas, dan padding di sidebar kanan. Untuk tata letak multi-kolom, Anda juga dapat mengubah lebar kolom relatif.

Gunakan tata letak untuk membuat urutan baca yang jelas. Satu kolom cocok untuk formulir pendaftaran ringkas. Tata letak dua kolom berguna ketika gambar, daftar manfaat, atau informasi acara perlu ditampilkan di samping formulir pendaftaran.

Menambahkan Konten

Buka “Content” di sidebar kiri untuk menambahkan blok konten individual. Anda dapat mengeklik blok untuk menyisipkannya atau menyeretnya ke posisi yang diinginkan di kanvas.

Builder menyediakan blok konten berikut:

Signup form — Berisi kolom pelanggan dan tombol kirim. Desain memerlukan satu blok signup form sebelum dapat disimpan sebagai formulir yang berfungsi. Setelah blok tersebut tersedia, blok itu tidak lagi ditawarkan sebagai blok konten tambahan.

Text — Menambahkan judul, paragraf, atau teks berformat lainnya.

Image — Menambahkan gambar dari URL, unggahan, atau pustaka media Maildroppa. Anda dapat memberikan teks alternatif, menambahkan tautan, serta mengatur dimensi, rasio aspek, pemotongan, titik fokus, rotasi, dan pembalikan.

Video — Menambahkan video YouTube atau Vimeo, URL embed, atau file video langsung. Anda juga dapat mengonfigurasi gambar pratinjau dan tampilan tombol putar.

List — Menambahkan daftar berpoin atau bernomor. Edit item dan atur warna penanda, spasi, tipografi, serta perataan.

Button — Menambahkan tombol tautan dengan teks, URL, ukuran, lebar, warna, batas, tipografi, dan perataan yang dapat dikonfigurasi.

Social links — Menambahkan ikon tertaut untuk layanan seperti Facebook, Instagram, LinkedIn, TikTok, YouTube, atau situs web Anda.

Subscriber counter — Menampilkan jumlah pelanggan terkonfirmasi saat ini. Anda dapat menambahkan offset, mengubah label, serta mengatur gaya angka dan teks.

Spacer — Menambahkan ruang kosong yang dapat diatur. Spasi desktop dan seluler dapat diatur secara terpisah.

Divider — Menambahkan garis horizontal dengan warna, ketebalan, lebar, gaya, perataan, dan spasi yang dapat dikonfigurasi.

Landing Pages juga menyediakan bagian lengkap yang dapat digunakan kembali. Bagian ini dijelaskan dalam Landing Page guide.

Memilih dan Mengatur Elemen

Klik elemen di kanvas untuk memilihnya. Pengaturannya akan muncul di sidebar kanan.

Kontrol pada atau di dekat elemen yang dipilih memungkinkan Anda memindahkan, menduplikasi, atau menghapusnya. Anda juga dapat menyeret elemen ke sel atau posisi lain. Indikator penempatan menunjukkan lokasi penyisipannya.

Buka “Layers” saat halaman berisi banyak kotak, kolom, dan blok konten bertingkat. Panel Layers menampilkan struktur lengkap dalam sebuah daftar. Dari sana Anda dapat:

• Memilih elemen
• Mengganti namanya agar lebih mudah dikenali
• Memindahkannya ke atas atau ke bawah
• Menyeretnya ke posisi lain
• Mengunci atau membukanya
• Menduplikasinya
• Menghapusnya

Penguncian berguna ketika latar belakang, gambar, atau bagian yang sudah selesai tidak boleh dipindahkan secara tidak sengaja. Buka kunci layer saat Anda ingin mengedit atau mengubah posisinya lagi.

Gunakan “Undo” dan “Redo” di toolbar builder untuk mundur atau maju melalui perubahan desain terbaru.

Mengedit Teks

Klik di dalam elemen teks untuk mengedit konten secara langsung di kanvas. Toolbar teks menyediakan gaya paragraf dan judul, serta opsi pemformatan umum.

Bergantung pada teks yang dipilih, Anda dapat menggunakan huruf tebal, miring, garis bawah, coret, subskrip, superskrip, perataan, daftar berpoin atau bernomor, tautan, dan emoji. Pengaturan teks yang dipilih juga memungkinkan Anda menyesuaikan tipografi dan warna tanpa mengubah elemen teks lainnya.

Gunakan pengaturan tipografi global di “Page settings” ketika semua judul, teks isi, tautan, atau tombol harus memiliki gaya yang konsisten. Gunakan pengaturan elemen yang dipilih ketika hanya satu blok yang perlu memiliki tampilan berbeda.

Mengonfigurasi Signup Form

Pilih blok signup form di kanvas untuk membuka pengaturannya. Bagian yang tersedia mencakup bilah kemajuan, subscriber counter, kolom, tag tersembunyi, kontainer formulir, kolom input, dan tombol kirim.

Kolom Pelanggan

Alamat email adalah kolom utama dalam signup form. Anda juga dapat menambahkan kolom pelanggan yang tersedia di akun Maildroppa Anda.

Untuk setiap kolom, Anda dapat mengubah label dan placeholder, menentukan apakah kolom tersebut wajib diisi, serta memilih apakah label kolom ditampilkan. Kolom dapat diurutkan ulang dengan menyeretnya atau menggunakan kontrol pemindahan.

Tanyakan hanya informasi yang benar-benar Anda perlukan. Formulir yang lebih singkat lebih cepat diisi, sedangkan kolom tambahan berguna ketika informasi tersebut akan digunakan untuk segmentasi atau personalisasi.

Tag Tersembunyi

Tag tersembunyi tidak ditampilkan kepada pengunjung. Saat seseorang mendaftar melalui formulir, Maildroppa otomatis menetapkan tag yang dipilih kepada pelanggan tersebut.

Fitur ini berguna untuk mengidentifikasi sumber atau minat di balik pendaftaran. Misalnya, formulir untuk webinar dapat menerapkan tag “Webinar”, sementara formulir lead magnet dapat menerapkan tag untuk topik yang diunduh.

Bilah Kemajuan

Bilah kemajuan dapat dinonaktifkan atau ditampilkan sebagai persentase atau indikator dua langkah.

Untuk indikator persentase, Anda dapat mengubah teks, warna, ukuran font, ketebalan, dan perataan. Untuk indikator dua langkah, Anda dapat mengedit label untuk kedua langkah serta memilih warna aktif dan tidak aktif.

Indikator kemajuan dapat membantu menjelaskan bahwa pengiriman formulir adalah langkah pertama dan konfirmasi email Double Opt-in adalah langkah kedua.

Subscriber Counter di Dalam Formulir

Signup form dapat menampilkan jumlah pelanggan terkonfirmasi saat ini sebelum atau sesudah tombol kirim.

Anda dapat menambahkan offset, menulis label, memilih posisi, serta menyesuaikan tipografi dan perataan. Offset ditambahkan ke jumlah pelanggan terkonfirmasi yang ditampilkan oleh Maildroppa.

Counter formulir ini berbeda dari blok konten “Subscriber counter” yang berdiri sendiri. Gunakan pengaturan formulir ketika angka tersebut harus terhubung langsung ke area kirim. Gunakan blok konten ketika counter harus muncul di tempat lain dalam desain.

Desain Formulir, Input, dan Tombol

Pengaturan “Signup Form Block” mengontrol kontainer di sekitar kolom, termasuk latar belakang, batas, radius sudut, dan spasinya.

Pengaturan input mengontrol latar belakang kolom, label, teks, placeholder, batas, dan spasi. Tombol kirim memiliki pengaturan terpisah untuk teks, tipografi, warna, batas, dimensi, dan perataannya.

Anda dapat mengeklik bilah kemajuan atau tombol kirim langsung di kanvas untuk segera membuka pengaturan bagian tersebut.

Mengubah Tampilan Keseluruhan

Buka “Page settings” di sidebar kanan untuk mengubah desain secara keseluruhan. Untuk Embedded Forms, Popups, dan Slide-ins, pengaturan ini diterapkan pada kanvas formulir, bukan halaman hosted yang lengkap.

Anda dapat mengonfigurasi latar belakang utama, gambar latar belakang, lebar maksimum, dan spasi seluler. Pengaturan tampilan menentukan default untuk:

• Font isi dan warna teks
• Warna tautan, garis bawah, dan warna saat hover
• Font judul, warna, ketebalan, ukuran, dan tinggi baris
• Tombol
• Kotak, batas, radius sudut, jarak, dan padding
• Padding halaman seluler dan titik saat kolom ditumpuk

Default ini menjaga konsistensi desain. Setiap blok tetap dapat menimpanya jika diperlukan.

Menghubungkan Alur Pendaftaran

Setiap formulir terhubung ke Signup Flow. Signup flow mengontrol perjalanan pelanggan setelah formulir dikirimkan:

• Apa yang langsung dilihat pengunjung setelah mengirimkan formulir
• Email Double Opt-in yang dikirim
• Apa yang terjadi setelah pelanggan mengonfirmasi alamat email

Buka kontrol signup flow di header builder untuk melihat flow yang saat ini ditetapkan. Anda dapat memilih flow lain yang sudah ada, mengedit flow yang dipilih, atau membuat flow baru.

Satu signup flow dapat digunakan oleh beberapa formulir. Jika Anda mengedit flow bersama, perubahan tersebut memengaruhi setiap formulir yang menggunakannya. Karena itu, Maildroppa memungkinkan Anda memilih apakah akan mengedit flow bersama atau membuat salinan terpisah untuk formulir saat ini.

Melihat Pratinjau dan Menyimpan

Klik “Preview” untuk memeriksa desain lengkap dan pengalaman pendaftaran sebelum membuatnya tersedia untuk publik. Pratinjau berguna untuk memeriksa teks panjang, proporsi gambar, urutan kolom, label tombol, dan keseimbangan formulir secara keseluruhan.

Untuk Embedded Forms, Popups, dan Slide-ins, klik “Save changes” saat Anda siap menyimpan versi saat ini.

Landing Pages menggunakan kontrol draf dan publikasi di bilah atas. Landing Pages dapat disimpan tanpa dipublikasikan, dan perubahan pada halaman yang sudah dipublikasikan tetap tidak dipublikasikan sampai Anda menerbitkannya. Alur lengkapnya dijelaskan dalam Building and Publishing a Landing Page.

Setelah menyimpan, kembali ke Signup Forms Overview untuk mengaktifkan dan menyematkan formulir situs web atau mengelola Landing Page yang telah dipublikasikan.

Lanjutkan dengan Jenis Formulir Anda

Pekerjaan desain umum kini selesai. Lanjutkan dengan panduan untuk formulir yang sedang Anda buat:

• Membuat dan memublikasikan Landing Page
• Membuat dan menyematkan Embedded Form
• Mengonfigurasi dan menampilkan Popup
• Mengonfigurasi dan menempatkan Slide-in