Cara Bikin Sistem Pre-Order Otomatis di Blogger untuk Jualan Hoodie

Apakah Anda sedang menjalankan bisnis pakaian dan ingin menerima pesanan secara online dengan cara yang efisien dan tanpa ribet? Membangun sistem pre-order hoodie bisa menjadi solusi cerdas dan praktis, terutama jika Anda belum ingin menggunakan sistem website e-commerce profesional. Dalam artikel ini, kita akan membahas cara membuat sistem pre-order hoodie menggunakan HTML, Google Form, dan Google Sheets, lengkap dengan fitur pelacakan status pesanan.

Mengapa Menggunakan Sistem Pre-Order?

Sistem pre-order sangat cocok untuk bisnis yang menjual produk terbatas atau dibuat berdasarkan pesanan. Misalnya, jika Anda menjual hoodie dengan desain tertentu, Anda bisa mengumpulkan pesanan terlebih dahulu, baru memproduksi sesuai permintaan. Ini mengurangi risiko stok menumpuk dan membantu perencanaan produksi.

Dengan menggunakan tools gratis seperti Google Form dan Google Sheets, Anda bisa membuat sistem pre-order yang:

• Menyimpan data pesanan secara otomatis
• Memberikan nomor pesanan secara otomatis
• Memungkinkan pelanggan melacak status pesanan mereka
• Mudah diintegrasikan ke halaman HTML sederhana
• Tampilan produk hoodie dengan tiga pilihan warna.
• Formulir pemesanan terhubung ke Google Form.
• Nomor pesanan otomatis.
• Pop-up notifikasi sukses pengiriman.
• Halaman status pesanan (status.html) untuk melacak data berdasarkan nomor pesanan.
• Proses integrasi data dari Google Sheets via Google Apps Script.
• Tampilan status progres dengan class `.step.active`.
• Tabel HTML responsif dan tombol sejajar.
• FAQ dengan format accordion.
• Section Syarat dan Ketentuan.

Langkah 1: Buat Google Form untuk Pre-Order

Google Form akan menjadi tempat pelanggan mengisi data pemesanan. Formulir ini bisa berisi kolom seperti:

• Nama Lengkap
• Nomor WhatsApp
• Alamat Lengkap
• Pilihan Produk (Hoodie)
• Warna (Hitam, Putih, Merah)
• Ukuran (S, M, L, XL, dll)
• Jumlah Pemesanan

Tambahkan satu kolom tambahan di Google Sheet (hasil tanggapan form) untuk menyimpan nomor pesanan. Kita bisa membuat nomor pesanan otomatis menggunakan Google Apps Script.

Script untuk Nomor Pesanan Otomatis

Buka Google Sheet > Ekstensi > Apps Script. Tambahkan kode berikut:

function onFormSubmit(e) {
const sheet = SpreadsheetApp.getActiveSpreadsheet().getActiveSheet();
const row = sheet.getLastRow();
const timestamp = new Date();
const orderNumber = 'ORD' + timestamp.getTime();
sheet.getRange(row, 1).setValue(orderNumber);
sheet.getRange(row, 9).setValue(timestamp); // Simpan tanggal
}

Pastikan Anda sudah mengatur kolom A untuk nomor pesanan dan kolom I untuk tanggal pesanan.

Integrasi Google Form dan Google Sheets

• Google Form digunakan sebagai endpoint form pemesanan.
• Google Sheets menerima data dan menyimpan semua pesanan.
• Google Apps Script digunakan untuk membaca data berdasarkan parameter `nomor`.

function doGet(e) {
const nomor = e.parameter.nomor;
if (!nomor) {
return ContentService.createTextOutput(JSON.stringify({ error: "Nomor pesanan tidak diberikan." }))
.setMimeType(ContentService.MimeType.JSON);
}


const sheet = SpreadsheetApp.getActiveSpreadsheet().getSheetByName("Sheet1");
const data = sheet.getDataRange().getValues();


for (let i = 1; i < data.length; i++) {
if (data[i][0].toString().trim() === nomor.trim()) {
return ContentService.createTextOutput(JSON.stringify({
nomor: data[i][0], nama: data[i][1], produk: data[i][2], ukuran: data[i][3],
jumlah: data[i][4], total: data[i][5], status: data[i][6], tanggal: data[i][7],
})).setMimeType(ContentService.MimeType.JSON);
}
}


return ContentService.createTextOutput(JSON.stringify({ error: "Data tidak ditemukan." }))
.setMimeType(ContentService.MimeType.JSON);
}

Langkah 2: Buat Form HTML

