1. สร้างสเปรดชีต
code.gs
// Original code from https://github.com/jamiewilson/form-to-google-sheets
// Updated for 2021 and ES6 standards
const sheetName = 'data'
const scriptProp = PropertiesService.getScriptProperties()
function initialSetup () {
const activeSpreadsheet = SpreadsheetApp.getActiveSpreadsheet()
scriptProp.setProperty('key', activeSpreadsheet.getId())
}
function doPost (e) {
const lock = LockService.getScriptLock()
lock.tryLock(10000)
try {
const doc = SpreadsheetApp.openById(scriptProp.getProperty('key'))
const sheet = doc.getSheetByName(sheetName)
const headers = sheet.getRange(1, 1, 1, sheet.getLastColumn()).getValues()[0]
const nextRow = sheet.getLastRow() + 1
const newRow = headers.map(function(header) {
return header === 'Date' ? 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()
}
}
4. คลิก เรียกใช้ initialSetup
5. คลิก การทำให้ใช้งานได้
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, minimum-scale=1.0">
<title>Contact Us</title>
<link rel="shortcut icon" href="images/index.ico" type="image/x-icon">
<!-- CSS: Fontawesome -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css">
<!-- CSS: Bootstrap v-5.x -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.1/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class ="container">
<div class="row justify-content-center py-3">
<div class="col-lg-10">
<div class="pt-3 text-center"> <img src="https://semicon.github.io/img/LOGOKRUCHIANgrow.png" alt="logo" height="65" width="auto"/> </div>
<h3 class="fw-normal text-center mb-5 border-bottom py-2">Contact with Our Help Team</h3>
<form class="form_overlay" method="POST" accept-charset="UTF-8" autocomplete="off" name="contact">
<div class="row g-4">
<div class="col-lg-6">
<div class="input_overlay">
<label for="fname" class="lable">Enter your first name</label>
<input type="text" name="first_name" class="form-control" required autocomplete="off">
</div>
</div>
<div class="col-lg-6">
<div class="input_overlay">
<label for="lname" class="lable">Enter your last name</label>
<input type="text" name="last_name" class="form-control" required autocomplete="off">
</div>
</div>
<div class="col-lg-6">
<div class="input_overlay">
<label for="email" class="lable">Enter email address</label>
<input type="text" name="email" class="form-control" required autocomplete="off">
</div>
</div>
<div class="col-lg-6">
<div class="input_overlay">
<label for="phone" class="lable">Phone number</label>
<input type="text" name="phone" class="form-control" required autocomplete="off">
</div>
</div>
<div class="col-12">
<div class="input_overlay">
<label for="subject" class="lable">Subject name</label>
<input type="text" name="subject" class="form-control" required autocomplete="off">
</div>
</div>
<div class="col-12">
<div class="input_overlay textarea">
<label for="desc" class="lable">Description</label>
<textarea name="description" cols="30" rows="4" class="form-control" required autocomplete="off"></textarea>
</div>
</div>
<div class="col-12 text-end">
<button type="submit" class="btn btn-primary mt-3">Submit</button>
</div>
<p id="msg"></p>
</div>
</form>
</div>
</div>
</div>
<script>
<!-- Change to your AppScript URL. -->
const scriptURL = 'xxxxxx'
const form = document.forms['contact']
form.addEventListener('submit', e => {
e.preventDefault()
fetch(scriptURL, { method: 'POST', body: new FormData(form)})
.then(response => document.getElementById("msg").innerHTML = "<div class='alert alert-primary' role='alert'><b>Thank You for providing the details, We shall get back to you shortly !</b></div>",contact.reset())
.catch(error => console.error('Error!', error.message))
})
</script>
<!-- JS: Bootstrap v-5.x -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.1/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>
9. เปิด Browser เรียกไฟล์ index.html