ลงทะเบียนและแชร์ไฟล์เฉพาะบุคคลให้กับอีเมลของผู้ลงทะเบียนอัตโนมัติ

bysemicon -
0



✅ เป้าหมาย

  1. บันทึกข้อมูลลง Google Sheet 
  2. แชร์ไฟล์ Spreadsheet ให้กับอีเมลของผู้สมัคร 
  3. ส่งอีเมลยืนยันพร้อมที่อยู่ของไฟล์ (Link)

Code.gs

     
function doGet() {
  return HtmlService.createHtmlOutputFromFile('index')
    .setXFrameOptionsMode(HtmlService.XFrameOptionsMode.ALLOWALL);
}

function submitForm(formData) {
  const membersSheet = SpreadsheetApp.getActiveSpreadsheet().getSheetByName("Members");
  
  //ไอดีของไฟล์ที่ต้องการแชร์
  const fileSharingID = "xxxxxxxxxxx"; 
  
  // บันทึกข้อมูลลงชีต
  membersSheet.appendRow([
    new Date(),
    formData.fullname,
    formData.email,
    formData.affiliate,
    formData.company
  ]);

  // แชร์ไฟล์ให้กับผู้สมัคร
  const file = DriveApp.getFileById(fileSharingID);
  file.addViewer(formData.email);

  // ส่งอีเมลแจ้งไปยังผู้สมัคร
  const subject = "ลงทะเบียนรับไฟล์สำเร็จ";
  const body = `
สวัสดีคุณ ${formData.fullname},

คุณได้ลงทะเบียนสำเร็จในระบบสมาชิกของเราเรียบร้อยแล้ว

ชื่อบริษัทของคุณ: ${formData.company}
อีเมลของคุณ: ${formData.email}
สังกัดของคุณ: ${formData.affiliate}

คุณสามารถเข้าถึงไฟล์ได้ที่ลิงก์นี้:
${file.getUrl()}

หากคุณต้องการแก้ไขไฟล์ โปรดเลือกเมนู "ไฟล์ > สร้างสำเนา" เพื่อทำสำเนาเป็นของคุณเอง

หากคุณไม่ได้สมัคร กรุณาเพิกเฉยต่ออีเมลฉบับนี้

ขอแสดงความนับถือ
ครูเชียร
`;

  GmailApp.sendEmail(formData.email, subject, body);

  return { success: true, message: "ลงทะเบียนสำเร็จและส่งอีเมลเรียบร้อยแล้ว!" };
}


index.html

     
<html lang="th">
<head>
  <meta charset="UTF-8">
  <title>ลงทะเบียนรับไฟล์</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <!-- Bootstrap 5.3.3 CDN -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body class="bg-light">
  <div class="container d-flex justify-content-center align-items-center vh-100">
    <div class="card shadow rounded-4 p-4 w-100" style="max-width: 500px;">
      <h3 class="text-center mb-4">ลงทะเบียนรับไฟล์</h3>
      <form id="registerForm">
        <div class="mb-3">
          <label for="fullname" class="form-label">ชื่อ นามสกุล</label>
          <input type="text" class="form-control" id="fullname" name="fullname" required>
        </div>
        <div class="mb-3">
          <label for="email" class="form-label">อีเมล</label>
          <input type="email" class="form-control" id="email" name="email" required>
        </div>
        <div class="mb-3">
          <label for="company" class="form-label">ชื่อหน่วยงาน</label>
          <input type="text" class="form-control" id="company" name="company" required>
        </div>
        <div class="mb-3">
          <label for="affiliate" class="form-label">สังกัด</label>
          <input type="text" class="form-control" id="affiliate" name="affiliate" required>
        </div>
        <div class="d-grid">
          <button type="submit" class="btn btn-primary">ลงทะเบียน</button>
        </div>
        <!-- Response Message -->
        <div id="result" class="mt-3 text-center"></div>
        <!-- Loading Spinner -->
        <div id="loading" class="d-none text-center mt-3">
          <div class="spinner-border text-primary" role="status">
            <span class="visually-hidden">กำลังโหลด...</span>
          </div>
          <div class="mt-2">กำลังตรวจสอบข้อมูล...</div>
        </div>
      </form>
    </div>
  </div>
  
  

  <script>
    document.getElementById("registerForm").addEventListener("submit", function(e) {
      e.preventDefault();
      const loading = document.getElementById("loading");
      const message = document.getElementById("result")
      // แสดง spinner และล้างข้อความเดิม
      message.innerHTML = '';
      loading.classList.remove("d-none");
      const formData = {
        fullname: document.getElementById("fullname").value,
        email: document.getElementById("email").value,
        affiliate: document.getElementById("affiliate").value,
        company: document.getElementById("company").value
      };
      google.script.run
        .withSuccessHandler(function(response) {
          if (response.success) {
            loading.classList.add("d-none");
            message.innerHTML = `<div class="alert alert-success">${response.message}</div>`;
            document.getElementById("registerForm").reset();
          }
        })
        .submitForm(formData);
    });
  </script>
</body>
</html>


Download Now!!!!!!

Tags:
แสดงความคิดเห็น (0)
ใหม่กว่า เก่ากว่า