Hướng dẫn google sheet form submit - gửi biểu mẫu google sheet

B1/ Tạo 1 file Google sheet

Truy cập vào link Google sheet => “Nhấn vào biểu tượng dấu + ” Như hình bên dưới

Hướng dẫn google sheet form submit - gửi biểu mẫu google sheet

Tạo sẽ được một trang với kết quả sau: Bạn hãy đặt tên sheet và tên tab theo ý bạn với quy tắt không khoảng trắng, không dấu, không có các ký tự đặc biệt ngoại trừ _

Hướng dẫn google sheet form submit - gửi biểu mẫu google sheet

B2/ Tạo mã Google Apps Script

  • Mở trang Google Apps Script: Google Apps Script:

Trên sheet bạn vừa tạo bạn hãy nhất “Công cụ” => “Trình chỉnh sửa tập lệnh” ( cái biểu tượng )“Công cụ” => “Trình chỉnh sửa tập lệnh” ( cái biểu tượng <> )

Hướng dẫn google sheet form submit - gửi biểu mẫu google sheet

  • Đặt tên cho app script của bạn

Hướng dẫn google sheet form submit - gửi biểu mẫu google sheet

  • Xóa function myFunction() {} và thay bằng đoạn script sau:

    Hướng dẫn google sheet form submit - gửi biểu mẫu google sheet

var sheetName = 'data'
var scriptProp = PropertiesService.getScriptProperties()

function intialSetup () {
  var activeSpreadsheet = SpreadsheetApp.getActiveSpreadsheet()
  scriptProp.setProperty('key', activeSpreadsheet.getId())
}

function doPost (e) {
  var lock = LockService.getScriptLock()
  lock.tryLock(10000)

  try {
    var doc = SpreadsheetApp.openById(scriptProp.getProperty('key'))
    var sheet = doc.getSheetByName(sheetName)

    var headers = sheet.getRange(1, 1, 1, sheet.getLastColumn()).getValues()[0]
    var nextRow = sheet.getLastRow() + 1

    var newRow = headers.map(function(header) {
      return header === 'timestamp' ? new Date() : e.parameter[header]
    })

    sheet.getRange(nextRow, 1, 1, newRow.length).setValues([newRow])

    return ContentService
      .createTextOutput(JSON.stringify({ 'result': 'success', 'row': nextRow }))
      .setMimeType(ContentService.MimeType.JSON)
  }

  catch (e) {
    return ContentService
      .createTextOutput(JSON.stringify({ 'result': 'error', 'error': e }))
      .setMimeType(ContentService.MimeType.JSON)
  }

  finally {
    lock.releaseLock()
  }
}

Hướng dẫn google sheet form submit - gửi biểu mẫu google sheet

B3/ Public Google Apps Script của bạn

(1) Nhấn “Triển khai” Nhấn “Triển khai”

(2) Nhấn “Tùy chọn triển khai mới” Nhấn “Tùy chọn triển khai mới”

(3) Nhấn biểu tượng cài đặt -> Chọn “Ứng dụng web” Nhấn biểu tượng cài đặt

Hướng dẫn google sheet form submit - gửi biểu mẫu google sheet
-> Chọn “Ứng dụng web”

(4) Thiết lập quyền truy cập: “Chọn bất kỳ ai” Thiết lập quyền truy cập: “Chọn bất kỳ ai”

(5) Nhấn “Triển khai” Nhấn “Triển khai”

(6) Ủy quyền truy cập Ủy quyền truy cập

(7) Chọn tài khoản email của bạn Chọn tài khoản email của bạn

(8) Nhấn “Nâng cao” Nhấn “Nâng cao”

(9) Nhấn “Đi tới Submit Form to Google Sheets” Nhấn “Đi tới Submit Form to Google Sheets”

(10) Nhấn “Cho phép” Nhấn “Cho phép”

(11) Nhấn “Sao chép” để lấy script => (12) Xong Nhấn “Sao chép” để lấy script => (12) Xong

Hướng dẫn google sheet form submit - gửi biểu mẫu google sheet

Hướng dẫn google sheet form submit - gửi biểu mẫu google sheet

Hướng dẫn google sheet form submit - gửi biểu mẫu google sheet

Hướng dẫn google sheet form submit - gửi biểu mẫu google sheet

B4/ Tạo form HTML để lấy dữ liệu

  • Tạo 1 form html

Bạn có thể copy đoạn mã html mẫu sau




    
    Test sumbit form Google sheet
    
    
    


    

Hướng dẫn google sheet form submit - gửi biểu mẫu google sheet

Trong đó:

YOUR_SCRIPT là đoạn script bạn copy ở bước 11 ở trên

và ta có các input với name lần lượt là: hoten, email, sodt, diachi

Bạn có thể thêm hoặc bới các input tùy ý bạn

  • Copy name của các thẻ input dán vào các cột trong file google sheet ở B1

Hướng dẫn google sheet form submit - gửi biểu mẫu google sheet

  • Submit thử: Bạn hãy điền thông tin trong form và nhấn gửi, dữ liệu sẽ được đổ về Google sheet như hình bên dướiBạn hãy điền thông tin trong form và nhấn gửi, dữ liệu sẽ được đổ về Google sheet như hình bên dưới

Hướng dẫn google sheet form submit - gửi biểu mẫu google sheet

Bài viết tham khảo:

https://dev.to/omerlahav/submit-a-form-to-a-google-spreadsheet-1bia

https://developers.google.com/sheets/api/guides/create

https://vincoding.com/dom-events-method-passing-cf7-data/

DOM events