Bạn đang cần một cách đơn giản để thu thập dữ liệu từ người dùng trên trang web của mình? Có thể là một form liên hệ, form đăng ký, hay một công cụ nhập liệu nội bộ?
Thông thường, việc này đòi hỏi phải có một máy chủ và cơ sở dữ liệu phức tạp. Tuy nhiên, trong bài viết này, tôi sẽ hướng dẫn bạn cách tạo một biểu mẫu HTML có thể gửi dữ liệu thẳng vào một trang Google Sheet mà không cần máy chủ, không cần cơ sở dữ liệu, và hoàn toàn miễn phí!
Lợi ích của phương pháp này:- Hoàn toàn miễn phí: Tận dụng hệ sinh thái có sẵn của Google.
- Không cần máy chủ (Serverless): Bạn không cần lo lắng về việc quản lý backend.
- Dữ liệu thời gian thực: Thông tin được cập nhật vào Google Sheet ngay khi người dùng nhấn gửi.
- Dễ dàng quản lý: Bạn có thể xem, sắp xếp, và phân tích dữ liệu ngay trên Google Sheet quen thuộc.
Hãy cùng bắt đầu nào!
Bước 1: Chuẩn bị "Cơ sở dữ liệu" Google Sheet
Đầu tiên, chúng ta cần một nơi để lưu trữ dữ liệu.Truy cập sheet.new để tạo một trang tính mới.
Đặt tên cho file Google Sheet của bạn (ví dụ: "Dữ liệu khách hàng").
Đặt tên cho trang tính (sheet tab) ở phía dưới thành KH.
Tại hàng đầu tiên, hãy tạo các tiêu đề cột tương ứng với các trường dữ liệu bạn muốn thu thập. Ví dụ:
- Mã Khách hàng
- Tên Khách hàng
- Số điện thoại
- Địa chỉ
- Ngày đăng ký
- Loại Khách hàng
- Hoạt động
- Timestamp (Cột này sẽ tự động ghi lại thời gian gửi)
Bước 2: Tạo "Cầu Nối" bằng Google Apps Script
Đây là phần quan trọng nhất, nó sẽ tạo ra một "cầu nối" để nhận dữ liệu từ form và ghi vào Sheet.Trong file Google Sheet, vào menu Tiện ích mở rộng (Extensions) > Apps Script
Một tab mới chứa trình soạn thảo mã sẽ mở ra. Hãy xóa toàn bộ mã mặc định và dán đoạn mã dưới đây vào:
// Hàm này xử lý yêu cầu POST từ form HTML
function doPost(e) {
try {
// Lấy trang tính có tên là 'KH'
var sheet = SpreadsheetApp.getActiveSpreadsheet().getSheetByName('KH');
// Lấy từng dữ liệu từ form gửi lên
var maKH = e.parameter.maKhachHang;
var tenKH = e.parameter.tenKhachHang;
var email = e.parameter.email;
var sdt = e.parameter.soDienThoai;
var diaChi = e.parameter.diaChi;
var ngayDK = e.parameter.ngayDangKy;
var loaiKH = e.parameter.loaiKhachHang;
var hoatDong = e.parameter.hoatDong ? "Có" : "Không";
var timestamp = new Date();
// Thêm một hàng mới vào cuối trang tính với đúng thứ tự cột
sheet.appendRow([maKH, tenKH, email, sdt, diaChi, ngayDK, loaiKH, hoatDong, timestamp]);
// Trả về thông báo thành công
return ContentService.createTextOutput(JSON.stringify({ 'result': 'success', 'message': 'Dữ liệu đã được lưu thành công!' })).setMimeType(ContentService.MimeType.JSON);
} catch (error) {
// Nếu có lỗi, trả về thông báo lỗi
return ContentService.createTextOutput(JSON.stringify({ 'result': 'error', 'message': error.toString() })).setMimeType(ContentService.MimeType.JSON);
}
}
// Hàm này xử lý khi có người truy cập trực tiếp vào URL
function doGet(e) {
return HtmlService.createHtmlOutput("<p>Để nhập liệu, vui lòng mở tệp HTML.</p>");
}
Triển khai ứng dụng web:
Ở góc trên bên phải, nhấp vào nút Triển khai (Deploy) > Lượt triển khai mới (New deployment).
Nhấp vào biểu tượng bánh răng, chọn loại là Ứng dụng web (Web app).
Trong phần cấu hình:
- Mô tả: Form nhập liệu khách hàng
- Thực thi với quyền: Tôi (địa chỉ email của bạn)
- Ai có quyền truy cập: Chọn Bất kỳ ai (Anyone) (Đây là bước cực kỳ quan trọng!)
- Nhấp Triển khai.
- Cấp quyền: Google sẽ yêu cầu bạn cấp quyền cho script.
- Chọn tài khoản Google của bạn.
- Nhấp vào Nâng cao (Advanced) > Đi tới [Tên dự án] (không an toàn).
- Nhấp Cho phép (Allow).
Sau khi thành công, một cửa sổ sẽ hiện ra. Hãy sao chép lại URL ứng dụng web (Web app URL). Chúng ta sẽ cần nó ở bước tiếp theo.
Bước 3: Tạo Form Nhập Liệu HTML
Đây là giao diện để người dùng điền thông tin. Bạn có thể tạo một file index.html trên máy tính và dán toàn bộ mã nguồn dưới đây vào.<!DOCTYPE html>
<html lang="vi">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Form Nhập Liệu Khách Hàng</title>
<script src="[https://cdn.tailwindcss.com](https://cdn.tailwindcss.com)"></script>
<link href="[https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap](https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap)" rel="stylesheet">
<style>
body { font-family: 'Inter', sans-serif; }
input:focus, select:focus {
box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.5);
border-color: #3b82f6;
}
</style>
</head>
<body class="bg-gray-100 flex items-center justify-center min-h-screen p-4">
<div class="bg-white p-8 rounded-xl shadow-lg w-full max-w-2xl">
<div class="text-center mb-8">
<h1 class="text-3xl font-bold text-gray-800">Thông Tin Khách Hàng</h1>
<p class="text-gray-500 mt-2">Nhập dữ liệu khách hàng mới vào biểu mẫu dưới đây.</p>
</div>
<form id="customer-form" class="space-y-6">
<!-- Các trường nhập liệu -->
<div class="grid md:grid-cols-2 gap-6">
<div>
<label for="maKhachHang" class="block text-sm font-medium text-gray-700 mb-1">Mã Khách hàng</label>
<input type="text" id="maKhachHang" name="maKhachHang" required class="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none">
</div>
<div>
<label for="tenKhachHang" class="block text-sm font-medium text-gray-700 mb-1">Tên Khách hàng</label>
<input type="text" id="tenKhachHang" name="tenKhachHang" required class="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none">
</div>
</div>
<div>
<label for="email" class="block text-sm font-medium text-gray-700 mb-1">Email</label>
<input type="email" id="email" name="email" class="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none">
</div>
<!-- ... (thêm các trường khác tương tự) ... -->
<div class="pt-4">
<button type="submit" id="submit-btn" class="w-full bg-blue-600 text-white font-bold py-3 px-4 rounded-md hover:bg-blue-700 disabled:bg-gray-400">
Gửi Dữ Liệu
</button>
</div>
</form>
<div id="message" class="mt-6 text-center text-sm font-medium"></div>
</div>
<script>
const form = document.getElementById('customer-form');
const submitBtn = document.getElementById('submit-btn');
const messageDiv = document.getElementById('message');
// !!! THAY THẾ URL DƯỚI ĐÂY BẰNG URL BẠN ĐÃ SAO CHÉP Ở BƯỚC 2 !!!
const scriptURL = 'DÁN_URL_ỨNG_DỤNG_WEB_CỦA_BẠN_VÀO_ĐÂY';
form.addEventListener('submit', function(e) {
e.preventDefault();
submitBtn.disabled = true;
submitBtn.textContent = 'Đang gửi...';
fetch(scriptURL, { method: 'POST', body: new FormData(form) })
.then(response => response.json())
.then(data => {
if (data.result === 'success') {
messageDiv.textContent = '✔️ ' + data.message;
messageDiv.className = 'text-green-600';
form.reset();
document.getElementById('ngayDangKy').valueAsDate = new Date();
} else { throw new Error(data.message); }
})
.catch(error => {
messageDiv.textContent = '❌ Đã xảy ra lỗi: ' + error.message;
messageDiv.className = 'text-red-600';
})
.finally(() => {
submitBtn.disabled = false;
submitBtn.textContent = 'Gửi Dữ Liệu';
});
});
// Tự động điền ngày hôm nay
document.addEventListener('DOMContentLoaded', (event) => {
document.getElementById('ngayDangKy').valueAsDate = new Date();
});
</script>
</body>
</html>
Quan trọng: Tìm dòng const scriptURL = '...'; trong đoạn mã trên và dán URL ứng dụng web bạn đã sao chép ở Bước 2 vào giữa hai dấu nháy đơn.
Bước 4: Chạy thử nghiệm
Bây giờ, bạn chỉ cần mở file index.html bằng trình duyệt web. Điền thử thông tin và nhấn "Gửi Dữ Liệu". Quay lại file Google Sheet, bạn sẽ thấy một hàng dữ liệu mới xuất hiện ngay lập tức!Vậy là xong! Bạn đã tự tạo cho mình một hệ thống thu thập dữ liệu mạnh mẽ, linh hoạt và hoàn toàn miễn phí. Chúc bạn thành công!