Cara Membuat Form Order WhatsApp Otomatis di Blogger (Tanpa Plugin)

3/27/2026
Cara Membuat Form Order WhatsApp Otomatis di Blogger Tanpa Plugin

Memulai bisnis online menggunakan Blogger dapat menjadi pilihan praktis untuk membuat halaman promosi, katalog produk, maupun toko online sederhana. Salah satu metode pemesanan yang banyak digunakan adalah order melalui WhatsApp, karena calon pembeli dapat langsung berkomunikasi dengan penjual tanpa harus menggunakan sistem checkout yang kompleks.

Jika Anda ingin membuat proses pemesanan menjadi lebih terstruktur, Anda dapat menambahkan form order WhatsApp di Blogger. Formulir ini memungkinkan pengunjung mengisi informasi seperti nama, produk yang dipesan, dan alamat pengiriman. Setelah tombol diklik, data tersebut akan disusun menjadi pesan dan diteruskan ke WhatsApp.

Pada tutorial ini, kita akan membahas cara membuat form order WhatsApp otomatis di Blogger tanpa plugin menggunakan kombinasi HTML, CSS, dan JavaScript.

Apa Itu Form Order WhatsApp di Blogger?

Form order WhatsApp adalah formulir pemesanan yang dibuat menggunakan HTML dan JavaScript untuk membantu pengunjung mengirim detail pesanan melalui WhatsApp.

Berbeda dengan toko online yang menggunakan sistem keranjang dan database, metode ini menggunakan WhatsApp sebagai media komunikasi untuk menyelesaikan proses pemesanan. Data yang dimasukkan ke dalam formulir akan disusun menjadi format pesan sehingga pembeli tidak perlu mengetik ulang seluruh informasi secara manual.

Form seperti ini cocok digunakan untuk berbagai kebutuhan, seperti:

  • Toko online sederhana berbasis Blogger.
  • Penjualan produk fisik.
  • Pemesanan makanan dan minuman.
  • Jasa atau layanan tertentu.
  • Katalog produk dengan pemesanan melalui WhatsApp.
  • Landing page produk berbasis Blogger.

Bagaimana Cara Kerja Form Order WhatsApp?

Formulir ini terdiri dari tiga komponen utama, yaitu HTML, CSS, dan JavaScript.

HTML untuk Membuat Formulir

HTML digunakan untuk membuat struktur formulir seperti input nama, detail pesanan, alamat pengiriman, pilihan file, dan tombol pengiriman.

CSS untuk Mengatur Tampilan

CSS digunakan untuk membuat tampilan formulir menjadi lebih rapi. Misalnya dengan mengatur warna latar belakang, jarak antarinput, ukuran teks, border, radius, serta tampilan tombol.

JavaScript untuk Memproses Pesanan

JavaScript berfungsi mengambil data dari formulir, melakukan validasi sederhana, menyusun pesan, kemudian membuat tautan WhatsApp berdasarkan nomor tujuan yang telah ditentukan.

Dengan kombinasi ketiga teknologi tersebut, Anda dapat membuat form pemesanan sederhana tanpa harus memasang plugin tambahan.

Manfaat Form Order WhatsApp untuk Blogger

Penggunaan formulir pemesanan dapat membuat proses komunikasi antara calon pembeli dan penjual menjadi lebih terstruktur.

  • Mempermudah proses pemesanan karena pembeli cukup mengisi formulir.
  • Mengurangi kesalahan penulisan karena format pesan dibuat oleh script.
  • Tidak membutuhkan plugin toko online untuk kebutuhan pemesanan sederhana.
  • Dapat disesuaikan dengan desain blog menggunakan CSS.
  • Cocok untuk perangkat mobile karena formulir dapat dibuat dengan layout responsif.
  • Mempercepat komunikasi karena data pesanan langsung diarahkan ke WhatsApp.

Namun, metode ini bukan pengganti penuh sistem ecommerce. Form tersebut tidak menyediakan database pesanan, pengelolaan stok, pembayaran otomatis, atau sistem checkout seperti platform toko online khusus.

Contoh Penggunaan Form Order WhatsApp

Misalnya Anda menjual produk melalui sebuah artikel Blogger. Setelah menjelaskan produk, harga, dan informasi lainnya, Anda dapat menempatkan formulir pemesanan di bagian bawah artikel.

