Ingin membuat pengunjung blog lebih mudah melakukan pemesanan produk atau jasa? Anda dapat menambahkan form order WhatsApp di Blogger yang memungkinkan pengunjung mengisi data pesanan secara langsung dari halaman blog.
Dengan formulir ini, calon pelanggan tidak perlu menyalin nomor WhatsApp secara manual atau mengetik ulang detail pesanan. Pengunjung cukup mengisi nama, produk yang ingin dipesan, dan alamat pengiriman. Setelah tombol diklik, browser akan membuka WhatsApp dengan pesan yang sudah disusun berdasarkan data dari formulir.
Menariknya, sistem ini dapat dibuat hanya menggunakan HTML, CSS, dan JavaScript. Anda tidak memerlukan database atau plugin khusus untuk membuat versi sederhana dari form pemesanan WhatsApp di Blogspot.
Apa Itu Form Order WhatsApp di Blogger?
Form order WhatsApp adalah formulir pemesanan yang terhubung langsung dengan WhatsApp. Data yang dimasukkan pengunjung akan diproses oleh JavaScript menjadi sebuah pesan WhatsApp.
Ketika tombol kirim ditekan, browser akan membuka tautan WhatsApp dengan format pesan yang telah dibuat secara otomatis.
Secara sederhana, alurnya seperti ini:
- Pengunjung membuka halaman Blogger.
- Pengunjung mengisi data pada formulir.
- JavaScript membaca data yang dimasukkan.
- Data diubah menjadi format pesan WhatsApp.
- Browser membuka WhatsApp dengan pesan tersebut.
- Pengunjung dapat memeriksa dan mengirim pesan kepada admin.
Manfaat Form Order WhatsApp untuk Blogger
Formulir pemesanan dapat menjadi solusi praktis bagi pemilik blog yang ingin mengarahkan calon pelanggan langsung ke WhatsApp tanpa menggunakan sistem checkout yang kompleks.
- Mempermudah pemesanan: Pengunjung dapat mengisi data tanpa harus mengetik format pesan secara manual.
- Mempercepat komunikasi: Data pesanan langsung disiapkan dalam pesan WhatsApp.
- Tidak membutuhkan database: Versi sederhana ini tidak memerlukan penyimpanan data pesanan di server.
- Dapat digunakan di halaman Blogger: Form dapat ditempatkan pada postingan maupun halaman statis.
- Responsif: Tampilan dapat disesuaikan agar nyaman digunakan pada perangkat desktop dan smartphone.
- Mudah dikustomisasi: Kolom formulir dan format pesan dapat diubah sesuai kebutuhan bisnis.
Contoh Penggunaan Form Order WhatsApp
Form order ini dapat digunakan untuk berbagai jenis produk dan layanan yang menerima pemesanan melalui WhatsApp.
Contohnya:
- Toko pakaian dan fashion.
- Penjualan sepatu dan aksesoris.
- Pemesanan makanan dan minuman.
- Penjualan produk digital.
- Jasa desain grafis.
- Jasa pembuatan website.
- Pemesanan produk UMKM.
- Jasa lokal yang menerima order melalui WhatsApp.
Formulir dapat ditempatkan setelah deskripsi produk, di bagian akhir artikel, atau pada halaman khusus pemesanan.
Kode Form Order WhatsApp Blogger Siap Pakai
Berikut kode lengkap yang menggabungkan HTML, CSS, dan JavaScript. Anda dapat menyalinnya dan memasukkannya ke dalam postingan Blogger melalui mode Tampilan HTML.
<!-- Awal Form Order WhatsApp -->
<style>
#wa-order-form {
max-width: 420px;
margin: 25px auto;
padding: 20px;
border: 1px solid #e0e0e0;
border-radius: 12px;
background: #ffffff;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
box-sizing: border-box;
}
#wa-order-form h3 {
margin: 0 0 20px;
text-align: center;
color: #25D366;
font-size: 22px;
}
.wa-form-group {
margin-bottom: 15px;
}
.wa-form-group label {
display: block;
margin-bottom: 6px;
font-weight: 600;
font-size: 14px;
}
.wa-form-group input,
.wa-form-group textarea {
width: 100%;
padding: 11px;
border: 1px solid #ccc;
border-radius: 6px;
box-sizing: border-box;
font-size: 14px;
font-family: inherit;
outline: none;
}
.wa-form-group input:focus,
.wa-form-group textarea:focus {
border-color: #25D366;
}
.wa-submit-button {
width: 100%;
padding: 13px;
border: 0;
border-radius: 6px;
background: #25D366;
color: #ffffff;
font-size: 16px;
font-weight: bold;
cursor: pointer;
transition: background 0.2s ease;
}
.wa-submit-button:hover {
background: #1da851;
}
@media screen and (max-width: 480px) {
#wa-order-form {
margin: 20px 10px;
padding: 16px;
}
#wa-order-form h3 {
font-size: 20px;
}
}
</style>
<div id="wa-order-form">
<h3>Form Order WhatsApp</h3>
<div class="wa-form-group">
<label for="wa-nama">Nama Lengkap</label>
<input
type="text"
id="wa-nama"
placeholder="Masukkan nama Anda"
autocomplete="name">
</div>
<div class="wa-form-group">
<label for="wa-produk">Produk Pesanan</label>
<input
type="text"
id="wa-produk"
placeholder="Contoh: Sepatu Sneaker Hitam Ukuran 40">
</div>
<div class="wa-form-group">
<label for="wa-alamat">Alamat Pengiriman</label>
<textarea
id="wa-alamat"
rows="4"
placeholder="Tuliskan alamat lengkap beserta kode pos"
autocomplete="street-address"></textarea>
</div>
<button
type="button"
class="wa-submit-button"
onclick="kirimPesanWA()">
Kirim Pesanan ke WhatsApp
</button>
</div>
<script>
function kirimPesanWA() {
// Ganti nomor berikut dengan nomor WhatsApp Anda
var nomorWA = "6281234567890";
var nama = document.getElementById("wa-nama").value.trim();
var produk = document.getElementById("wa-produk").value.trim();
var alamat = document.getElementById("wa-alamat").value.trim();
if (!nama || !produk || !alamat) {
alert("Mohon lengkapi semua data pesanan terlebih dahulu.");
return;
}
var formatPesan =
"Halo Admin, saya ingin memesan produk berikut:\n\n" +
"Nama: " + nama + "\n" +
"Produk: " + produk + "\n" +
"Alamat: " + alamat + "\n\n" +
"Mohon informasi mengenai total biaya dan metode pembayaran.";
var linkWhatsApp =
"https://wa.me/" +
nomorWA +
"?text=" +
encodeURIComponent(formatPesan);
window.open(linkWhatsApp, "_blank");
}
</script>
<!-- Akhir Form Order WhatsApp -->Cara Mengganti Nomor WhatsApp
Sebelum menggunakan form, Anda wajib mengganti nomor WhatsApp pada bagian JavaScript.
Cari kode berikut:
var nomorWA = "6281234567890";Ganti 6281234567890 dengan nomor WhatsApp tujuan Anda.
Gunakan format nomor internasional tanpa tanda +, spasi, atau tanda strip.
Misalnya nomor lokal Anda ditulis:
081234567890Maka format yang digunakan menjadi:
var nomorWA = "6281234567890";Angka 0 di bagian awal diganti dengan kode negara Indonesia, yaitu 62.
Cara Memasang Form Order WhatsApp di Blogger
1. Buka Dashboard Blogger
Masuk ke dashboard Blogger dan pilih blog tempat Anda ingin memasang formulir pemesanan.
2. Buat atau Edit Postingan
Anda dapat membuat postingan baru atau membuka artikel yang sudah tersedia. Form order dapat ditempatkan setelah deskripsi produk maupun pada bagian lain yang dianggap relevan.
3. Ubah ke Tampilan HTML
Pada editor Blogger, ubah mode dari Tampilan Menulis menjadi Tampilan HTML.
Langkah ini penting karena kode HTML, CSS, dan JavaScript harus ditempatkan sebagai kode, bukan sebagai teks biasa.
4. Tempelkan Kode
Salin seluruh kode form order yang tersedia di atas, kemudian tempelkan pada lokasi yang diinginkan di dalam artikel.
5. Simpan dan Publikasikan
Setelah kode dimasukkan, gunakan fitur Pratinjau terlebih dahulu untuk memastikan tampilan formulir sudah sesuai.
Jika semuanya berjalan dengan baik, Anda dapat menyimpan atau mempublikasikan artikel.
Cara Mengubah Kolom Formulir
Formulir di atas menggunakan tiga kolom utama, yaitu nama, produk, dan alamat. Anda dapat menambahkan kolom lain jika diperlukan.
Misalnya, Anda ingin menambahkan nomor telepon:
<div class="wa-form-group">
<label for="wa-telepon">Nomor Telepon</label>
<input
type="tel"
id="wa-telepon"
placeholder="Masukkan nomor telepon">
</div>Data tersebut kemudian perlu dibaca menggunakan JavaScript agar dapat dimasukkan ke dalam pesan WhatsApp.
Cara Mengubah Format Pesan WhatsApp
Format pesan yang dikirim ke WhatsApp dapat Anda ubah sesuai kebutuhan toko atau bisnis.
Bagian yang perlu diperhatikan adalah:
var formatPesan =
"Halo Admin, saya ingin memesan produk berikut:\n\n" +
"Nama: " + nama + "\n" +
"Produk: " + produk + "\n" +
"Alamat: " + alamat + "\n\n" +
"Mohon informasi mengenai total biaya dan metode pembayaran.";Anda dapat menambahkan informasi seperti jumlah produk, ukuran, warna, catatan pesanan, atau metode pengiriman.
Contohnya:
var formatPesan =
"Halo Admin, saya ingin melakukan pemesanan.\n\n" +
"Nama: " + nama + "\n" +
"Produk: " + produk + "\n" +
"Alamat: " + alamat + "\n" +
"Catatan: Mohon konfirmasi ketersediaan produk.\n\n" +
"Terima kasih.";Cara Mengubah Warna Form Order
Warna tombol dan judul formulir dapat disesuaikan dengan identitas visual website Anda.
Warna hijau WhatsApp pada kode menggunakan:
#25D366Jika ingin menggunakan warna lain, ubah nilai background dan color pada bagian CSS yang sesuai.
Contohnya:
.wa-submit-button {
background: #25D366;
color: #ffffff;
}Anda dapat menyesuaikan warna formulir dengan warna template Blogger agar tampilannya lebih menyatu dengan keseluruhan halaman.
Form Order WhatsApp Responsif untuk HP
Karena sebagian besar pengunjung dapat mengakses blog melalui smartphone, formulir sebaiknya memiliki tampilan yang nyaman pada layar kecil.
Kode di atas sudah menggunakan pengaturan responsive CSS sehingga ukuran formulir dapat menyesuaikan layar perangkat.
Bagian media query yang digunakan adalah:
@media screen and (max-width: 480px) {
#wa-order-form {
margin: 20px 10px;
padding: 16px;
}
#wa-order-form h3 {
font-size: 20px;
}
}Anda dapat mengubah nilai tersebut jika ingin mendapatkan tampilan yang berbeda pada perangkat mobile.
Cara Menguji Form Order WhatsApp
Setelah memasang kode, lakukan pengujian sebelum membagikan halaman kepada calon pelanggan.
- Buka halaman blog yang berisi form order.
- Isi nama lengkap.
- Masukkan nama produk.
- Masukkan alamat pengiriman.
- Klik tombol Kirim Pesanan ke WhatsApp.
- Periksa apakah WhatsApp terbuka.
- Pastikan isi pesan sesuai dengan data yang dimasukkan.
- Periksa apakah nomor tujuan sudah benar.
Jika WhatsApp tidak terbuka atau pesan tidak sesuai, periksa kembali nomor tujuan dan kode JavaScript yang digunakan.
Masalah Umum Form Order WhatsApp di Blogger
Formulir Menampilkan Kode HTML
Jika kode justru muncul sebagai teks di halaman, kemungkinan kode ditempelkan melalui mode Tampilan Menulis. Ubah editor ke Tampilan HTML, lalu masukkan kode kembali.
Nomor WhatsApp Tidak Terhubung
Pastikan nomor WhatsApp ditulis dalam format internasional. Untuk nomor Indonesia, gunakan 62 sebagai pengganti angka 0 di awal nomor.
Pesan Tidak Muncul dengan Benar
Pastikan JavaScript menggunakan encodeURIComponent() ketika memasukkan teks ke URL WhatsApp. Fungsi tersebut membantu mengubah spasi, tanda baca, dan karakter khusus agar dapat digunakan dengan aman sebagai parameter URL.
Tombol Tidak Berfungsi
Periksa kembali apakah fungsi kirimPesanWA() tersedia dan tidak mengalami konflik dengan JavaScript lain yang digunakan oleh template Blogger.
Apakah Form Order WhatsApp Membutuhkan Database?
Form order sederhana seperti contoh di atas tidak membutuhkan database. Data hanya digunakan untuk membuat pesan WhatsApp di sisi browser.
Artinya, formulir tersebut bukan sistem toko online lengkap yang menyimpan data pesanan secara otomatis. Setelah pesan dibuka di WhatsApp, proses pemesanan selanjutnya dilakukan melalui percakapan antara pelanggan dan admin.
Jika Anda membutuhkan sistem yang dapat menyimpan pesanan, menghitung stok, mengelola pembayaran, atau memiliki dashboard admin, diperlukan sistem yang lebih kompleks dibandingkan form WhatsApp sederhana.
Tips Menggunakan Form Order di Blogspot
- Gunakan kolom yang benar-benar diperlukan agar formulir tidak terlalu panjang.
- Gunakan label yang jelas agar pengunjung memahami informasi yang harus diisi.
- Pastikan nomor WhatsApp aktif dan dapat menerima pesan dari pelanggan.
- Uji formulir secara berkala setelah melakukan perubahan pada template.
- Pastikan tampilan mobile nyaman digunakan karena banyak pengguna mengakses blog melalui smartphone.
- Berikan informasi harga dan produk dengan jelas agar pelanggan tidak harus bertanya mengenai informasi dasar.
- Jaga data pelanggan dan hindari meminta informasi pribadi yang tidak diperlukan untuk proses pemesanan.
Kesimpulan
Cara membuat form order WhatsApp di Blogger dapat dilakukan menggunakan HTML, CSS, dan JavaScript tanpa membutuhkan database atau plugin tambahan untuk versi sederhana.
Dengan form ini, pengunjung dapat mengisi data seperti nama, produk, dan alamat, kemudian membuka WhatsApp dengan pesan pesanan yang sudah tersusun otomatis. Metode tersebut dapat menjadi alternatif praktis bagi pemilik blog, toko online sederhana, UMKM, maupun penyedia jasa yang menggunakan WhatsApp sebagai media komunikasi dengan pelanggan.
Anda juga dapat mengembangkan formulir sesuai kebutuhan dengan menambahkan kolom jumlah produk, ukuran, warna, catatan pesanan, pilihan pengiriman, maupun informasi lainnya.
Sebelum digunakan secara luas, pastikan Anda menguji formulir pada desktop dan smartphone, memeriksa nomor WhatsApp tujuan, serta memastikan seluruh data pesanan dapat diteruskan dengan benar.
FAQ Form Order WhatsApp Blogger
Apakah form order WhatsApp bisa dipasang di Blogger?
Ya. Form order WhatsApp dapat dipasang di Blogger menggunakan HTML, CSS, dan JavaScript. Kode dapat ditempatkan pada postingan maupun halaman statis melalui mode Tampilan HTML.
Apakah form order WhatsApp membutuhkan plugin?
Tidak. Form order sederhana dapat dibuat tanpa plugin tambahan dengan memanfaatkan HTML, CSS, JavaScript, dan tautan WhatsApp.
Bagaimana cara mengganti nomor WhatsApp pada form?
Ganti nilai pada variabel nomorWA dengan nomor WhatsApp tujuan menggunakan format internasional tanpa tanda tambah, spasi, atau tanda strip.
Apakah form order WhatsApp bisa digunakan di HP?
Ya. Form dapat digunakan melalui perangkat smartphone. Ketika tombol diklik, browser dapat mengarahkan pengguna ke aplikasi WhatsApp atau WhatsApp Web sesuai perangkat dan kondisi pengguna.
Apakah data pesanan disimpan di database?
Tidak. Contoh form ini hanya memproses data di browser untuk membuat pesan WhatsApp. Data tidak disimpan pada database.
Apakah kolom form bisa ditambah?
Ya. Anda dapat menambahkan kolom seperti jumlah pesanan, ukuran, warna, nomor telepon, catatan, atau informasi lainnya dengan menyesuaikan HTML dan JavaScript.