21/09/2026
Berikut adalah kode lengkap untuk Form Order (Formulir Pemesanan) berbasis Single Page Application (HTML, CSS, dan JavaScript) yang dirancang agar kompatibel dengan semua jenis template Blogger (Blogspot).
Form ini dilengkapi dengan fitur perhitungan otomatis, pengiriman pesanan langsung via WhatsApp, fitur rekap data pemesanan (unduh ke Excel/CSV), serta pesan sukses setelah transaksi.
Cara Pasang di Blogger:
Masuk ke Blogger Dashboard > Tata Letak (Layout) atau buat Halaman Baru (Pages).
Tambahkan widget/gadget baru bertipe HTML/JavaScript, atau pada Halaman Baru ubah mode editor ke Tampilan HTML ().
Salin dan tempel (paste) seluruh kode di bawah ini.
.order-card {
background: ;
max-width: 650px;
margin: 0 auto;
padding: 25px;
border-radius: 12px;
box-shadow: 0 4px 15px rgba(0,0,0,0.08);
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
box-sizing: border-box;
}
.order-card * { box-sizing: border-box; }
.order-card h2 {
text-align: center;
color: #333;
margin-bottom: 5px;
font-size: 24px;
}
.store-subtitle {
text-align: center;
color: #666;
font-size: 15px;
font-weight: 600;
margin-bottom: 25px;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.order-group {
margin-bottom: 15px;
}
.order-group label {
display: block;
margin-bottom: 6px;
font-weight: 600;
color: #444;
font-size: 14px;
}
.order-group input, .order-group select, .order-group textarea {
width: 100%;
padding: 10px 12px;
border: 1px solid ;
border-radius: 6px;
font-size: 14px;
outline: none;
transition: border-color 0.2s;
}
.order-group input:focus, .order-group select:focus, .order-group textarea:focus {
border-color: ;
}
.order-row {
display: flex;
gap: 15px;
}
.order-row .order-group {
flex: 1;
}
.order-total-box {
background: ;
padding: 15px;
border-radius: 6px;
margin-bottom: 20px;
border-left: 4px solid ;
}
.order-total-box p {
margin: 0;
font-size: 16px;
color: #333;
font-weight: bold;
}
.order-btn-group {
display: flex;
gap: 10px;
}
.order-btn {
flex: 1;
padding: 12px;
border: none;
border-radius: 6px;
font-size: 14px;
font-weight: bold;
cursor: pointer;
color: ;
transition: background 0.2s;
}
.btn-submit { background-color: ; }
.btn-submit:hover { background-color: #218838; }
.btn-download { background-color: ; }
.btn-download:hover { background-color: ; }
-success-msg {
display: none;
background: ;
color: #155724;
padding: 15px;
border-radius: 6px;
text-align: center;
margin-top: 15px;
font-weight: 500;
line-height: 1.5;
}
Formulir Pemesanan Barang
NAMA TOKO / INSTANSI
Tanggal Pemesanan
Nama Lengkap Pembeli
Nomor WhatsApp
Alamat Pembeli
Nama Barang Yang Dibeli
Warna
Ukuran
Jumlah Barang
Harga Satuan (Rp)
Total Pembayaran: Rp 0
Kirim Pemesanan (WhatsApp)
Download Rekap PDF
Berhasil melakukan pembayaran dan pemesanan ke WhatsApp penjual!
Terima kasih atas kepercayaannya telah berbelanja di kami.!
document.addEventListener("DOMContentLoaded", function () {
// Set otomatis tanggal hari ini pada input tanggal
const today = new Date().toISOString().split('T')[0];
document.getElementById("orderDate").value = today;
const qtyInput = document.getElementById("productQty");
const priceInput = document.getElementById("productPrice");
const totalText = document.getElementById("totalText");
const form = document.getElementById("whatsappOrderForm");
const successMsg = document.getElementById("order-success-msg");
// Fungsi Hitung Total Otomatis
function calculateTotal() {
const qty = parseFloat(qtyInput.value) || 0;
const price = parseFloat(priceInput.value) || 0;
const total = qty * price;
totalText.innerText = "Rp " + total.toLocaleString("id-ID");
return total;
}
qtyInput.addEventListener("input", calculateTotal);
priceInput.addEventListener("input", calculateTotal);
// Submit Form & Kirim ke WhatsApp
form.addEventListener("submit", function (e) {
e.preventDefault();
const sellerPhone = document.getElementById("sellerPhone").value;
const storeName = document.getElementById("storeName").value;
const rawDate = document.getElementById("orderDate").value;
const formattedDate = rawDate.split('-').reverse().join('-');
const buyerName = document.getElementById("buyerName").value;
const buyerPhone = document.getElementById("buyerPhone").value;
const buyerAddress = document.getElementById("buyerAddress").value;
const productName = document.getElementById("productName").value;
const productColor = document.getElementById("productColor").value || "-";
const productSize = document.getElementById("productSize").value || "-";
const productQty = qtyInput.value;
const productPrice = parseFloat(priceInput.value) || 0;
const grandTotal = productQty * productPrice;
// Simpan data ke localStorage untuk Rekap PDF
let orderHistory = JSON.parse(localStorage.getItem("order_recap_data")) || [];
const newOrder = {
toko: storeName,
tanggalPesan: formattedDate,
nama: buyerName,
telepon: buyerPhone,
alamat: buyerAddress,
barang: productName,
warna: productColor,
ukuran: productSize,
jumlah: productQty,
hargaSatuan: productPrice,
totalPembayaran: grandTotal
};
orderHistory.push(newOrder);
localStorage.setItem("order_recap_data", JSON.stringify(orderHistory));
// Format Pesan WhatsApp
let waMessage = `Halo Admin *${storeName}*, saya ingin memesan produk berikut:%0A%0A` +
`*Tanggal Pesan:* ${formattedDate}%0A` +
`*Nama Pembeli:* ${buyerName}%0A` +
`*No. WhatsApp:* ${buyerPhone}%0A` +
`*Alamat:* ${buyerAddress}%0A%0A` +
`*Nama Barang:* ${productName}%0A` +
`*Warna:* ${productColor}%0A` +
`*Ukuran:* ${productSize}%0A` +
`*Jumlah:* ${productQty}%0A` +
`*Harga Satuan:* Rp ${productPrice.toLocaleString("id-ID")}%0A` +
`*Total Pembayaran:* Rp ${grandTotal.toLocaleString("id-ID")}%0A%0A` +
`Mohon segera diproses, terima kasih!`;
// Tampilkan pesan sukses dan ucapan
successMsg.style.display = "block";
// Buka WhatsApp setelah jeda singkat
setTimeout(function () {
const waUrl = `https://api.whatsapp.com/send?phone=${sellerPhone}&text=${waMessage}`;
window.open(waUrl, "_blank");
}, 800);
});
// Fitur Download Rekap Pemesanan dalam Format PDF yang Rapi
document.getElementById("downloadPdfBtn").addEventListener("click", function () {
let orderHistory = JSON.parse(localStorage.getItem("order_recap_data")) || [];
if (orderHistory.length === 0) {
alert("Belum ada data pemesanan yang tersimpan di perangkat ini.");
return;
}
if (typeof window.jspdf === 'undefined') {
alert("Library PDF sedang dimuat atau koneksi internet terganggu. Silakan coba beberapa saat lagi.");
return;
}
const { jsPDF } = window.jspdf;
const doc = new jsPDF('l', 'mm', 'a4'); // Landscape
const activeStore = document.getElementById("storeName").value || "Laporan Toko";
// Header Dokumen PDF
doc.setFont("helvetica", "bold");
doc.setFontSize(16);
doc.setTextColor(40, 40, 40);
doc.text("REKAP PEMESANAN: " + activeStore.toUpperCase(), 14, 15);
doc.setFont("helvetica", "normal");
doc.setFontSize(10);
doc.setTextColor(100, 100, 100);
doc.text("Dicetak pada: " + new Date().toLocaleString("id-ID"), 14, 22);
// Mapping Data untuk Tabel PDF
let tableRows = [];
let totalSemuaPendapatan = 0;
orderHistory.forEach((item, index) => {
totalSemuaPendapatan += item.totalPembayaran;
tableRows.push([
index + 1,
item.toko,
item.tanggalPesan,
item.nama,
item.telepon,
item.alamat,
item.barang,
item.warna,
item.ukuran,
item.jumlah,
"Rp " + Number(item.hargaSatuan).toLocaleString("id-ID"),
"Rp " + Number(item.totalPembayaran).toLocaleString("id-ID")
]);
});
// Pembuatan Tabel Menggunakan plugin autoTable
doc.autoTable({
startY: 28,
head: [[
'No', 'Nama Toko', 'Tgl Pesan', 'Nama Pembeli', 'No. WhatsApp', 'Alamat',
'Nama Barang', 'Warna', 'Ukuran', 'Jml', 'Harga Satuan', 'Total'
]],
body: tableRows,
theme: 'grid',
headStyles: {
fillColor: [40, 116, 166],
textColor: 255,
fontStyle: 'bold',
halign: 'center',
fontSize: 8.5
},
bodyStyles: {
fontSize: 8,
textColor: [50, 50, 50]
},
columnStyles: {
0: { halign: 'center', cellWidth: 8 },
1: { cellWidth: 25 },
2: { cellWidth: 22, halign: 'center' },
3: { cellWidth: 25 },
4: { cellWidth: 22 },
5: { cellWidth: 35 },
6: { cellWidth: 28 },
7: { cellWidth: 16, halign: 'center' },
8: { cellWidth: 16, halign: 'center' },
9: { cellWidth: 10, halign: 'center' },
10: { halign: 'right', cellWidth: 22 },
11: { halign: 'right', cellWidth: 25 }
},
alternateRowStyles: {
fillColor: [245, 247, 250]
}
});
// Informasi Ringkasan Total Pendapatan di Bawah Tabel
let finalY = doc.lastAutoTable.finalY + 10;
doc.setFont("helvetica", "bold");
doc.setFontSize(11);
doc.setTextColor(0, 0, 0);
doc.text("Total Keseluruhan Pendapatan: Rp " + totalSemuaPendapatan.toLocaleString("id-ID"), 14, finalY);
// Simpan File PDF
doc.save("rekap_pemesanan_" + activeStore.replace(/\s+/g, '_').toLowerCase() + ".pdf");
});
});
Penyesuaian Penting:
Nomor WhatsApp Penjual: Cari kode di dalam kode di atas, lalu ubah angka 6281234567890 dengan nomor WhatsApp Anda yang sebenarnya (gunakan awalan 62 tanpa tanda + atau spasi).
Fitur Rekap: Rekap data otomatis tersimpan di memori browser lokal (localStorage) setiap kali tombol kirim ditekan, sehingga Anda bisa mengunduhnya kapan saja dalam format Pdf (bisa dibuka langsung menggunakan PDF).
