Komponen Order Form — Form Checkout Terintegrasi Payment

Apa itu: Komponen checkout all-in-one — calon pembeli bisa isi data, pilih varian/kuantitas, dan bayar langsung dari landing page, tanpa pindah halaman. Kapan pakai: Pada setiap landing page yang menjual produk atau menerima lead. Ini adalah komponen paling penting di landing page kamu — semua konversi bermuara di sini.

Apa itu Order Form?

Order Form adalah komponen checkout yang terintegrasi dengan sistem produk dan payment gateway Konvert. Cukup pilih produk yang sudah kamu buat di katalog, dan Order Form akan otomatis menampilkan harga, varian, dan ringkasan pesanan.

Setelah pembeli submit dan bayar, Konvert mencatat order secara otomatis, memicu pixel event, dan bisa mengirim konfirmasi via WhatsApp atau email.

Kapan Pakai Order Form?

• Jual produk fisik — dengan varian (ukuran, warna) dan selector kuantitas
• Produk digital / kelas online — tanpa varian, langsung ke payment
• Lead capture — form isian data saja, tanpa payment (success redirect ke halaman terima kasih)
• Bundle — pilih produk bundle dari katalog (fitur paket belum tersedia di semua toko)

Alur Kerja Order Form

flowchart TD
    A[Pembeli mengisi form\nNama, Email, No. HP] --> B[Klik Submit]
    B --> C{Submit Action}
    C -->|Payment| D[Redirect ke halaman\npembayaran]
    C -->|Redirect to URL| E[Redirect ke URL\nyang ditentukan]
    D --> F{Hasil Pembayaran}
    F -->|Sukses| G[Success State]
    F -->|Gagal/Batal| H[Kembali ke form\ndengan pesan error]
    G --> I[Kirim konfirmasi email]
    G --> J[Tampilkan tombol WhatsApp\nopcional]
    G --> K[Pixel Event: Purchase]

Properties

Produk

Property	Tipe	Penjelasan
Product	Dropdown	Pilih produk dari katalog. Wajib diisi sebelum form bisa berfungsi.

Product Image

Property	Tipe	Default	Penjelasan
Show Product Image	Toggle	Off	Tampilkan foto produk di atas form
Image Size	Angka (px)	200	Ukuran foto produk saat ditampilkan

Foto produk yang ditampilkan diambil dari data produk di katalog. Gunakan fitur ini untuk memperkuat keyakinan pembeli tepat saat mereka mengisi form.

Form Fields

Property	Tipe	Default	Penjelasan
Show Notes Field	Toggle	Off	Tampilkan kolom catatan opsional untuk pembeli
Notes Required	Toggle	Off	Jadikan kolom catatan wajib diisi

Kolom catatan berguna untuk produk yang butuh instruksi khusus dari pembeli — misalnya ukuran nama untuk sablon, atau alamat pengiriman alternatif.

Quantity

Property	Tipe	Default	Penjelasan
Enable Quantity Selector	Toggle	Off	Tampilkan +/- selector jumlah item
Minimum	Angka	1	Minimum kuantitas yang bisa dipilih
Maximum	Angka	10	Maksimum kuantitas yang bisa dipilih
Default	Angka	1	Kuantitas awal saat form dibuka

Variants

Property	Tipe	Default	Penjelasan
Show Variants	Toggle	Off	Tampilkan pilihan varian produk
Variant Style	Pilihan	Dropdown	Cara varian ditampilkan: Dropdown, Buttons, atau Cards

Varian yang ditampilkan diambil dari konfigurasi varian produk di katalog. Kalau produk tidak punya varian, properti ini tidak berpengaruh.

Variant Style	Tampilan	Cocok untuk
Dropdown	Daftar pilihan dropdown <select>	Banyak varian (5+) atau nama varian panjang
Buttons	Tombol-tombol horizontal	2–5 varian, nama pendek (S/M/L atau Hitam/Putih)
Cards	Setiap varian sebagai kartu dengan nama dan harga	Varian dengan perbedaan harga signifikan

Order Summary

Property	Tipe	Default	Penjelasan
Show Order Summary	Toggle	Off	Tampilkan ringkasan pesanan (nama produk, harga, total)

Ringkasan pesanan membantu pembeli memastikan pilihan mereka sebelum bayar — terutama berguna kalau ada multiple varian atau quantity selector.

Discount Code

Property	Tipe	Default	Penjelasan
Show Discount Code Field	Toggle	Off	Tampilkan kolom input kode diskon

Aktifkan ini kalau kamu punya kampanye kupon aktif. (Fitur diskon/kupon belum tersedia di semua toko.)

Submit Button