Calon pembeli kemudian mengisi nama, produk yang ingin dipesan, dan alamat pengiriman. Setelah tombol Kirim Pesanan via WhatsApp ditekan, browser akan membuka WhatsApp dengan pesan yang sudah disusun berdasarkan data formulir.

Pembeli kemudian dapat memeriksa kembali pesan tersebut sebelum mengirimkannya kepada penjual.

Kode Lengkap Form Order WhatsApp Blogger

Berikut kode yang dapat digunakan untuk membuat formulir order WhatsApp sederhana di Blogger. Kode terdiri dari tiga bagian utama: CSS, HTML, dan JavaScript.

1. Kode CSS Form Order WhatsApp

CSS berikut digunakan untuk mengatur tampilan formulir agar terlihat lebih bersih dan mudah digunakan.

/* 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;
}

2. Kode HTML Form Order

Setelah CSS disiapkan, gunakan HTML berikut untuk membuat tampilan formulir pemesanan.

<!-- 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.
      Setelah WhatsApp terbuka, lampirkan file tersebut secara manual.
    </span>
  </div>

  <button class="tombol-wa" onclick="kirimPesananWA()">
    Kirim Pesanan via WhatsApp
  </button>

</div>

3. Kode JavaScript Form Order WhatsApp

JavaScript berikut berfungsi mengambil data formulir dan membuat pesan WhatsApp secara otomatis.

<!-- Logika Pengiriman WhatsApp -->
<script type='text/javascript'>
//<![CDATA[
function kirimPesananWA() {
  var inputNama = document.getElementById("wa-nama").value.trim();
  var inputPesanan = document.getElementById("wa-pesanan").value.trim();
  var inputAlamat = document.getElementById("wa-alamat").value.trim();
  var inputBukti = document.getElementById("wa-bukti").value;
  var pesanError = document.getElementById("pesan-error");

  /* Ganti dengan nomor WhatsApp Anda */
  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:* " + encodeURIComponent(inputNama) + "%0A";
  pesan += "*Detail Pesanan:* " + encodeURIComponent(inputPesanan) + "%0A";
  pesan += "*Alamat Lengkap:* " + encodeURIComponent(inputAlamat) + "%0A%0A";

  if (inputBukti !== "") {
    pesan += "_Saya sudah menyiapkan bukti pembayaran dan akan melampirkannya di obrolan ini._%0A%0A";
  } else {
    pesan += "_Saya belum menyiapkan bukti pembayaran saat ini._%0A%0A";
  }

  pesan += "Mohon segera diproses. Terima kasih!";

  var tautanWA = "https://wa.me/" + nomorTujuan + "?text=" + pesan;

  window.open(tautanWA, "_blank");
}
//]]>
</script>

Catatan Penting Tentang Upload Bukti Pembayaran

Bagian Unggah Bukti Pembayaran pada contoh di atas perlu dipahami dengan benar. Input file hanya digunakan untuk mendeteksi apakah pengguna sudah memilih sebuah file.

File gambar tidak dikirim secara otomatis melalui tautan WhatsApp. Script hanya menambahkan informasi ke dalam pesan bahwa pengguna telah memilih bukti pembayaran. Setelah WhatsApp terbuka, pembeli tetap perlu melampirkan foto bukti pembayaran secara manual pada ruang chat.

Hal ini berbeda dengan sistem upload file yang menggunakan server atau layanan penyimpanan khusus. Jika ingin membuat proses upload bukti pembayaran benar-benar otomatis, diperlukan sistem backend atau layanan pihak ketiga untuk menerima dan menyimpan file tersebut.

Cara Memasang Form Order WhatsApp di Blogger

Langkah 1: Buka Blogger

Masuk ke dashboard Blogger dan buka artikel atau halaman tempat Anda ingin menampilkan formulir pemesanan.

Langkah 2: Gunakan Mode HTML

Pada editor Blogger, ubah tampilan dari mode visual ke Tampilan HTML. Hal ini penting karena kode HTML, CSS, dan JavaScript harus ditempatkan sebagai kode, bukan sebagai teks biasa.

Langkah 3: Masukkan Kode CSS

