Site icon Tài liệu miễn phí cho Giáo viên, học sinh.

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

giaoanppt

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:

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


Exit mobile version