18/04/2026
Latest:
Uncategorized

Googlesheet Apps script Webapp | Form nhập liệu có kiểm tra Input và cấu trúc địa chỉ email

giaoanppt 118 Lượt xem

Giaoan.link chia sẻ đến các bạn một project mới về Googlesheet Apps script Webapp – Form nhập liệu có kiểm tra Input và cấu trúc địa chỉ email.

  • Ở project này Form nhập liệu thiết kế dạng Responsive, đáp ứng với mọi kích thước màn hình. 
  • Kiểm tra các trường input, hiển thị thông báo theo tùy chỉnh về nội dung, màu sắc.
  • Kiểm tra cấu trúc địa chỉ email xem có đúng không

Các bạn có thể xem video demo ở link bên dưới và code apps script cung cấp ở đây, bạn có thể xây dựng cho riêng mình.

Xem, tìm các project về excel và google apps script ở đây

Các project ngẫu nhiên:


Code apps script trên trang “Code.gs”

function doGet() {
  return HtmlService.createTemplateFromFile('index')
  .evaluate()
  .addMetaTag('viewport', 'width=device-width, initial-scale=1')
  .setXFrameOptionsMode(HtmlService.XFrameOptionsMode.ALLOWALL)
}

//Constants
const DATASHEET = "Data";

function processForm(formObject) {
  const ss = SpreadsheetApp.openById("1HEBPocTxmVjcIsszE2m2F2O6VkqthKDl7bRytRleEhw")
  const dataSheet = ss.getSheetByName(DATASHEET);
  
  dataSheet.appendRow([
    new Date().toLocaleString(),
    formObject.name.toUpperCase(),
    formObject.email,
    formObject.phone,
    formObject.subject,
    formObject.message
  ]);
}

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

Code trên trang “Index.html”

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
        <?!= include('css'); ?>  
  </head>
  <body>
    <div class="contact" >
      <h2>FORM NHẬP LIỆU - <font style="color: yellow">RESPONSIVE</font><br>CÓ KIỂM TRA ĐỊA CHỈ EMAIL</h2>
      <form id="InventoryForm" onsubmit="handleFormSubmit(this)">       
        <div class="div-flex">
              <div class="input-field field">
                <input type="text" placeholder="Họ và tên" name="name" id="name" class="item" autocomplete="off">
                <div class="error-txt">Họ tên bắt buộc điền</div>
              </div>

              <div class="input-field field">
                <input type="text" placeholder="Địa chỉ mail" name="email" id="email" class="item" autocomplete="off">
                <div class="error-txt mail">Địa chỉ mail bắt buộc</div>
              </div>
        </div>
        <div class="div-flex">
            
              <div class="input-field field">
                <input type="text" maxlength="11" placeholder="Số điện thoại" name="phone" id="phone" class="item" autocomplete="off">
                <div class="error-txt">Số điện thoại không bỏ trống</div>
              </div>

              <div class="input-field field">
                <input type="text" placeholder="Tên chủ đề" name="subject" id="subject" class="item" autocomplete="off">
                <div class="error-txt">Chủ đề bắt buộc điền</div>
              </div>
        </div>
        <div class="div-flex">
            <div class="textarea-field field">
              <textarea name="message" id="message"  rows="10" placeholder="Nội dung tin nhắn của bạn" class="item" autocomplete="off"></textarea>
              <div class="error-txt">Nội dung tin nhắn không bỏ trống</div> 
            </div>
        </div>
            <button type="submit" id="btn"> Gửi đi</button>        
        </div>        
      </form>
    </div>  
        <?!= include('javascript'); ?>  
  </body>
</html>

Code trên trang “css.html”

<style>
*{
  margin: 50;
  padding: 50;
  box-sizing: border-box;
  font-family: 'Poppins', sans-serif;
}

body{  
  min-height: 100vh;    
  background: #fcffde;
}

.contact{
  width: 700px;  
  border: 2px solid #e0e0de;
  border-radius: 15px;
  box-shadow: 3px 3px 5px #989696;
  margin-left: auto;
  margin-right: auto;
  margin-top: 50px;
  margin-buttom: 50px;
  background: #1f242d;
  
}


.contact h2{  
  font-size: 30px;
  font-weight: bold;  
  color: #0ef;
  text-align: center;
  margin-bottom: 10px;
  text-shadow: 0 0 10px #0ef;
}
.contact form{  
 text-align: center;

}


.div-flex{
  display: flex;  
  align-items: center;
  justify-content:center;
  gap: 20px;

  
}