Salin kode CSS dan letakkan pada bagian yang sesuai. Untuk penggunaan pada satu halaman, CSS dapat ditempatkan bersama kode formulir selama struktur HTML Blogger yang digunakan mendukungnya.

Langkah 4: Masukkan HTML Formulir

Salin kode HTML formulir dan letakkan di lokasi yang ingin digunakan sebagai area pemesanan. Misalnya, Anda dapat menempatkannya setelah informasi produk atau harga.

Langkah 5: Masukkan JavaScript

Tempelkan kode JavaScript pada bagian setelah formulir atau area yang sesuai pada halaman HTML Blogger.

Langkah 6: Ganti Nomor WhatsApp

Bagian paling penting adalah mengganti nomor tujuan pada JavaScript:

var nomorTujuan = "6281234567890";

Ganti angka tersebut dengan nomor WhatsApp Anda menggunakan format kode negara.

Untuk nomor Indonesia, gunakan awalan 62 dan hilangkan angka 0 pada awal nomor. Jangan menggunakan tanda +, spasi, atau tanda pemisah lainnya.

Contoh:

081234567890

menjadi:

6281234567890

Cara Mengubah Isi Pesan WhatsApp

Anda juga dapat menyesuaikan format pesan yang dikirim kepada admin. Bagian berikut merupakan contoh pesan pembuka:

var pesan = "Halo Admin, saya ingin melakukan pemesanan.%0A%0A";

Anda dapat mengubah kalimat tersebut sesuai kebutuhan toko atau bisnis.

Misalnya, Anda dapat menambahkan informasi mengenai jumlah produk, varian, catatan pembeli, atau metode pembayaran. Semakin lengkap data yang dikumpulkan melalui formulir, semakin terstruktur pula pesan yang diterima oleh admin.

Cara Menguji Form Order WhatsApp

Setelah formulir selesai dipasang, lakukan pengujian sebelum halaman digunakan oleh pelanggan.

1. Isi Nama Pembeli

Masukkan nama pada kolom nama dan pastikan data dapat diketik dengan normal.

2. Isi Detail Pesanan

Masukkan nama produk atau layanan yang ingin diuji.

3. Isi Alamat

Masukkan alamat pengiriman sebagai data percobaan.

4. Pilih Bukti Pembayaran

Jika ingin menguji bagian upload, pilih sebuah gambar dari perangkat. Perlu diingat bahwa gambar tersebut tidak akan otomatis menjadi lampiran WhatsApp melalui script ini.

5. Klik Tombol Kirim

Klik Kirim Pesanan via WhatsApp. Browser seharusnya membuka tautan WhatsApp dengan pesan yang sudah diisi berdasarkan data formulir.

6. Periksa Isi Pesan

Pastikan nama, pesanan, alamat, dan informasi lainnya tampil sesuai dengan data yang dimasukkan.

Kesalahan Umum Saat Membuat Form Order WhatsApp

Nomor WhatsApp Tidak Menggunakan Format Internasional

Kesalahan yang sering terjadi adalah memasukkan nomor seperti 081234567890 langsung ke variabel nomor tujuan. Gunakan format kode negara, misalnya 6281234567890 untuk nomor Indonesia.

Kode Ditempel pada Mode Visual

Jika kode HTML dan JavaScript ditempelkan pada mode penulisan visual, kode dapat tampil sebagai teks atau tidak bekerja sebagaimana mestinya. Gunakan mode HTML ketika memasukkan kode.

Tombol Tidak Membuka WhatsApp

Periksa kembali nomor tujuan, kode JavaScript, dan struktur HTML. Pastikan tidak ada karakter yang terhapus atau berubah ketika kode disalin.

Pesan Tidak Tampil dengan Benar

Periksa bagian JavaScript yang menyusun variabel pesan. Jika Anda menambahkan informasi baru, pastikan sintaks JavaScript tetap benar.

Bukti Pembayaran Tidak Langsung Terkirim

Ini bukan kesalahan pada formulir. Pada kode ini, input file hanya mendeteksi apakah file telah dipilih. Browser tidak mengirim file tersebut melalui URL WhatsApp. Pengguna tetap perlu melampirkan bukti pembayaran secara manual setelah chat WhatsApp terbuka.