Berikut adalah contoh form HTML yang akan digunakan untuk mengirim data ke Google Form tanpa membuka halaman baru.

<form id="preorder-form">
<input type="text" name="entry.123456" placeholder="Nama Lengkap" required />
<select name="entry.234567">
<option value="Hitam">Hitam</option>
<option value="Putih">Putih</option>
<option value="Merah">Merah</option>
</select>
<button type="submit">Kirim Pre-Order</button>
</form>

Ganti entry.123456 dengan ID input dari Google Form Anda. Untuk mendapatkannya, buka form Anda, inspect field-nya, dan ambil value dari name.

Langkah 3: Kirim Data Menggunakan Fetch API

document.getElementById("preorder-form").addEventListener("submit", function(e) { e.preventDefault(); const data = new FormData(e.target); fetch("https://docs.google.com/forms/d/e/YOUR_FORM_ID/formResponse", { method: "POST", mode: "no-cors", body: data }).then(() => { alert("Pesanan berhasil dikirim!"); e.target.reset(); }).catch(err => alert("Terjadi kesalahan.")); });

Langkah 4: Buat Halaman Pelacakan Status

Buat halaman status.html dan tambahkan skrip untuk membaca parameter nomor pesanan dari URL.

const urlParams = new URLSearchParams(window.location.search);
const nomor = urlParams.get("nomor");

fetch(`https://script.google.com/macros/s/YOUR_SCRIPT_ID/exec?nomor=${nomor}`)
.then(response => response.json())
.then(data => {
if (data.error) {
document.getElementById("status-area").innerText = data.error;
} else {
document.getElementById("status-area").innerText = `
Nama: ${data.nama}
Produk: ${data.produk}
Warna: ${data.warna}
Status: ${data.status}
Tanggal: ${formatDateTime(data.tanggal)}
`;
}
});

function formatDateTime(input) {
const d = new Date(input);
return `${d.getDate()}/${d.getMonth() + 1}/${d.getFullYear()} ${d.getHours()}:${d.getMinutes()}`;
}

Langkah 5: Script Google untuk Fetch Data dari Sheet

function doGet(e) {
const nomor = e.parameter.nomor;
const sheet = SpreadsheetApp.getActiveSpreadsheet().getSheetByName("Form Responses 1");
const data = sheet.getDataRange().getValues();
for (let i = 1; i < data.length; i++) {
if (data[i][0] == nomor) {
return ContentService.createTextOutput(JSON.stringify({
nomor: data[i][0],
nama: data[i][1],
produk: data[i][2],
warna: data[i][3],
status: data[i][7],
tanggal: data[i][8]
})).setMimeType(ContentService.MimeType.JSON);
}
}
return ContentService.createTextOutput(JSON.stringify({ error: "Nomor tidak ditemukan" }));
}

6. Pop-Up Notifikasi Sukses

document.getElementById("preorder-form").addEventListener("submit", function(e) {
e.preventDefault();
const form = e.target;
const data = new FormData(form);


fetch("https://docs.google.com/forms/d/e/YOUR_FORM_ID/formResponse", {
method: "POST",
mode: "no-cors",
body: data
}).then(() => {
document.getElementById("popupSukses").classList.remove("hidden");
form.reset();
});
});


function tutupPopup() {
document.getElementById("popupSukses").classList.add("hidden");
}

7. Navigasi dan Kembali ke Halaman Sebelumnya

<a href="index.html" class="back-button">← Kembali</a>

Tambahkan Syarat & Ketentuan

Selalu tambahkan section "Syarat dan Ketentuan" di halaman Anda. Misalnya:

• Pesanan tidak dapat dibatalkan.
• Pembayaran dilakukan maksimal 1x24 jam.
• Produksi dimulai setelah masa pre-order ditutup.

FAQ Accordion

Gunakan HTML + JavaScript Accordion untuk menjawab pertanyaan umum. Contoh:

<div class="accordion">
<button class="accordion-btn">Berapa lama waktu produksi?</button>
<div class="panel">Produksi memakan waktu 7-10 hari kerja.</div>
</div>

Tambahkan CSS agar responsif dan tampil menarik.

Demo

Tampilan demo bisa lihat di Form dan Kode Pemesanan

Kesimpulan

Dengan sistem ini, Anda bisa menerima pesanan hoodie secara online, menyimpan data dengan rapi, dan memberikan akses pelacakan pesanan kepada pelanggan. Semua tanpa perlu database atau backend mahal. Ini adalah solusi ringan dan efisien bagi bisnis yang ingin tetap profesional dan modern.