Blogspot: Cách gửi Email từ một trang tĩnh Form HTML với ứng dụng Google

Gửi Email từ một trang tĩnh Form HTML cộng với ứng dụng có sẵn của Google được thực hiện trên Blogspot. Điều này mới nghe qua có vẻ như không cần thiết vì Blogspot đã hỗ trợ công cụ Liên hệ rồi. Nhưng mục đích của bài này là gửi nội dung email cho người quản trị đơn hàng mỗi khi khách hàng đặt mua trực tuyến từ trang web bán hàng của bạn.

Làm thế nào để thực hiện điều đó??? 

Thay vì sử dụng một máy chủ để gửi email của bạn, điều đó là dễ dàng nhưng đòi hỏi phải thuê máy chủ và bảo trì, do đó chúng ta sử dụng dịch vụ của Google để gửi email và sử dụng Google Spreadsheets để theo dõi các thông tin gửi email.

Bước 1: Truy cập vào Google Drive và tạo một bảng tính mới: https://drive.google.com/drive/my-drive 

Bước 2: Đặt tên bảng tính HTMLFormResponses, Tạo biểu mẫu

Bước 3: Tạo biểu mẫu nhập liệu theo nhu cầu của bạn, còn theo mình thì để nhận được thông tin của người gửi mail mình chỉ cần các thông tin sau: fullname, phone, email, address, message, product-list. Chú ý trường bắt buộc nhập liệu: phone, address ...tùy các bạn cần trường nào muốn khách hàng phải nhập.

Mẫu nhập liệu sau khi tạo xong, đóng mẫu

Bước 4: Sau khi làm mới lại bảng tính sẽ có các cột như sau và cột Dấu thời gian (thời gian nhận được mail). Đổi tên biểu mẫu thành responses

Chọn dòng và tô màu nền cho dễ phân biệt với các dòng dữ liệu khác

Bước 5: Tạo tập tin mã thực hiện gửi email Công cụ \ Trình chỉnh sửa tập lệnh

Giao diện trình chỉnh sửa tập lệnh

Bước 6: Xóa tất cả và Copy đoạn mã lệnh trong tập tin gửi kèm Paste vào trình sửa tập lệnh: Tập lệnh Html-Send-Email

Code
/****************************************************************************** * This tutorial is based on the work of Martin Hawksey twitter.com/mhawksey * * But has been simplified and cleaned up to make it more beginner friendly * * All credit still goes to Martin and any issues/complaints/questions to me. * ******************************************************************************/ var TO_ADDRESS = "contact@gmail.com"; // change this ... function doPost(e) { try { Logger.log(e); // the Google Script version of console.log see: Class Logger MailApp.sendEmail(TO_ADDRESS, "Contact Form Submitted", JSON.stringify(e.parameters)); record_data(e); return ContentService // return json success results .createTextOutput( JSON.stringify({"result":"success", "data": JSON.stringify(e.parameters) })) .setMimeType(ContentService.MimeType.JSON); } catch(error) { // if error return this Logger.log(error); return ContentService .createTextOutput(JSON.stringify({"result":"error", "error": e})) .setMimeType(ContentService.MimeType.JSON); } } // new property service GLOBAL var SCRIPT_PROP = PropertiesService.getScriptProperties(); // see: https://developers.google.com/apps-script/reference/properties/ /** * select the sheet */ function setup() { var doc = SpreadsheetApp.getActiveSpreadsheet(); SCRIPT_PROP.setProperty("key", doc.getId()); } /** * record_data inserts the data received from the html form submission * e is the data received from the POST */ function record_data(e) { Logger.log(JSON.stringify(e)); // log the POST data in case we need to debug it try { var doc = SpreadsheetApp.openById(SCRIPT_PROP.getProperty("key")); var sheet = doc.getSheetByName('responses'); // select the responses sheet var headers = sheet.getRange(1, 1, 1, sheet.getLastColumn()).getValues()[0]; var nextRow = sheet.getLastRow()+1; // get next row var row = [ new Date() ]; // first element in the row should always be a timestamp // loop through the header columns for (var i = 1; i < headers.length; i++) { // start at 1 to avoid Timestamp column if(headers[i].length > 0) { row.push(e.parameter[headers[i]]); // add data to row } } // more efficient to set values as [][] array than individually sheet.getRange(nextRow, 1, 1, row.length).setValues([row]); } catch(error) { Logger.log(e); } finally { return; } }

Sau khi Copy và Paste xong các bạn sửa lại email nhận mail khi khách hàng gửi tới bạn contact@gmail.com

Bước 7: Lưu lại tập lệnh Tập \ Lưu tất cả và đặt tên cho dự án: HtmlSendEmail

Bước 8: Tập \ Quản lý phiên bản và thực hiện theo các hình sau

Lưu ý: Lưu lại link sau để dùng chèn vào mã của Form nhập liệu gửi mail khi khách hàng đặt hàng.

Sau khi thực hiện các bước trên trong Google Drive của bảng sẽ xuất hiện Bảng tính và Mẫu nhập liệu

Bước 9: Đăng nhập Blogspot cửa hàng trực tuyến của bạn để tạo trang đặt hàng: Trang \ Trang mới

Bước 10: Tải tập tin Html-Form-Checkout và Copy đoạn mã vào nội dung trang (chọn Tab HTML)

Bước 11: Thay đoạn link sau thành đoạn link trong Bước 8

Bước 12: Sửa link thành địa chỉ web (domain) của bạn

Bước 13: Tải về tập tin Form-Submission-Handler up lên host Google Drive của bạn để sử dụng nếu muốn. Sau khi up lên host các bạn có thể thay đổi link như trong hình thành link của bạn.

Bước 14: Bạn vào Mẫu chỉnh sửa lại link đặt hàng để trỏ về trang liên hệ các bạn vừa tạo phí trên bằng cách chọn Mẫu \ Chỉnh sửa HTML

Bước 15: trong giao diện chỉnh sửa HTML nhấn Ctrl + F và tìm từ checkout, thay Url href='link-trang-đặt-hàng-của-bạn.html'

 Sau đó các bạn Lưu mẫu và tiến hành đặt hàng xem có thực hiện được điều này không.

Chúc các bạn thực hiện thành công trang liên hệ đặt hàng cho shop trực tuyến của mình.