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

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ừ _

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 ]

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

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

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[]
  }
}

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

[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

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ọ tên
                

            
            
			
                
Email
                

            
            

                
Số điện thoại
                

            
            

                
Địa chỉ
                

            
            

                

                
Gửi
            
        
    
    
        var $form = $['form#test-form'],
            url = 'YOUR_SCRIPT'

        $['#submit-form'].on['click', function[e] {
          	e.preventDefault[];
            var jqxhr = $.ajax[{
                url: url,
                method: "POST",
                dataType: "json",
                data: $form.serialize[]
            }].success[
              	alert["Gửi form thành công"]
            ]
        }]		
    	

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

• 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

Bài viết tham khảo:

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

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

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

DOM events