Cara Implementasi Form ke Website

Panduan ini menunjukkan cara memasang Web Form Mailketing ke website atau landing page dengan menempelkan kode HTML. Cara ini tidak butuh plugin atau integrasi tambahan: cukup salin-tempel kode form, dan data pendaftar langsung masuk ke list Mailketing Anda.

Yang Perlu Disiapkan

• Web Form yang sudah dibuat di Mailketing. Belum punya? Ikuti Cara Membuat Form di Mailketing.
• Akses edit ke website atau landing page yang mendukung input HTML (WordPress, Blogger, Scalev, dan sejenisnya).

Langkah 1: Ambil Kode HTML Form

1. Buka menu Form & Template → Web Form.
2. Pada form yang ingin dipakai, klik ikon </> (Ambil Kode HTML) di kolom Aksi. Halaman Get HTML Code terbuka di tab baru.
3. Pilih salah satu dari 2 layout form:
   • Vertical Form Layout: field tersusun ke bawah, cocok untuk sebagian besar website.
   • Horizontal Form Layout: field berjajar ke samping, cocok untuk form ringkas.
4. Klik tombol Copy Code di layout yang Anda pilih.

Pilih layout yang paling sesuai dengan halaman Anda. Di bagian bawah halaman yang sama ada Form Preview untuk melihat tampilan form sebelum dipasang.

Langkah 2: Tempel Kode HTML ke Website

Setelah kode tersalin, tempelkan ke halaman website Anda. Berikut contoh di beberapa platform.

Contoh di WordPress

1. Buka halaman atau postingan yang ingin dipasangi form.
2. Di block editor atau page builder, tambahkan elemen Custom HTML.
3. Tempel kode HTML form Mailketing.
4. Simpan atau publish halaman.

Catatan: Hampir semua page editor WordPress seperti Gutenberg, Elementor, WPBakery, dan lainnya menyediakan elemen Custom HTML, jadi form Mailketing bisa langsung dipakai. Pengguna Elementor Pro juga bisa memakai widget Form bawaan Elementor, lihat Integrasi Form Mailketing ke Elementor Pro.

Contoh di Blogger

1. Buka post atau page yang ingin dipasangi form.
2. Ubah editor ke mode HTML.
3. Tempel kode HTML form Mailketing.
4. Simpan perubahan.

Contoh di Scalev

1. Buka halaman landing page.
2. Tambahkan elemen Custom HTML / Embed Code.
3. Tempel kode HTML form Mailketing.
4. Simpan halaman.

Tampilan editor di Blogger dan Scalev bisa sedikit berbeda tergantung versinya. Intinya sama: selama platform yang Anda pakai mendukung input kode HTML, form Mailketing bisa langsung digunakan.

Tips Mengubah Desain Form

Anda bebas mengubah tampilan form agar serasi dengan website, baik dengan CSS manual maupun dengan bantuan AI seperti ChatGPT. Ada 2 hal yang wajib dijaga:

1. Jangan mengubah form action URL

Atribut action pada tag <form> (berakhiran /webform.php?id=…) mengarah langsung ke sistem Mailketing dan list Anda. Jika diubah, data berisiko tidak masuk ke list.

2. Jangan mengubah id dan name field

Setiap input punya id dan name yang dikenali Mailketing, misalnya:

• email
• first_name
• mobile
• dan field lainnya seperti last_name, city, atau angka ID untuk custom field

Jangan mengubah id dan name tersebut. Yang boleh Anda ubah:

• Teks label
• Placeholder
• Styling (CSS)
• Teks tombol (bawaan: “Berlangganan Sekarang”)

Cara Memastikan Berhasil

1. Buka halaman website yang sudah dipasangi form.
2. Isi form dengan email Anda sendiri, lalu kirim.
3. Pastikan Anda diarahkan ke halaman konfirmasi atau terima kasih sesuai pengaturan form.
4. Cek di Lists & Subscriber → Lihat Semua Subscriber bahwa email Anda sudah masuk ke list.

Pertanyaan yang Sering Diajukan

Data tidak masuk ke list setelah form diisi. Apa yang harus dicek?

Pastikan action form serta id/name field tidak berubah saat Anda mengedit desain. Jika form memakai Double Opt-in, data baru tercatat confirmed setelah link konfirmasi di email diklik.

Saya menambah field baru di Mailketing. Apakah kode di website ikut berubah?

Tidak. Kode yang sudah ditempel tidak berubah sendiri. Ambil ulang kode lewat ikon </>, lalu ganti kode lama di website Anda.

Ringkasan

Dengan embed kode HTML form Mailketing, Anda bisa:

• memakai form tanpa plugin tambahan,
• mengatur penuh desain halaman,
• menghubungkan form langsung ke list subscriber.

Panduan Terkait

• Cara Membuat Form di Mailketing
• Integrasi Form Mailketing ke Elementor Pro
• Integrasi Contact Form 7 ke Mailketing
• Cara Membuat Autoresponder di Mailketing