Memulai bisnis online melalui platform blog kini semakin digemari karena kemudahan pengelolaannya. Salah satu metode penyelesaian transaksi yang paling disukai oleh pembeli di Indonesia adalah pemesanan langsung melalui aplikasi pesan singkat WhatsApp. Untuk mempermudah proses ini, Anda bisa menyulap halaman blog Anda menjadi sebuah toko online mini dengan menambahkan formulir pemesanan khusus. Panduan ini akan menunjukkan cara membuat formulir pesanan WhatsApp yang dilengkapi kolom unggah bukti pembayaran agar transaksi Anda terlihat jauh lebih profesional dan terstruktur.
Mengenal Kode Formulir Order WhatsApp
Formulir order WhatsApp pada dasarnya adalah perpaduan antara kerangka dokumen HTML, gaya visual CSS, dan logika penggerak dari JavaScript. Kerangka HTML bertugas menyediakan kotak isian seperti kolom nama, pesanan, dan tombol pilih berkas. Gaya CSS akan mempercantik kotak isian tersebut agar terlihat rapi dan modern. Terakhir, skrip JavaScript bekerja sebagai mesin pintar yang akan mengumpulkan semua tulisan dari kotak isian tersebut, menyusunnya menjadi pesan teks yang rapi, dan membawanya langsung ke dalam aplikasi WhatsApp Anda dalam sekali klik.
Manfaat Utama Penggunaan Kode di Blogger
Keuntungan terbesar menggunakan formulir mandiri ini adalah Anda tidak perlu membayar biaya langganan bulanan kepada penyedia layanan keranjang belanja pihak ketiga. Anda memegang kendali penuh atas data pesanan tanpa potongan komisi apa pun. Keberadaan kolom konfirmasi bukti pembayaran juga memberikan rasa aman bagi pembeli sekaligus memudahkan Anda dalam melakukan pengecekan mutasi rekening. Pembeli tidak perlu lagi mengetik format pesanan secara manual yang sering kali berantakan, karena sistem akan menyusunnya secara otomatis.
Contoh Penerapan di Halaman Blog
Mari bayangkan Anda menjual sebuah produk kerajinan tangan di blog Anda. Di bagian bawah artikel penawaran produk, Anda meletakkan formulir ini. Calon pembeli yang tertarik akan mengisi nama, mengetikkan alamat lengkap, lalu menekan tombol pilih berkas untuk mencari foto bukti transfer dari galeri ponsel mereka. Saat mereka menekan tombol kirim pesanan, aplikasi WhatsApp di ponsel mereka akan otomatis terbuka. Pesan teks sudah tersusun sangat rapi berisi rincian alamat mereka, ditambah dengan kalimat penutup yang menyatakan bahwa foto bukti transfer siap untuk dilampirkan di ruang obrolan tersebut.
Kode Lengkap Siap Pakai
Berikut adalah barisan kode lengkap yang dibagi menjadi tiga bagian utama. Anda sangat disarankan untuk memasang ketiganya secara berurutan agar tampilan formulir selaras dengan fungsi logikanya.
Kode Kaskade Gaya Visual (CSS)
Salin kode gaya visual ini untuk memastikan kerangka formulir Anda memiliki sudut yang melengkung elegan, warna latar yang lembut, dan tombol kirim yang menarik perhatian.
/* Gaya Visual Formulir WhatsApp */
.form-wa-wadah {
background-color: #f8f9fa;
padding: 25px;
border-radius: 10px;
border: 1px solid #e9ecef;
box-shadow: 0 4px 6px rgba(0,0,0,0.05);
margin-bottom: 30px;
}
.form-wa-grup {
margin-bottom: 20px;
}
.form-wa-grup label {
display: block;
font-weight: 700;
color: #333;
margin-bottom: 8px;
}
.form-wa-grup input, .form-wa-grup textarea {
width: 100%;
padding: 12px;
border: 1px solid #ced4da;
border-radius: 6px;
box-sizing: border-box;
font-family: inherit;
font-size: 15px;
}
.form-wa-grup input[type="file"] {
padding: 10px;
background-color: #ffffff;
cursor: pointer;
}
.form-wa-catatan {
font-size: 13px;
color: #6c757d;
margin-top: 6px;
display: block;
}
.tombol-wa {
background-color: #25D366;
color: #ffffff;
padding: 15px 20px;
border: none;
border-radius: 6px;
font-size: 16px;
font-weight: bold;
width: 100%;
cursor: pointer;
transition: background-color 0.3s ease;
}
.tombol-wa:hover {
background-color: #128C7E;
}
.peringatan-form {
color: #dc3545;
font-size: 14px;
margin-bottom: 15px;
display: none;
}Kode Kerangka Dokumen (HTML)
Letakkan kerangka kotak isian ini tepat di posisi mana Anda ingin formulir tersebut dimunculkan. Kerangka ini mencakup kolom isian teks panjang untuk alamat dan kotak pemilihan berkas gambar.
<!-- Kerangka Formulir WhatsApp -->
<div class="form-wa-wadah">
<div id="pesan-error" class="peringatan-form">Mohon lengkapi nama dan pesanan Anda terlebih dahulu.</div>
<div class="form-wa-grup">
<label>Nama Lengkap</label>
<input type="text" id="wa-nama" placeholder="Masukkan nama Anda di sini"/>
</div>
<div class="form-wa-grup">
<label>Pesanan Anda</label>
<input type="text" id="wa-pesanan" placeholder="Tuliskan nama produk atau layanan"/>
</div>
<div class="form-wa-grup">
<label>Alamat Pengiriman</label>
<textarea id="wa-alamat" rows="4" placeholder="Tuliskan alamat lengkap pengiriman"></textarea>
</div>
<div class="form-wa-grup">
<label>Unggah Bukti Pembayaran</label>
<input type="file" id="wa-bukti" accept="image/*"/>
<span class="form-wa-catatan">Pilih foto struk atau tangkapan layar transfer. Foto akan dilampirkan secara otomatis saat Anda masuk ke obrolan WhatsApp.</span>
</div>
<button class="tombol-wa" onclick="kirimPesananWA()">Kirim Pesanan via WhatsApp</button>
</div>Kode Mesin Penggerak (JavaScript)
Skrip cerdas inilah yang bertugas menangkap tulisan pengunjung dan merakitnya menjadi sebuah pesan otomatis yang mengarah langsung ke nomor telepon Anda.
<!-- Logika Pengiriman WhatsApp -->
<script type='text/javascript'>
//<![CDATA[
function kirimPesananWA() {
var inputNama = document.getElementById("wa-nama").value;
var inputPesanan = document.getElementById("wa-pesanan").value;
var inputAlamat = document.getElementById("wa-alamat").value;
var inputBukti = document.getElementById("wa-bukti").value;
var pesanError = document.getElementById("pesan-error");
var nomorTujuan = "6281234567890";
if (inputNama === "" || inputPesanan === "") {
pesanError.style.display = "block";
return;
} else {
pesanError.style.display = "none";
}
var pesan = "Halo Admin, saya ingin melakukan pemesanan.%0A%0A";
pesan += "*Nama Pemesan:* " + inputNama + "%0A";
pesan += "*Detail Pesanan:* " + inputPesanan + "%0A";
pesan += "*Alamat Lengkap:* " + inputAlamat + "%0A%0A";
if (inputBukti !== "") {
pesan += "_Saya telah menyiapkan foto bukti pembayaran dan akan mengirimkannya di obrolan ini._%0A%0A";
} else {
pesan += "_Saya belum menyiapkan bukti pembayaran saat ini._%0A%0A";
}
pesan += "Mohon segera diproses ya. Terima kasih!";
var tautanWA = "https://wa.me/" + nomorTujuan + "?text=" + pesan;
window.open(tautanWA, "_blank");
}
//]]>
</script>Cara Memasang Kode di Blogger
Langkah pertama, persiapkan draf artikel penawaran produk atau halaman statis pemesanan Anda di dasbor Blogger. Saat halaman editor penulisan terbuka, perhatikan deretan ikon di sudut kiri atas. Klik ikon berlambang pensil, lalu pilih opsi Tampilan HTML untuk mengubah mode penulisan layar dari mode visual menjadi mode kode sumber.
Langkah kedua, salin terlebih dahulu kode gaya visual CSS yang diawali dan diakhiri dengan tag style, letakkan di bagian paling atas dokumen artikel Anda. Setelah itu, salin kode kerangka dokumen HTML dan tempelkan persis di titik di mana Anda ingin formulir tersebut dilihat oleh pengunjung, misalnya di bawah paragraf harga produk.
Langkah ketiga, salin bagian terakhir yaitu kode mesin penggerak JavaScript. Tempelkan seluruh baris kode tersebut di bagian paling bawah dokumen artikel Anda. Memosisikan skrip di akhir dokumen memastikan bahwa seluruh kerangka kotak isian telah termuat sempurna sebelum skrip mulai bekerja mendeteksi tombol klik.
Panduan Penggunaan Langkah demi Langkah
Langkah paling krusial sebelum Anda memublikasikan artikel tersebut adalah mengubah nomor tujuan WhatsApp. Temukan variabel bernama nomorTujuan di dalam kumpulan kode JavaScript yang baru saja Anda tempelkan. Hapus deretan angka palsu yang tertulis di sana dan ganti dengan nomor telepon Anda yang terhubung dengan WhatsApp. Anda harus menggunakan format kode negara, yaitu awalan enam dan dua, tanpa menggunakan angka nol di depan, tanpa tanda plus, dan tanpa spasi.
Langkah selanjutnya, Anda bisa mengubah kata-kata sapaan bawaan yang ada di dalam variabel pesan. Anda bebas menyesuaikan gaya bahasa sapaan tersebut agar lebih selaras dengan gaya komunikasi merek atau toko online Anda. Setelah semua penyesuaian dirasa cukup, klik tombol perbarui atau publikasikan artikel tersebut.
Cara Menguji Keberhasilan Script
Setelah formulir berhasil ditayangkan, Anda sangat diwajibkan untuk mengujinya secara langsung sebagai pembeli. Buka artikel tempat Anda menanamkan formulir tersebut melalui peramban web di ponsel cerdas Anda agar hasil pengujiannya jauh lebih akurat.
Isilah kolom nama dan pesanan secara sembarangan sebagai percobaan. Selanjutnya, cobalah mengeklik tombol pilih berkas dan pilih sebuah gambar dari galeri ponsel Anda. Tekan tombol kirim pesanan berwarna hijau tersebut. Layar ponsel Anda seharusnya langsung berpindah membuka aplikasi WhatsApp, mengarahkan ke nomor Anda sendiri, dengan kotak penulisan pesan yang sudah terisi penuh oleh susunan teks rapi sesuai dengan isian Anda sebelumnya.
Kesalahan Umum Saat Mengedit Template
Menulis Nomor Telepon dengan Format Keliru
Kesalahan fatal yang paling sering dijumpai adalah penulisan nomor tujuan yang masih menggunakan awalan angka nol, misalnya nol delapan satu dua. Jika format ini digunakan, tautan aplikasi akan rusak dan pesan tidak akan pernah sampai kepada Anda. Aturan standar antarmuka pemrograman aplikasi WhatsApp mewajibkan penggunaan kode negara. Anda wajib mengganti angka nol di depan dengan angka enam dan dua khusus untuk nomor seluler regional Indonesia.
Menempelkan Kode di Mode Tampilan Menulis
Sangat banyak pengguna pemula yang menempelkan ketiga blok kode tersebut pada saat mode editor penulisan masih berada dalam keadaan mode Tampilan Menulis atau mode visual. Jika hal ini dilakukan, semua kode pemrograman tersebut hanya akan terbaca sebagai teks bacaan biasa di blog Anda dan formulirnya tidak akan pernah muncul. Anda harus selalu memastikan bahwa editor Blogger sedang berada pada mode Tampilan HTML sebelum menyalin dan menempelkan instruksi pemrograman apa pun.
Penutup
Semoga panduan pembuatan formulir pemesanan cerdas ini dapat langsung Anda praktikkan untuk meningkatkan volume transaksi di blog kesayangan Anda. Memiliki alur pembelian yang jelas dan terarah adalah fondasi utama dalam membangun kepercayaan calon konsumen di dunia maya. Jika Anda menemui kendala teknis saat merangkai kode di atas, silakan menjabarkan kesulitan Anda pada kolom komentar yang tersedia di bawah. Teruslah berkarya dan ikuti ragam tutorial modifikasi Blogger menarik lainnya dari situs ini. Selamat berjualan dan semoga laris manis!