Property	Tipe	Default	Penjelasan
Button Text	Teks	"Order Now"	Label tombol submit
Loading Text	Teks	"Processing..."	Label tombol saat memproses pembayaran

Sesuaikan teks tombol dengan konteks landing page kamu: "Beli Sekarang", "Daftar Kelas", "Ambil Penawaran Ini", atau "Kirim Data Saya" untuk lead capture.

After Submission

Property	Tipe	Default	Penjelasan
Success Action	Pilihan	Payment	Apa yang terjadi setelah form disubmit: Payment atau Redirect to URL
Redirect URL	URL	—	URL tujuan (hanya aktif kalau Success Action = Redirect to URL)

Success Action	Alur	Cocok untuk
Payment	Pembeli diarahkan ke halaman payment Konvert	Penjualan produk dengan pembayaran langsung
Redirect to URL	Pembeli langsung diarahkan ke URL yang kamu tentukan	Lead capture, waitlist, atau produk yang pembayarannya di luar Konvert

On Payment Success

Properti ini hanya aktif kalau Success Action = Payment.

Property	Tipe	Default	Penjelasan
Show WhatsApp Button	Toggle	Off	Tampilkan tombol WA di halaman konfirmasi setelah bayar
WhatsApp Number	Teks	—	Nomor WA tujuan (format 08... atau +62...)
Message Template	Textarea	—	Template pesan otomatis saat tombol WA diklik
Digital Delivery	Pilihan	Both	Cara pengiriman produk digital: Both (page + email), Page only, Email only

Message Template — Variable yang Tersedia

Kamu bisa menyisipkan data order secara dinamis dalam template pesan WA:

Variable	Nilai yang ditampilkan
{order_id}	ID unik pesanan, mis. ORD-20240513-001
{product_name}	Nama produk yang dibeli
{amount}	Total harga yang dibayarkan
{buyer_name}	Nama pembeli (dari field form)

Contoh template yang efektif:

Halo admin! Saya sudah bayar untuk {product_name}.
Order ID: {order_id}
Nama: {buyer_name}
Total: {amount}

Tolong dikonfirmasi ya, terima kasih!

Pixel Events

Property	Tipe	Default	Penjelasan
On Submit	Pilihan event Meta	ViewContent	Event yang dikirim saat pembeli klik submit
On Success	Pilihan event Meta	Purchase	Event yang dikirim setelah pembayaran berhasil

Warna Form (9 Color Props)

Order Form punya 9 color picker untuk kustomisasi lengkap:

Property	Mengatur warna...
Label Color	Teks label field (Nama, Email, dsb.)
Input Background	Background input field
Input Text	Teks yang diketik di dalam input
Input Border	Border input field
Button Background	Background tombol submit
Button Text	Teks di tombol submit
Summary Background	Background kotak order summary
Summary Text	Teks dalam order summary
Summary Price	Teks harga di order summary

Style Universal

Order Form mendukung semua properti style umum (margin, padding, background, border, radius, shadow, hide on mobile/desktop, custom CSS). Lihat panduan lengkapnya di Style Universal.

Contoh Penggunaan

Contoh 1 — Produk Fisik Standar (dengan Varian dan Qty)

Pilih produk T-Shirt Premium dari katalog. Aktifkan Show Product Image (ukuran 250px) agar foto produk muncul di atas form. Show Variants On dengan Variant Style Buttons menampilkan pilihan ukuran/warna sebagai tombol-tombol horizontal. Quantity Selector aktif (Min 1, Max 5, Default 1). Show Order Summary On agar pembeli bisa review total sebelum bayar. Success Action Payment, pixel On Submit InitiateCheckout, On Success Purchase.

Contoh 2 — Lead Capture (Tanpa Payment)

Pilih produk placeholder gratis dari katalog. Show Product Image Off. Show Notes Field On (label "Pertanyaan untuk pembicara?"), Notes Required Off. Quantity Selector Off, Variants Off, Order Summary Off. Button Text "Daftar Sekarang — Gratis!", Loading Text "Mendaftarkan kamu...". Success Action Redirect to URL mengarah ke halaman terima kasih. Pixel On Submit diset Lead.

Contoh 3 — Bundle Course (dengan WA Confirmation + Email Delivery)

Pilih produk Bundle Masterclass 3-in-1 dari katalog. Show Product Image On (300px). Variants Off, Quantity Off. Show Order Summary On, Discount Code Field On. Button Text "Daftar & Akses Sekarang". Success Action Payment. Show WhatsApp Button On dengan template pesan yang menyertakan variabel {buyer_name}, {product_name}, {order_id}, dan {amount}. Digital Delivery Both sehingga akses dikirim via halaman konfirmasi sekaligus email.

Tips & Gotchas