14/11/2024
Latest:

Học Ms excel Kỹ năng vi tính 

Tạo Google Sheet Form sử dụng Apps Script, html và javascript

giaoanppt 0 Comments ,

Trong bài này, giaoan.link chia sẻ đến các bạn cách Tạo Google Sheet Form sử dụng Apps Script, html và javascript.

Ưu điểm của việc sử dụng form Google sheet:

  • Dễ dàng chia sẻ link thu thập thông tin
  • Dùng html thiết kế Form đẹp mắt
  • Lưu dữ liệu trên đám mây của Google

Các code sử dụng trong video hướng dẫn bên dưới:

Code trang Index.html:

<!DOCTYPE html>
<html>
  <head>
   <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
 <?!= include('JavaScript'); ?>
  </head>
  
  <body>
    <div class="container">
      <div class="row">
        <div class="col-6">
          <form id="myForm" onsubmit="handleFormSubmit(this)">
            <p class="h4 mb-4 text-center">NHẬP THÔNG TIN</p>
            <div class="form-row">
              <div class="form-group col-mb-6">
                <label for="full_name">Họ và tên</label>
                <input type="text" class="form-control" id="full_name" name="full_name" placeholder="Họ và tên">
              </div>  
            </div>  

            <div class="form-row">
              <div class="form-group col-mb-6">
                <p>Giới tính</p>
                <div class="form-check form-check-inline">
                  <input class="form-check-input" type="radio" name="gender" id="male" value="Nam">
                  <label class="form-check-lable" for="male">Nam</label>
                </div> 
                <div class="form-check form-check-inline">
                  <input class="form-check-input" type="radio" name="gender" id="female" value="Nữ">
                  <label class="form-check-lable" for="female">Nữ</label>
                </div>   
              </div>  

              <div class="form_group col-mb-6">                  
                <label for="dateOfBirth">Năm sinh</label>
                <input type="date" class="form-control" id="dateOfBirth" name="dateOfBirth">              
              </div>   
              </div>  

              <div class="form-group">
                <label for="email">Email</label>
                <input type="email" class="form-control" id="email" name="email" placeholder="Địa chỉ email">
              </div> 

              <div class="form-group">
                <label for="phone">Số điện thoại</label>
                <input type="tel" class="form-control" id="phone" name="phone" placeholder="Số điện thoại">
              </div> 
              <button type="submit" class="btn btn-primary btn-block">Gửi đi</button>
            </div>              
          </form>  
          <div id="output"></div>
        </div> 
      </div>
    </div>    
  </body>
</html>

Code trang “Code.gs”

function doGet(request) {
  return HtmlService.createTemplateFromFile('Index').evaluate();
  
}

function include(filename){
  return HtmlService.createHtmlOutputFromFile(filename).getContent();
}

function processForm(formObject){
  var url="";
  var ss= SpreadsheetApp.openByUrl(url);
  var ws=ss.getSheetByName("Data");

  ws.appendRow([
    formObject.full_name,    
    formObject.gender,
    formObject.dateOfBirth,
    formObject.email,
    formObject.phone

  ]);
}

Code trang “JavaScript.html”

<script>

  function preventFormSubmit(){
    var forms=document.querySelectorAll('form');
    for (var i=0;i<forms.length;i++){
      forms[i].addEventListener('submit',function(event){
        event.preventDefault();
      });
    }
  }
window.addEventListener('load',preventFormSubmit);

function handleFormSubmit(formObject){
  google.script.run.processForm(formObject);
  document.getElementById("myForm").reset();
}
</script>

Xem clip hướng dẫn thiết kế Google Sheet Form