Khi xây dựng một trang web bán hàng chuyên nghiệp trên Blogger (Blogspot), việc thiết lập một biểu mẫu (Form) đặt hàng hoặc nhận tư vấn trực tuyến là vô cùng quan trọng. Tuy nhiên, nếu chỉ lưu trữ dữ liệu vào Google Sheets thì bạn sẽ rất dễ bỏ lỡ các đơn hàng mới nếu không thường xuyên kiểm tra bảng tính.
Bài viết này tổng hợp và nâng cấp 3 phiên bản Google Apps Script từ cơ bản đến nâng cao, giúp hệ thống tự động gửi thông báo chi tiết qua email dưới dạng HTML đẹp mắt, hỗ trợ tối ưu cho các template bán hàng chuyên nghiệp.
📌 Tổng Quan Giải Pháp & Video Hướng Dẫn
Mục tiêu: Tự động bắt sự kiện khi khách hàng bấm gửi form trên Blogger, lưu vào Google Sheets đồng thời bắn thông báo trực tiếp qua Email.
Công nghệ sử dụng: Google Apps Script, Google Sheets, HTML/CSS Email Template.
🚀 Các Phiên Bản Google Apps Script Từ Cơ Bản Đến Nâng Cao
1. Code 1: Phiên Bản Mặc Định (Cơ Bản Nhất)
Đây là đoạn code nguyên bản, chưa qua tùy biến giao diện. Hệ thống sẽ tự động quét các cột trong Google Sheets và gửi một email văn bản thuần túy (Plain Text) đến địa chỉ chỉ định.JavaScript
function guiBieuMau(e) {
var email = "gmailcuaban@gmail.com";
var subject = "Đơn đặt hàng";
var s = SpreadsheetApp.getActiveSheet();
var columns = s.getRange(1, 1, 1, s.getLastColumn()).getValues()[0];
var message = "";
for (var keys in columns) {
var key = columns[keys];
if (e.namedValues[key] && (e.namedValues[key] != "")) {
message += key + ' :: ' + e.namedValues[key] + "\n\n";
}
}
MailApp.sendEmail(email, subject, message);
}
2. Code 2: Gửi Email Tới Một Địa Chỉ Cố Định (Giao Diện HTML Chuyên Nghiệp)
Phiên bản này được cải tiến mạnh mẽ. Thay vì gửi một đoạn text thô, code sẽ tự động tạo một giao diện email dạng bảng HTML hiện đại, trực quan, dễ nhìn, chỉ định thẳng đến email quản trị viên (Admin).JavaScript
function sendFormResponse(e) {
const config = {
toEmail: "veoprotv@gmail.com", // Email cố định duy nhất nhận thông báo
subject: "Tư vấn Mua hàng",
styles: {
container: "font-family: Arial, sans-serif; max-width: 600px; margin: 20px auto; background-color: #f9f9f9; padding: 15px; border-radius: 8px; box-shadow: 0 2px 5px rgba(0,0,0,0.1);",
header: "color: #1a73e8; margin: 0 0 15px; font-size: 22px; text-align: center;",
content: "background-color: #fff; padding: 10px; border-radius: 5px; border: 1px solid #eee;",
row: "display: flex; align-items: center; margin-bottom: 8px; padding-bottom: 8px; border-bottom: 1px dashed #ddd;",
label: "color: #1a73e8; font-weight: bold; font-size: 14px; min-width: 120px;",
value: "color: #333; font-size: 14px; flex: 1; word-wrap: break-word;",
footer: "color: #777; font-size: 11px; text-align: center; margin-top: 15px;"
}
};
const rows = Object.entries(e.namedValues).filter(([_, value]) => value?.toString().trim() !== "").map(([key, value]) => `
<div style="${config.styles.row}">
<span style="${config.styles.label}">${key}:</span>
<span style="${config.styles.value}">${value}</span>
</div>
`).join("");
const message = `
<html>
<body style="${config.styles.container}">
<h2 style="${config.styles.header}">${config.subject}</h2>
<div style="${config.styles.content}">${rows}</div>
<p style="${config.styles.footer}">Email được gửi từ hệ thống tự động - Vui lòng không trả lời trực tiếp</p>
</body>
</html>
`;
try {
MailApp.sendEmail({
to: config.toEmail,
subject: config.subject,
htmlBody: message
});
} catch (error) {
Logger.log(`Lỗi gửi email: ${error.message}`);
}
}
3. Code 3: Gửi Đồng Thời Cho Admin Và Khách Hàng (Tối Ưu Trải Nghiệm)
Nếu bạn muốn vừa thông báo cho cửa hàng vừa gửi một bản sao xác nhận đơn hàng tới chính email của khách hàng vừa điền vào form, hãy sử dụng phiên bản kết hợp trường BCC này.JavaScript
function sendFormResponse(e) {
const config = {
toEmail: "veoprotv@gmail.com",
subject: "Tư vấn Mua hàng",
styles: {
container: "font-family: Arial, sans-serif; max-width: 600px; margin: 20px auto; background-color: #f9f9f9; padding: 15px; border-radius: 8px; box-shadow: 0 2px 5px rgba(0,0,0,0.1);",
header: "color: #1a73e8; margin: 0 0 15px; font-size: 22px; text-align: center;",
content: "background-color: #fff; padding: 10px; border-radius: 5px; border: 1px solid #eee;",
row: "display: flex; align-items: center; margin-bottom: 8px; padding-bottom: 8px; border-bottom: 1px dashed #ddd;",
label: "color: #1a73e8; font-weight: bold; font-size: 14px; min-width: 120px;",
value: "color: #333; font-size: 14px; flex: 1; word-wrap: break-word;",
footer: "color: #777; font-size: 11px; text-align: center; margin-top: 15px;"
}
};
const bccEmail = e.namedValues["Email"]?.toString() || "";
const rows = Object.entries(e.namedValues).filter(([_, value]) => value?.toString().trim() !== "").map(([key, value]) => `
<div style="${config.styles.row}">
<span style="${config.styles.label}">${key}:</span>
<span style="${config.styles.value}">${value}</span>
</div>
`).join("");
const message = `
<html>
<body style="${config.styles.container}">
<h2 style="${config.styles.header}">${config.subject}</h2>
<div style="${config.styles.content}">${rows}</div>
<p style="${config.styles.footer}">Email được gửi từ hệ thống tự động - Vui lòng không trả lời trực tiếp</p>
</body>
</html>
`;
try {
MailApp.sendEmail({
to: config.toEmail,
bcc: bccEmail,
subject: config.subject,
htmlBody: message
});
} catch (error) {
Logger.log(`Lỗi gửi email: ${error.message}`);
}
}
🛠️ Hướng Dẫn Cài Đặt Nhanh Trên Google Sheets
Liên kết form đặt hàng trên Blogger với một Google Sheets.
Trên Google Sheets, chọn menu Tiện ích mở rộng (Extensions) > Apps Script.
Dán một trong các đoạn mã trên (Khuyến khích dùng Code 3 để tối ưu hóa việc chăm sóc khách hàng).
Thay đổi địa chỉ email của bạn tại trường toEmail.
Thiết lập Trình kích hoạt (Triggers - Biểu tượng đồng hồ):
Chọn hàm cần chạy: sendFormResponse (hoặc guiBieuMau).
Chọn sự kiện: Từ bảng tính (From spreadsheet) -> Khi gửi biểu mẫu (On form submit).
Lưu lại và cấp quyền truy cập tài khoản là hệ thống có thể hoạt động hoàn toàn tự động.
