Mempermudah transaksi bagi pelanggan adalah kunci utama dalam meningkatkan penjualan di platform Blogger atau Blogspot. Salah satu cara paling efektif untuk menjembatani komunikasi antara penjual dan pembeli adalah dengan menyediakan formulir pemesanan yang terintegrasi langsung ke WhatsApp. Dengan cara ini, data pesanan akan tersusun rapi dan dikirimkan secara otomatis dalam format teks yang mudah dibaca oleh pemilik toko.
Apa Itu Formulir Pemesanan WhatsApp Blogger
Formulir pemesanan WhatsApp adalah sebuah elemen antarmuka web yang terdiri dari beberapa kolom isian seperti nama, alamat, nama produk, dan jumlah pesanan. Berbeda dengan formulir kontak biasa yang mengirimkan pesan ke email, formulir ini bekerja dengan menangkap data yang diinput oleh pengunjung dan mengubahnya menjadi tautan URL WhatsApp API. Ketika tombol kirim ditekan, pengunjung akan langsung diarahkan ke aplikasi WhatsApp dengan pesan yang sudah terisi otomatis sesuai data yang mereka masukkan.
Manfaat Menggunakan Formulir Pemesanan di Blog
Menggunakan formulir pemesanan memberikan kesan profesional pada toko online Anda dibandingkan hanya sekadar mencantumkan nomor telepon. Selain itu, Anda tidak perlu lagi bertanya berulang kali mengenai detail pesanan karena semua informasi penting sudah terkumpul dalam satu formulir. Hal ini mempercepat proses transaksi, mengurangi risiko kesalahan input data oleh pembeli, dan meningkatkan tingkat konversi karena proses pemesanan menjadi sangat mudah dan cepat bagi pelanggan.
Contoh Penerapan dalam Artikel Blogger
Anda dapat menerapkan formulir ini pada halaman statis khusus pemesanan atau langsung di dalam artikel postingan produk. Misalnya, di bawah deskripsi produk, Anda bisa menyisipkan formulir ini agar pengunjung tidak perlu menggulir layar terlalu jauh untuk melakukan pembelian. Tampilan formulir yang bersih dan responsif akan menyesuaikan dengan ukuran layar perangkat baik desktop maupun smartphone.
Kode HTML Formulir Pemesanan WhatsApp Siap Pakai
Berikut adalah kode lengkap yang sudah mencakup struktur HTML, desain CSS agar tampilan menarik, serta script JavaScript untuk memproses pengiriman data ke WhatsApp. Anda hanya perlu menyalin seluruh kode di bawah ini.
<div id="wa-order-container">
<div class="wa-order-title">Formulir Pesanan</div>
<div class="wa-order-form">
<div class="wa-input-group">
<label>Nama Lengkap</label>
<input type="text" id="wa-name" placeholder="Contoh: Budi Santoso" />
</div>
<div class="wa-input-group">
<label>Nama Produk</label>
<input type="text" id="wa-product" placeholder="Contoh: Kaos Polos Hitam" />
</div>
<div class="wa-input-group">
<label>Jumlah Pesanan</label>
<input type="number" id="wa-qty" placeholder="Contoh: 1" />
</div>
<div class="wa-input-group">
<label>Alamat Pengiriman</label>
<textarea id="wa-address" rows="3" placeholder="Tulis alamat lengkap..."></textarea>
</div>
<button type="button" onclick="sendOrder()" id="wa-submit-btn">Kirim Pesanan Sekarang</button>
</div>
</div>Selanjutnya, tambahkan kode CSS di bawah ini untuk mempercantik tampilan formulir agar terlihat modern dan elegan di blog Anda.
#wa-order-container {
max-width: 500px;
margin: 20px auto;
font-family: Arial, sans-serif;
border: 1px solid #ddd;
border-radius: 10px;
overflow: hidden;
box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}
.wa-order-title {
background-color: #25d366;
color: white;
padding: 15px;
text-align: center;
font-weight: bold;
font-size: 1.2rem;
}
.wa-order-form {
padding: 20px;
background: #f9f9f9;
}
.wa-input-group {
margin-bottom: 15px;
}
.wa-input-group label {
display: block;
margin-bottom: 5px;
font-weight: bold;
font-size: 0.9rem;
}
.wa-input-group input, .wa-input-group textarea {
width: 100%;
padding: 10px;
border: 1px solid #ccc;
border-radius: 5px;
box-sizing: border-box;
}
#wa-submit-btn {
width: 100%;
background-color: #25d366;
color: white;
border: none;
padding: 12px;
font-size: 1rem;
font-weight: bold;
border-radius: 5px;
cursor: pointer;
transition: background 0.3s;
}
#wa-submit-btn:hover {
background-color: #128c7e;
}Terakhir, gunakan script JavaScript berikut agar formulir dapat berfungsi dan mengirimkan data ke nomor WhatsApp Anda.
function sendOrder() {
const phoneNumber = "6281234567890"; // Ganti dengan nomor WhatsApp Anda (awali dengan 62)
const name = document.getElementById('wa-name').value;
const product = document.getElementById('wa-product').value;
const qty = document.getElementById('wa-qty').value;
const address = document.getElementById('wa-address').value;
if (name === "" || product === "" || qty === "" || address === "") {
alert("Mohon lengkapi semua data pesanan.");
return;
}
const message = "Halo Admin, saya ingin memesan produk:%0A" +
"*Nama:* " + name + "%0A" +
"*Produk:* " + product + "%0A" +
"*Jumlah:* " + qty + "%0A" +
"*Alamat:* " + address + "%0A%0A" +
"Terima kasih.";
const waUrl = "https://api.whatsapp.com/send?phone=" + phoneNumber + "&text=" + message;
window.open(waUrl, '_blank');
}Cara Memasang Kode di Blogger
Langkah pertama untuk memasang kode ini adalah masuk ke dashboard Blogger Anda. Pilih menu Postingan Baru atau pilih halaman statis jika Anda ingin membuat halaman khusus pemesanan. Pastikan editor Anda berada dalam mode HTML, bukan mode Menulis (Compose). Anda bisa mengubahnya dengan mengeklik ikon pensil di pojok kiri atas editor dan memilih Tampilan HTML.
Salin seluruh kode HTML, CSS (bungkus dengan tag style), dan JavaScript (bungkus dengan tag script) ke dalam area editor tersebut. Setelah selesai, Anda dapat mempublikasikan artikel atau halaman tersebut. Kode CSS sebaiknya diletakkan di bagian paling atas, diikuti oleh struktur HTML formulir, dan diakhiri dengan script JavaScript di bagian paling bawah agar proses pemuatan halaman tetap cepat.
Panduan Menguji Keberhasilan Script
Setelah artikel dipublikasikan, buka halaman tersebut melalui browser Anda. Cobalah untuk mengisi semua kolom mulai dari nama hingga alamat pengiriman. Klik tombol Kirim Pesanan dan pastikan browser membuka tab baru yang mengarah ke tautan WhatsApp API. Periksa apakah teks yang muncul sudah sesuai dengan apa yang Anda ketikkan di formulir. Jika pesan sudah muncul dengan rapi di layar chat WhatsApp, maka instalasi telah berhasil.
Kesalahan Umum Saat Mengedit Kode
Kesalahan yang paling sering terjadi adalah lupa mengubah nomor telepon pada bagian JavaScript. Pastikan nomor diawali dengan kode negara tanpa tanda plus atau spasi, contohnya 62812xxxxxx untuk Indonesia. Kesalahan lainnya adalah menghapus tanda kutip secara tidak sengaja saat mengedit variabel pesan, yang akan mengakibatkan script tidak berjalan. Pastikan juga template blog Anda tidak memblokir fungsi JavaScript eksternal atau memiliki konflik dengan library JavaScript lain yang sudah terpasang.
Demikian panduan lengkap mengenai cara membuat formulir pemesanan WhatsApp di Blogger. Dengan menerapkan tutorial ini, diharapkan proses jual beli di blog Anda menjadi lebih efisien dan profesional. Semoga artikel ini bermanfaat bagi perkembangan bisnis online Anda.