Pernahkah Anda membayangkan betapa mudahnya jika pengunjung blog bisa langsung memesan produk Anda hanya dengan mengisi formulir sederhana yang terhubung ke WhatsApp? Menambahkan formulir pesanan langsung di blog adalah salah satu strategi paling efektif untuk meningkatkan konversi penjualan. Pengunjung tidak perlu lagi mencatat nomor secara manual, mereka cukup mengisi data diri dan pesanan yang langsung terkirim ke obrolan WhatsApp Anda.
Apa Itu Kode Form Order WhatsApp?
Kode form order WhatsApp adalah rangkaian bahasa pemrograman sederhana yang terdiri dari struktur dasar HTML untuk membuat kotak isian, CSS untuk mempercantik tampilan formulir, dan sedikit sentuhan JavaScript untuk memproses teks isian menjadi tautan khusus WhatsApp. Ketika pengunjung menekan tombol kirim, sistem akan otomatis membuka aplikasi atau web WhatsApp dengan format pesan yang sudah tersusun rapi.
Manfaat Penggunaan Kode Ini di Blogger
Manfaat utama dari script ini adalah kemudahan dan kepraktisan. Anda tidak membutuhkan layanan pihak ketiga berbayar atau sistem database yang rumit untuk menyimpan pesanan. Selain itu, formulir ini sangat ringan karena ditulis menggunakan kode murni sehingga tidak akan membuat loading blog Anda menjadi lambat. Template Blogger Anda akan tetap aman dan responsif saat dibuka melalui layar komputer maupun ponsel pintar.
Contoh Penerapan Formulir di Blog
Formulir ini sangat cocok diaplikasikan pada halaman khusus penjualan produk atau jasa. Sebagai contoh, jika Anda berjualan pakaian, sepatu, atau makanan, Anda bisa meletakkan kode ini di bagian bawah deskripsi produk. Anda juga bisa menggunakannya untuk blog yang menawarkan jasa desain grafis atau pemesanan tiket lokal. Cukup tempatkan di dalam artikel postingan maupun halaman statis Blogger Anda.
Kode HTML Lengkap Siap Pakai
Di bawah ini adalah kode lengkap yang sudah digabungkan antara struktur HTML, gaya tampilan CSS, dan fungsi JavaScript pencetak pesan. Silakan salin kode di bawah ini secara utuh.
<!-- Awal Form Order WhatsApp -->
<div id="wa-order-form" style="max-width: 400px; margin: 20px auto; padding: 20px; border: 1px solid #e0e0e0; border-radius: 8px; font-family: sans-serif; background-color: #ffffff; box-shadow: 0 4px 6px rgba(0,0,0,0.05);">
<h3 style="text-align: center; color: #25D366; margin-top: 0;">Form Order WhatsApp</h3>
<label style="display: block; margin-bottom: 5px; font-weight: bold; font-size: 14px;">Nama Lengkap:</label>
<input type="text" id="wa-nama" style="width: 100%; padding: 10px; margin-bottom: 15px; border: 1px solid #ccc; border-radius: 4px; box-sizing: border-box; font-size: 14px;" placeholder="Masukkan nama Anda">
<label style="display: block; margin-bottom: 5px; font-weight: bold; font-size: 14px;">Produk Pesanan:</label>
<input type="text" id="wa-produk" style="width: 100%; padding: 10px; margin-bottom: 15px; border: 1px solid #ccc; border-radius: 4px; box-sizing: border-box; font-size: 14px;" placeholder="Contoh: Sepatu Sneaker Hitam Ukuran 40">
<label style="display: block; margin-bottom: 5px; font-weight: bold; font-size: 14px;">Alamat Pengiriman:</label>
<textarea id="wa-alamat" style="width: 100%; padding: 10px; margin-bottom: 15px; border: 1px solid #ccc; border-radius: 4px; box-sizing: border-box; font-size: 14px;" rows="3" placeholder="Tuliskan alamat lengkap beserta kode pos"></textarea>
<button onclick="kirimPesanWA()" style="width: 100%; padding: 12px; background-color: #25D366; color: white; border: none; border-radius: 4px; font-weight: bold; cursor: pointer; font-size: 16px; transition: background-color 0.3s;" onmouseover="this.style.backgroundColor='#1da851'" onmouseout="this.style.backgroundColor='#25D366'">Kirim Pesanan ke WhatsApp</button>
</div>
<script>
function kirimPesanWA() {
// Ganti angka 6281234567890 dengan nomor WhatsApp Anda
var nomorWA = "6281234567890";
var ambilNama = document.getElementById("wa-nama").value;
var ambilProduk = document.getElementById("wa-produk").value;
var ambilAlamat = document.getElementById("wa-alamat").value;
if(ambilNama === "" || ambilProduk === "" || ambilAlamat === "") {
alert("Mohon lengkapi semua data pada formulir pesanan sebelum mengirim!");
return;
}
var formatPesan = "Halo Admin, saya ingin memesan produk berikut:%0A%0A" +
"*Nama:* " + ambilNama + "%0A" +
"*Produk:* " + ambilProduk + "%0A" +
"*Alamat:* " + ambilAlamat + "%0A%0A" +
"Mohon informasi untuk total biaya dan pembayarannya. Terima kasih.";
var linkWhatsApp = "https://wa.me/" + nomorWA + "?text=" + formatPesan;
window.open(linkWhatsApp, "_blank");
}
</script>
<!-- Akhir Form Order WhatsApp -->
Cara Memasang Kode di Blogger
Langkah pertama, silakan masuk ke dashboard akun Blogger Anda. Pilih menu Postingan Baru untuk membuat artikel baru atau edit postingan lama yang ingin Anda sisipkan formulir. Anda bisa menuliskan penjelasan deskripsi produk Anda seperti biasa terlebih dahulu di bagian atas.
Langkah kedua, perhatikan ikon berbentuk pensil yang berada di pojok kiri atas area editor teks. Klik ikon pensil tersebut lalu ubah mode penulisan dari Tampilan Menulis (Compose view) menjadi Tampilan HTML (HTML view). Langkah ini sangat wajib dilakukan agar sistem mendeteksi input sebagai kode program, bukan sebagai teks paragraf biasa.
Langkah ketiga, tempelkan kode yang sudah Anda salin tepat di bagian paling bawah artikel atau di area kosong yang Anda inginkan. Setelah ditempel, Anda bisa kembali mengklik ikon di pojok kiri atas dan mengubahnya kembali ke Tampilan Menulis. Formulir mungkin tidak terlihat sempurna di area editor, namun ini adalah hal yang normal.
Panduan Penggunaan Langkah Demi Langkah
Langkah pertama setelah kode ditempel adalah menyesuaikan nomor tujuan. Silakan cari baris kode yang berisi angka 6281234567890. Ganti angka tersebut dengan nomor WhatsApp toko Anda. Ingat, gunakan awalan 62 sebagai pengganti angka 0 di depan nomor agar pesan bisa terkirim dengan sukses.
Langkah kedua, Anda bisa menyesuaikan teks di dalam formulir. Jika Anda ingin mengubah teks contoh pada kolom produk, cari kata yang bertuliskan Contoh: Sepatu Sneaker Hitam Ukuran 40 dan ganti dengan kalimat yang sesuai dengan produk jualan Anda.
Panduan Cara Menguji Keberhasilan Script
Langkah pertama untuk pengujian, klik tombol Pratinjau (Preview) di kanan atas dashboard Blogger Anda atau langsung Publikasikan artikel tersebut. Buka halaman artikel blog Anda yang sudah memuat formulir ini menggunakan perangkat komputer atau laptop.
Langkah kedua, isi seluruh kotak pada formulir tersebut dengan data acak seolah-olah Anda adalah seorang pembeli. Setelah diisi penuh, klik tombol hijau bertuliskan Kirim Pesanan ke WhatsApp. Jika berhasil, browser akan membuka tab baru menuju situs WhatsApp Web atau aplikasi WhatsApp dengan teks yang sudah terisi otomatis dari formulir tersebut.
Pembahasan Tentang Kesalahan Umum Saat Mengedit
Kesalahan pertama yang paling sering dialami adalah tulisan kode HTML muncul berantakan di halaman blog. Ini terjadi karena penulis menempelkan kode saat editor masih berada dalam mode Tampilan Menulis. Jika ini terjadi, hapus kembali teks tersebut, ubah ke mode Tampilan HTML, dan tempelkan ulang kodenya.
Kesalahan kedua adalah menekan tombol kirim tetapi WhatsApp menginformasikan bahwa nomor tidak valid. Hal ini biasanya terjadi karena Anda tidak sengaja menghapus tanda kutip di sekitar nomor telepon pada kode JavaScript, atau Anda menggunakan simbol tambah (+) serta awalan nol (0) di depan nomor. Pastikan format nomor murni menggunakan angka 62 di depannya.
Penutup
Memiliki formulir pesanan langsung di dalam artikel adalah langkah cerdas untuk memaksimalkan potensi penjualan blog Anda karena pembeli sangat menyukai kemudahan. Semoga tutorial memasang kode form order WhatsApp di Blogger ini bermanfaat bagi perkembangan bisnis Anda. Silakan ikuti panduannya secara perlahan, dan selamat mencoba!