Hướng dẫn thay form đặt hàng

[tintuc]
Hướng dẫn thay form đặt hàng và các biểu mẫu liên hệ như các trang landingpage.

Xem video để hiểu (video cập nhật ngày 10/08/2017)

Xin chào các bạn, mình sẽ hướng dẫn cách thay form đặt hàng trên website blogspot của mình, áp dụng cho tất cả các mẫu, biểu mẫu đặt hàng, form liên hệ.

Trước tiên bạn nhìn vào form đặt hàng có bao nhiêu ô (trường), ví dụ hình dưới đây là 5 ô cần tạo (có bao nhiêu ô thì tạo bấy nhiêu trường). Vì mỗi mẫu có thể là 1 form (giỏ hàng) khác nhau

Mẫu 1: Tạo 5 ô

Mẫu 2: Tạo 7 ô

Mẫu 3: Tạo 6 ô

Rất nhiều kiểu form khác nhau.

Tiếp theo truy cập trang: https://docs.google.com/forms/u/0/

Các bạn tạo các ô theo thứ tự như trên (ô sản phẩm bạn đặt tên là Sản phẩm mua)

Mình sẽ tạo các ô như sau:
1. Họ tên
2. Địa chỉ
3. Số ĐT
4. Email (có hoặc không, theo mẫu trên thì không có email)
5. Sản phẩm mua
6. Ghi chú

Lưu ý: Tất cả để là Trả lời ngắn, hoặc đoạn (không cần bắt buộc). không check, không gì hết.. để là đoạn ngắn hoặc dài.

Xem mẫu mình tạo: Tại đây

Sau khi tạo xong, các bạn nhấn qua TAB câu trả lời

Tiếp theo nhấn vào dấu + mình tô màu vàng, nó mở ra 1 link excel

Các bạn nhấn vào Công cụ -> Trình sửa tập lệnh

Ra 1 link mới, các bạn copy đoạn code sau dán đè lên đó

function guiBieuMau(e)
{
  // Thay thế bằng địa chỉ email của bạn
  var email = "diachimail@gmail.com";
  // Tiêu đề của email được gửi về
  var subject = "Đơn đặt hàng tại......";
  // Không rành thì đùng đụng vào code ở dưới nhé
  var s = SpreadsheetApp.getActiveSheet();
  var columns = s.getRange(1,1,1,s.getLastColumn()).getValues()[0];  
  var message = "";  
  // Lấy ra những thông tin nào có dữ liệu điền vào
  for ( var keys in columns ) {
    var key = columns[keys];
    if ( e.namedValues[key] && (e.namedValues[key] != "") ) {

      message += key + ' :: '+ e.namedValues[key] + "\n\n";
    }
  }
  // Dùng MailApp service của Google Apps Script để gửi về email của bạn.
  MailApp.sendEmail(email, subject, message);

}


hoặc code sau

function Initialize() {
 
  var triggers = ScriptApp.getProjectTriggers();
 
  for(var i in triggers) {
    ScriptApp.deleteTrigger(triggers[i]);
  }
  
  ScriptApp.newTrigger("SendGoogleForm")
  .forSpreadsheet(SpreadsheetApp.getActiveSpreadsheet())
  .onFormSubmit()
  .create();
  
}
 
function SendGoogleForm(e) 
{  
  try 
  {      
    // You may replace this with another email address
    var email = Session.getActiveUser().getEmail();
    
    // Optional but change the following variable
    // to have a custom subject for Google Form email notifications
    var subject = "Đơn đặt hàng";  
    
    var s = SpreadsheetApp.getActiveSheet();
    var columns = s.getRange(1,1,1,s.getLastColumn()).getValues()[0];    
    var message = "";    
    
    // Only include form fields that are not blank
    for ( var keys in columns ) {
      var key = columns[keys];
      if ( e.namedValues[key] && (e.namedValues[key] != "") ) {
        message += key + ' :: '+ e.namedValues[key] + "\n\n"; 
      }
    }
        
    // This is the MailApp service of Google Apps Script
    // that sends the email. You can also use GmailApp for HTML Mail.
    
    MailApp.sendEmail(email, subject, message); 
    
  } catch (e) {
    Logger.log(e.toString());
  }
    
}

Các bạn copy ở đây: 


Các bạn thay email của bạn vào đó. Sau đó nhấn lưu

Tiếp theo nhấn vô biểu tượng đồng hồ

Các bạn chọn như hình

Nhấn vô chữ Thông báo chọn Ngay lập tức, sau đó nhấn lưu, nó yêu cầu xét các quyền, bạn chọn ok... nhấn lưu và quay lại form ban đầu 

Nhấn vô biểu tượng con mắt mình tô màu vàng, nó sẽ ra link form, các bạn test thử xem nó có gửi về email chưa. Mình test thử và vô email kiểm tra

Email đã nhận thông báo.

Như vậy các bạn đã tạo xong form đặt hàng... Tiếp theo mình hướng dẫn thay form đặt hàng trên web.

Trên blog các bạn vô tìm tên là giỏ hàng hoặc thanh toán nằm ở Trang hoặc bài viết tùy theo mẫu của mình. (các mẫu landingpage nằm trực tiếp trong giao diện, form ô tô nằm trong giao diện)


Tab HTML

Nếu css nó lộn xộn bạn ctrl + A copy toàn bộ nó rồi vô trang http://jsbeautifier.org/ dán để sắp xếp lại css cho đẹp, dễ nhìn. xong bạn copy ngược lại dán đè vào chỗ cũ.

Link mình tô vàng là link form của bạn mới tạo

Copy link tô màu vàng thế vô link trong giỏ hàng (chừa phần /viewform lại), tiếp theo trên form này bạn nhấn Ctrl + U

Kéo hết xuống dưới bạn sẽ thấy các con số tương ứng với các ô bạn đã tạo

Con số này để làm gì, các bạn sẽ lấy nó thay vào các entry.số giỏ hàng (thanh toán, biểu mẫu)

Các bạn thay các con số tương ứng với bên giỏ hàng.. (sản phẩm mua tương ứng với tổng đơn hàng)

Theo thứ tự: Họ tên, địa chỉ, số ĐT, Sản phẩm, Ghi chú

Xong lưu lại và lên web test đặt hàng

[/tintuc]