Hướng dẫn cách lấy data dữ liệu từ Form HTML trên website về Google sheet
Hướng dẫn cách lấy data dữ liệu từ form HTML trên website về Google sheet
Bạn vẫn có thể quản lý dữ liệu từ form đặt hàng của khách hàng trên landing page với google Sheet mà không cần bạn phải biết về MySQL, PHP hay mã nguồn mở WordPress hoặc 1 ngôn ngữ lập trình nào khác mà bạn vẫn có thể – Gửi dữ liệu tới google trang tính bằng biểu mẫu HTML hoặc lưu data khách hàng trên landing page về Google sheets
Để tạo form thu thập thông tin khách hàng từ web về google sheet bạn chỉ cần:
– Biết 1 chút kiến thức về HTML
– Xem kỹ video và làm trình tự theo các bước
– Biết sử dụng và quản lý Google Sheet (Google trang tính)
– Biết làm landing page là 1 lợi thế
—– OK, bắt đầu làm nhé —-
Bước 1: Login tài khoản vào google Driver để tạo 1 Google Sheet mới với các trường:
Cột A: hoten
Cột B: dienthoai
Cột C: namsinh
Cột D: timesamp
Các cột này tùy biến với nội dung bạn muốn lấy thông tin của khách hàng chứ không nhất thiết phải lấy giống file demo tôi làm trên và các trường này phải đồng bộ với trường NAME của FORM HTML.
Bước 2: Vào tiện ích mở rộng chọn Apps Script
– ở Trình biên tập lệnh mặc định có file là Mã.gs
Bạn xóa toàn bộ dữ liệu function myFunction() {} sau đó chép đoạn code tôi đã để ở dưới comment vào
– Sau khi chép xong bạn thiết lập var SHEET_NAME = ‘dat-ldp’; Sheet_name bằng đúng với tên sheet mà bạn đã đặt ở trang tính trong bước 1.
– Sau đó bấm vào Setup và bấm vào nút Play (chạy)
– Khi chạy bạn sẽ được hỏi về cấp quyền cho ứng dụng, Bạn hãy cấp quyền cho nó nhá.
– Bạn đợi một chút kết quả Nhật ký thực thi hiển thị là: Chú ý: Đã bắt đầu thực thi
Bước 3: Sau khi hoàn thành nôi dung trên bước 2 bạn chọn Triển Khai rồi chọn tiếp Tùy chọn triểnk hai mới
– Popup xuất hiện bạn click chọn vào hình bánh xe và chọn ỨNG DỤNG WEB
– Thiết lập các thông tin cho ứng dụng và người có quyền truy cập
– Sau đó bạn bấm vào nút Triển khai ở cuối trang.
Bước 4: Kết quả hiện ra bạn bấm nút sao chép URL trên ứng dụng web có nội dung thế này
Bước 5: Mở form HTML của bạn lên bằng Notepad ++ hoặc 1 trình soạn thảo code bất kỳ
Bạn mở đoạn code có dòng đóng mở form tìm đến dòng action =””.
– Bạn dán đoạn URL đã lấy được từ bước 4 vào chỗ ngoặc kép của action
Bước 6. Bây giờ mở form lên và hưởng thụ kết quả
Cảm ơn bạn đã theo dõi và chúc các bạn thao tác và tích hợp thành công việc liên kết form đăng ký Landingpage về google sheet (google trang tính).
Ghi chú: Trong video mình còn nói thiếu về thông số các trường: Ở google mình tạo 3 trường là: hoten, dienthoai, namsinh thì tương ứng với phần input của HTML form bạn cũng phải đặt trường name cho nó là: hoten, dienthoai, namsinh.
ví dụ: input title=”” required=”” class=”form-control” placeholder=” Họ tên… ” dir=”auto” id=”hoten” value=”” name=”hoten” type=”text”
Lúc đó mới đồng bộ dữ liệu từ Google trang tính với form HTML.
Đoạn code các bạn chép ở đây nhé. Có bất kỳ thông tin cần trợ giúp các bạn có thể comment tại đây để cùng nhau chia sẻ.
function doGet(e) {
return handleResponse(e);
}
// Cái sheet hồi nãy mới viết dùng để thu thập thông tin là gì thì điền tên nó vào đây nhé, mình viết vào Sheet1
var SHEET_NAME = 'dat-ldp';
var SCRIPT_PROP = PropertiesService.getScriptProperties(); // Tạo new property service
function handleResponse(e) {
var lock = LockService.getPublicLock();
lock.waitLock(30000); // wait 30 seconds before conceding defeat.
try {
// Chọn nơi để lưu data lấy về được (sheet1)
var doc = SpreadsheetApp.openById(SCRIPT_PROP.getProperty('key'));
var sheet = doc.getSheetByName(SHEET_NAME);
// Ở đây định nghĩa tên các input nằm hết trên hàng 1 nhé
var headRow = e.parameter.header_row || 1;
var headers = sheet.getRange(1, 1, 1, sheet.getLastColumn()).getValues()[0];
var nextRow = sheet.getLastRow() + 1; // Nhảy sang hàng tiếp theo
var row = [];
// Lặp lại đến hết các cột trên đầu
for (i in headers) {
if (headers[i] == 'Timestamp') { // Nếu bạn có cột Timestamp lưu lại thời gian nhé
row.push(new Date());
} else { // Nếu không thì cứ dùng tên hàng đầu để lấy data
row.push(e.parameter[headers[i]]);
}
}
sheet.getRange(nextRow, 1, 1, row.length).setValues([row]);
// return json success results
return ContentService
.createTextOutput(JSON.stringify({'result': 'success', 'row': nextRow}))
.setMimeType(ContentService.MimeType.JSON);
} catch(e) {
// Nếu lỗi báo lỗi trả về
return ContentService
.createTextOutput(JSON.stringify({'result': 'error', 'error': e}))
.setMimeType(ContentService.MimeType.JSON);
} finally { //release lock
lock.releaseLock();
}
}
function setup() {
var doc = SpreadsheetApp.getActiveSpreadsheet();
SCRIPT_PROP.setProperty('key', doc.getId());
}