.input-field{
  width: 290px;
}

.field .item{
  width: 100%;
  padding: 18px;
  background: transparent;
  border: 2px solid #0ef;
  outline: none;
  border-radius: 6px;
  font-size: 16px;
  color: #edededed;
  margin: 12px 0;
}

.textarea-field{
  width: 600px; 
}

.field.error .item{
  border-color: red;
}

.field .item::placeholder{
  color: grey;
}

.field .error-txt{
  font-size: 14px;
  color: #d93075;
  text-align: left;
  margin: -5px 0 10px;
  display: none;
}

.field.error .error-txt{
  display: block;
}

form .textarea-field .error-txt{
margin-top: -10px;
}

form .textarea-field .item{
  resize: none;
}

form button{
  padding: 12px 32px;
  background: #0ef;
  border: none;
  outline: none;
  border-radius: 6px;
  box-shadow: 0 0 10px #0ef;
  font-size: 16px;
  color: #333;
  letter-spacing: 1px;
  font-weight: 600;
  cursor: pointer;
  margin-top: 20px;
  margin-bottom: 20px;
  transition: .5s;
}

form button:hover{
  box-shadow: none;
}

@media(max-width: 800px){
  .div-flex{
  display: block;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px;
  width: 100%;
}

.input-field{
  width: 100%;
}

.textarea-field{
  width: 100%;
}

.contact form{
 text-align: center;
 width: 100%;
}

.contact{
  width: 100%;
  padding: 20px;
}
}

</style>

Code trên trang “javascript.html”

<script>
  window.addEventListener("load", functionInit, true); 

  //Initialize functions onload
  function functionInit(){
    preventFormSubmit();   
  };

  const form = document.querySelector("form");
  const fullName = document.getElementById("name");
  const email = document.getElementById("email");
  const phone = document.getElementById("phone");
  const subject = document.getElementById("subject");
  const mess = document.getElementById("message");
  const emailRegex = /^([a-z\d\.-]+)@([a-z\d-]+)\.([a-z]{2,3})(\.[a-z]{2,3})?$/;
  const errorTxtEmail = document.querySelector(".error-txt.mail");

  

  // Prevent forms default behaviour (Prevent reloading the page)
 

// Prevent forms default behaviour (Prevent reloading the page)
  function preventFormSubmit() {
    var forms = document.querySelectorAll('form');

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

  /**
   * The handleFormSubmit() function passes the formObject to the processForm 
   * function in the Code.gs file
   */
  function handleFormSubmit(formObject) {
    // Get the QR data from the div
    if(fullName.value!="" && email.value!="" && phone.value!="" && subject.value!="" && message.value!=""){
      if(email.value.match(emailRegex)){
    google.script.run.processForm(formObject);
    document.getElementById("InventoryForm").reset();
      }
    }    
  }

  btn.addEventListener("click", checkInputs);

  

function checkInputs(){
  const items = document.querySelectorAll(".item");
  for(const item of items){
    if(item.value == ""){
      item.classList.add("error");
      item.parentElement.classList.add("error");
    }

   if(items[1].value != ""){
      checkEmail()
    }

    items[1].addEventListener("keyup", () => {
      checkEmail();
    });


    item.addEventListener("keyup",() => {
      if(item.value != ""){
       item.classList.remove("error");
      item.parentElement.classList.remove("error");   
      }else{
        item.classList.add("error");
        item.parentElement.classList.add("error");
      }
    });
  }
}

function checkEmail(){
  const emailRegex = /^([a-z\d\.-]+)@([a-z\d-]+)\.([a-z]{2,3})(\.[a-z]{2,3})?$/;

  const errorTxtEmail = document.querySelector(".error-txt.mail");

  if(!email.value.match(emailRegex)){
    email.classList.add("error");
    email.parentElement.classList.add("error");

    if(email.value != ""){
      errorTxtEmail.innerText = "Vui lòng đúng địa chỉ email!"
    }else{
      errorTxtEmail.innerText = "Địa chỉ email không được bỏ trống!"
    }  
  }else{
    email.classList.remove("error");
    email.parentElement.classList.remove("error");
  }
}


 
</script>





giaoanppt

Giaoan.link trang chia sẽ giáo án điện tử, bài giảng powerpoint, template powerpoint, nguyên liệu làm bài giảng, tài liệu, biểu mẫu miễn phí!

Để lại một bình luận

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *

This site uses Akismet to reduce spam. Learn how your comment data is processed.