Tips Membuat Form Order Blogger Lebih Profesional

  • Gunakan label yang jelas untuk setiap kolom.
  • Jangan meminta informasi yang tidak diperlukan.
  • Gunakan placeholder sebagai contoh format pengisian.
  • Pastikan ukuran tombol mudah ditekan pada smartphone.
  • Gunakan desain yang sesuai dengan warna dan identitas bisnis.
  • Berikan validasi pada data penting sebelum membuka WhatsApp.
  • Uji formulir pada perangkat desktop dan smartphone.
  • Pastikan nomor WhatsApp tujuan sudah benar sebelum formulir digunakan pelanggan.

Apakah Form Order WhatsApp Membutuhkan Plugin?

Tidak. Formulir sederhana seperti ini dapat dibuat menggunakan HTML, CSS, dan JavaScript tanpa plugin toko online tambahan.

Namun, jika bisnis Anda membutuhkan fitur seperti database pesanan, manajemen stok, pembayaran otomatis, login pelanggan, upload file ke server, invoice, atau dashboard admin, maka diperlukan sistem yang lebih lengkap daripada sekadar formulir WhatsApp.

FAQ Form Order WhatsApp Blogger

Apakah form order WhatsApp bisa dibuat tanpa plugin?

Bisa. Form order sederhana dapat dibuat menggunakan HTML, CSS, dan JavaScript kemudian ditempatkan pada halaman atau artikel Blogger.

Apakah pembeli harus mengetik pesanan secara manual di WhatsApp?

Tidak. Data yang dimasukkan ke dalam formulir akan digunakan untuk menyusun pesan WhatsApp secara otomatis. Pembeli kemudian dapat memeriksa pesan tersebut sebelum mengirimkannya.

Bagaimana cara mengganti nomor WhatsApp tujuan?

Ganti nilai variabel nomorTujuan pada JavaScript dengan nomor WhatsApp Anda menggunakan format kode negara tanpa tanda plus, spasi, atau angka nol di awal.

Apakah bukti pembayaran bisa terkirim otomatis ke WhatsApp?

Tidak dengan kode sederhana ini. Input file hanya mendeteksi apakah pengguna memilih file. Setelah WhatsApp terbuka, pengguna harus melampirkan foto bukti pembayaran secara manual.

Apakah form order ini bisa digunakan untuk toko online Blogger?

Bisa untuk kebutuhan pemesanan sederhana. Form dapat digunakan pada katalog produk, halaman promosi, landing page, maupun artikel penjualan yang menggunakan WhatsApp sebagai media komunikasi.

Apakah form order WhatsApp bisa dibuat responsive?

Bisa. CSS formulir dapat dibuat menggunakan lebar fleksibel sehingga lebih mudah menyesuaikan dengan area layar smartphone maupun desktop.

Apakah form ini menyimpan data pelanggan?

Tidak. Kode ini tidak menggunakan database. Data hanya digunakan untuk membuat pesan WhatsApp dan tidak disimpan oleh script pada server.

Kesimpulan

Form order WhatsApp di Blogger dapat menjadi solusi sederhana bagi pemilik blog yang ingin menyediakan sistem pemesanan tanpa menggunakan plugin ecommerce. Dengan kombinasi HTML, CSS, dan JavaScript, pengunjung dapat mengisi data seperti nama, pesanan, dan alamat kemudian mengirimkannya melalui WhatsApp.

Keunggulan metode ini adalah proses pembuatannya relatif sederhana dan dapat disesuaikan dengan desain halaman Blogger. Anda juga dapat mengubah tampilan formulir, format pesan, serta informasi yang ingin dikumpulkan dari calon pembeli.

Namun, penting untuk memahami keterbatasannya. Formulir ini tidak memiliki database, sistem pembayaran otomatis, maupun upload bukti pembayaran langsung ke WhatsApp. Input file pada contoh hanya mendeteksi pilihan file, sehingga bukti pembayaran tetap perlu dilampirkan secara manual setelah WhatsApp terbuka.

Jika kebutuhan bisnis masih sederhana dan proses transaksi dilakukan melalui komunikasi langsung, form order WhatsApp tanpa plugin di Blogger dapat menjadi pilihan praktis untuk membuat proses pemesanan lebih terstruktur.

Baca Artikel Lainnya

Kembali ke Beranda
Link profil berhasil disalin!