Elementor là trình tạo trang phổ biến để làm landing page trên WordPress, form liên hệ đi kèm cũng khá tiện: kéo thả vài trường là có ngay form đăng ký. Nhưng dữ liệu khách điền form mặc định chỉ được gửi về email, không tự lưu vào đâu cả.
Muốn gom dữ liệu form vào Google Sheet, bạn thường phải mua plugin chuyên dụng hoặc dùng Zapier (tốn phí hàng tháng). Cách dưới đây hoàn toàn miễn phí: dùng Google Apps Script làm cầu nối, kết hợp tính năng Webhook của Elementor Pro — chỉ 7 bước, làm một lần là dùng mãi.
Cần chuẩn bị gì trước khi bắt đầu
Bạn cần có ba thứ: Elementor Pro (bản miễn phí không có action Webhook), một tài khoản Google và một Google Sheet mới. Nhớ một nguyên tắc quan trọng: Field ID của từng trường trong form phải trùng với tên cột trong Google Sheet.
Bước 1: Tạo form trong Elementor
Mở trang cần đặt form bằng Elementor, kéo widget Form vào vị trí mong muốn rồi thêm các trường cần thiết, ví dụ Họ tên, Email và Số điện thoại.
Với mỗi trường, bạn mở phần cài đặt nâng cao và đặt Field ID ngắn gọn, không dấu: name cho Họ tên, email cho Email và sdt cho Số điện thoại. Field ID là “chìa khóa” để đoạn script ở bước sau biết dữ liệu nào ghi vào cột nào.
Bước 2: Tạo Google Sheet và đặt tên cột
Tạo một Google Sheet mới. Ở hàng đầu tiên, ghi các tiêu đề cột đúng bằng Field ID vừa đặt: name, email, sdt, và thêm cột timestamp để ghi thời điểm gửi form. Thứ tự cột không quan trọng, nhưng tên cột phải khớp chính xác với Field ID.
Bước 3: Tạo Apps Script và dán đoạn code
Trong Google Sheet vừa tạo, bạn vào menu Tiện ích mở rộng > Apps Script. Một cửa sổ soạn thảo script mới sẽ mở ra. Bạn xóa toàn bộ code mẫu có sẵn, rồi dán đoạn code dưới đây vào:
function doGet(e) {
return HtmlService.createHtmlOutput("Yepp this is the webhook URL, request received");
}
// Webhook Receiver - triggered with form webhook to published App URL.
function doPost(e) {
var params = JSON.stringify(e.parameter);
params = JSON.parse(params);
insertToSheet(params);
// HTTP Response
return HtmlService.createHtmlOutput("post request received");
}
// Flattens a nested object for easier use with a spreadsheet
function flattenObject(ob) {
var toReturn = {};
for (var i in ob) {
if (!ob.hasOwnProperty(i)) continue;
if ((typeof ob[i]) == 'object') {
var flatObject = flattenObject(ob[i]);
for (var x in flatObject) {
if (!flatObject.hasOwnProperty(x)) continue;
toReturn[i + '.' + x] = flatObject[x];
}
} else {
toReturn[i] = ob[i];
}
}
return toReturn;
}
// normalize headers
function getHeaders(formSheet, keys) {
var headers = [];
// retrieve existing headers
if (!isNewSheet) {
headers = formSheet.getRange(1, 1, 1, formSheet.getLastColumn()).getValues()[0];
}
// add any additional headers
var newHeaders = [];
newHeaders = keys.filter(function(k) {
return headers.indexOf(k) > -1 ? false : k;
});
newHeaders.forEach(function(h) {
headers.push(h);
});
return headers;
}
// normalize values
function getValues(headers, flat) {
var values = [];
// push values based on headers
headers.forEach(function(h) {
values.push(flat[h]);
});
return values;
}
// Insert headers
function setHeaders(sheet, values) {
var headerRow = sheet.getRange(1, 1, 1, values.length)
headerRow.setValues([values]);
headerRow.setFontWeight("bold").setHorizontalAlignment("center");
}
// Insert Data into Sheet
function setValues(sheet, values) {
var lastRow = Math.max(sheet.getLastRow(), 1);
sheet.insertRowAfter(lastRow);
sheet.getRange(lastRow + 1, 1, 1, values.length).setValues([values]).setFontWeight("normal").setHorizontalAlignment("center");
}
// Find or create sheet for form
function getFormSheet(formName) {
var formSheet;
var activeSheet = SpreadsheetApp.getActiveSpreadsheet();
// create sheet if needed
if (activeSheet.getSheetByName(formName) == null) {
formSheet = activeSheet.insertSheet();
formSheet.setName(formName);
isNewSheet = true;
}
return activeSheet.getSheetByName(formName);
}
// magic function where it all happens
function insertToSheet(data) {
var flat = flattenObject(data);
var keys = Object.keys(flat);
var formName = data["form_name"];
var formSheet = getFormSheet(formName);
var headers = getHeaders(formSheet, keys);
var values = getValues(headers, flat);
setHeaders(formSheet, headers);
setValues(formSheet, values);
if (emailNotification) {
sendNotification(data, getSeetURL());
}
}
function getSeetURL() {
var spreadsheet = SpreadsheetApp.getActiveSpreadsheet();
var sheet = spreadsheet.getActiveSheet();
return spreadsheet.getUrl();
}
function sendNotification(data, url) {
var subject = "A new Elementor Pro Froms subbmition has been inserted to your sheet";
var message = "A new subbmition has been recived via " + data['form_name'] + " form and inserted into your Google sheet at: " + url;
MailApp.sendEmail(emailAddress, subject, message, {
name: 'Automatic Emailer Script'
});
}
// DO NOT EDIT THESE NEXT PARAMS
var isNewSheet = false;
var recivedData = [];
// Change to true to enable email notifications
var emailNotification = false;
// Enter your email address below (keep the quotation marks!)
var emailAddress = "email-cua-ban@gmail.com";
Đoạn code này nhận dữ liệu form qua webhook, tự tạo sheet riêng theo tên form nếu chưa có và ghi mỗi lượt gửi thành một dòng mới. Hai tùy chỉnh nên làm ngay: đặt tên cho project Apps Script, và nếu muốn nhận thông báo email khi có người điền form thì đổi emailNotification từ false thành true, đồng thời thay email mẫu trong biến emailAddress bằng email thật của bạn.
Bước 4: Triển khai Apps Script thành ứng dụng web
Để Elementor “gọi” được script này, bạn cần triển khai nó thành ứng dụng web: trong cửa sổ Apps Script, chọn Triển khai > Tùy chọn triển khai mới, rồi bấm biểu tượng bánh răng ở mục Chọn loại và chọn Ứng dụng web.
Điền mô tả cho ứng dụng, ở ô Người có quyền truy cập chọn Bất kỳ ai, rồi bấm Triển khai. Hệ thống sẽ trả về một URL ở mục Ứng dụng web — đây chính là URL webhook dùng ở bước 6, bạn copy lại rồi bấm Xong.
Bước 5: Cấp quyền chạy cho Apps Script
Sau khi triển khai, script cần được cấp quyền để ghi dữ liệu vào sheet. Trong cửa sổ Apps Script, vào tab Kích hoạt (biểu tượng đồng hồ) rồi chọn Thêm trình kích hoạt, chọn hàm sẽ chạy là doPost, sự kiện là Đang gửi biểu mẫu, rồi bấm Lưu.
Chọn đúng tài khoản Google đã tạo Sheet. Google sẽ hiện cảnh báo “chưa xác minh ứng dụng này” vì đây là ứng dụng do chính bạn viết — bấm Nâng cao, chọn Truy cập <tên app script đã tạo>, rồi bấm Cho phép.
Bước 6: Gắn webhook vào Elementor Form
Quay lại form trong Elementor, mở mục Actions After Submit, bấm dấu + rồi chọn Webhook. Dán URL đã copy ở bước 4 vào ô Webhook URL rồi bấm Cập nhật. Từ lúc này, mỗi lượt gửi form sẽ được Elementor đẩy sang webhook và Apps Script ghi vào Google Sheet.
Bước 7: Điền thử và kiểm tra kết quả
Mở trang chứa form, điền thử một lượt rồi bấm gửi. Mở Google Sheet lên: nếu thấy một dòng mới với đầy đủ thông tin vừa nhập kèm thời gian gửi thì bạn đã thành công.
Nếu chưa thấy dòng mới, kiểm tra lại ba điểm hay sai nhất: Field ID trong form có khớp tên cột trong Sheet không, URL webhook dán ở bước 6 có đúng không, và quyền truy cập của ứng dụng web ở bước 4 đã để là “Bất kỳ ai” chưa.
Một vài lưu ý khi dùng cách này
Cách này bắt buộc cần Elementor Pro. Khi thêm trường mới, script sẽ tự thêm cột tương ứng — nhớ đặt Field ID rõ ràng, không trùng trường cũ. Mỗi form tạo một sheet riêng theo tên form nên gom được nhiều form vào chung một file. Vì webhook để chế độ “Bất kỳ ai”, chỉ nên thu thập dữ liệu liên hệ thông thường, tránh thông tin nhạy cảm.
Tóm lại, chỉ với một Google Sheet, một đoạn Apps Script miễn phí và tính năng Webhook của Elementor Pro, bạn đã có hệ thống lưu trữ dữ liệu form gọn gàng, xem được mọi lúc mọi nơi, không cần mua thêm plugin hay trả phí trung gian nào.
👉 Cần VPS để thực hành? Đăng ký VPS BNIX tại đây
- 🏢 Chuyên thiết kế web cho doanh nghiệp và cá nhân
- 🤖 Giải pháp tự động hóa cho Doanh nghiệp và cá nhân
- 📞 0925045760
- 🌐 thietkewebdian.com
