ทำ app script เลือกจังหวัดจากรหัสไปรษณีย์ไทย
เว็บแอป

วิธีสร้างฟอร์มลงทะเบียนที่อยู่แบบเลือกลำดับขั้น (จังหวัด → อำเภอ → ตำบล → รหัสไปรษณีย์)

Written by on

คู่มือสร้างฟอร์มออนไลน์ที่สามารถเลือกที่อยู่แบบอัตโนมัติ โดยใช้ Google Apps Script แทน Google Form ธรรมดา เพื่อให้ผู้ใช้กรอกข้อมูลได้สะดวกและรวดเร็ว

Table of Contents

ทำไมต้องใช้ Google Apps Script แทน Google Form?

Google Form ปกติไม่สามารถทำ Dependent Dropdown ได้

หมายความว่า เมื่อผู้ใช้เลือกจังหวัด จะไม่สามารถให้ตัวเลือกอำเภอเปลี่ยนแปลงทันทีได้ เพราะ Google Form ทำงานฝั่ง Client ไม่สามารถ update ข้อมูลแบบ real-time ได้

ทางออก: สร้าง Web App ด้วย Google Apps Script

ข้อดี:

  • ✅ เลือกจังหวัด → อำเภอโหลดทันที
  • ✅ เลือกอำเภอ → ตำบลโหลดทันที
  • ✅ เลือกตำบล → รหัสไปรษณีย์แสดงอัตโนมัติ
  • ✅ ออกแบบหน้าตาได้เอง สวยงาม
  • ✅ บันทึกข้อมูลลง Google Sheets อัตโนมัติ
  • ✅ ไม่ต้องเสียค่าใช้จ่าย (ใช้ Google Apps Script ฟรี)

📦 สิ่งที่ต้องเตรียม

  1. บัญชี Google (Gmail)
  2. เบราว์เซอร์ (แนะนำ Google Chrome)
  3. ข้อมูลที่อยู่ไทย (จังหวัด, อำเภอ, ตำบล, รหัสไปรษณีย์)
  4. ความรู้พื้นฐาน HTML และ JavaScript (ไม่จำเป็นมากนัก เพราะมีโค้ดสำเร็จรูป)

ขั้นตอนที่ 1: สร้าง Google Sheets

1.1 เปิด Google Sheets ใหม่

  1. ไปที่ Google Sheets
  2. คลิก “Blank” เพื่อสร้าง Spreadsheet ใหม่
  3. ตั้งชื่อไฟล์ เช่น "ระบบฟอร์มลงทะเบียนที่อยู่"

1.2 สร้าง 2 Sheets

สร้าง Sheet ทั้งหมด 2 แผ่น:

Sheet 1: AddressData (เก็บข้อมูลที่อยู่)

  • ใช้สำหรับเก็บข้อมูล: จังหวัด, อำเภอ, ตำบล, รหัสไปรษณีย์

Sheet 2: Responses (เก็บคำตอบจากฟอร์ม)

  • ใช้สำหรับบันทึกข้อมูลที่ผู้ใช้กรอกในฟอร์ม

วิธีสร้าง Sheet:

  1. คลิกที่ “+” ด้านล่างซ้าย เพื่อเพิ่ม Sheet
  2. คลิกขวาที่ชื่อ Sheet → “Rename”
  3. เปลี่ยนชื่อเป็น AddressData และ Responses

ขั้นตอนที่ 2: เพิ่มข้อมูลที่อยู่ไทย

2.1 เตรียมข้อมูลใน Sheet “AddressData”

ให้ทำการจัดเรียงข้อมูลในรูปแบบนี้:

จังหวัดอำเภอตำบลรหัสไปรษณีย์
กรุงเทพมหานครบางกอกน้อยบางขุนนนท์10700
กรุงเทพมหานครบางกอกน้อยบางขุนศรี10700
กรุงเทพมหานครบางกอกใหญ่วัดอรุณ10600
ขอนแก่นเมืองขอนแก่นในเมือง40000
ขอนแก่นเมืองขอนแก่นสำราญ40000

2.2 วิธีนำเข้าข้อมูล

วิธีที่ 1: Copy-Paste

  1. คัดลอกข้อมูลจาก CSV หรือ Excel
  2. วางลงใน Sheet “AddressData”
  3. ตรวจสอบให้แน่ใจว่าแถวแรกเป็นหัวตาราง

วิธีที่ 2: Import ไฟล์ CSV

  1. ไปที่ Sheet “AddressData”
  2. คลิก File → Import → Upload
  3. เลือกไฟล์ CSV ที่มีข้อมูลที่อยู่
  4. เลือก “Replace current sheet” หรือ “Append to current sheet”
  5. คลิก “Import data”

2.3 ตั้งค่าหัวตาราง (แถวที่ 1)

ใน Sheet “AddressData” ให้ตั้งหัวตารางดังนี้:

A1: จังหวัด
B1: อำเภอ
C1: ตำบล
D1: รหัสไปรษณีย์

2.4 ตั้งค่าหัวตารางใน Sheet “Responses”

A1: Timestamp
B1: ชื่อ-นามสกุล
C1: จังหวัด
D1: อำเภอ
E1: ตำบล
F1: รหัสไปรษณีย์
G1: อีเมล
H1: เบอร์โทร

💡 เคล็ดลับ: คุณสามารถดาวน์โหลดข้อมูลที่อยู่ไทยแบบเต็มได้จาก:

ขั้นตอนที่ 3: เขียนโค้ด Google Apps Script

3.1 เปิด Apps Script Editor

  1. ใน Google Sheets ไปที่ Extensions → Apps Script
  2. จะเปิดหน้าต่างใหม่ขึ้นมา (Apps Script Editor)
  3. ลบโค้ดเดิมใน Code.gs ออกทั้งหมด

3.2 เขียนโค้ดหลัก (Code.gs)

คัดลอกโค้ดนี้วางใน Code.gs:

function doGet() {
  return HtmlService.createHtmlOutputFromFile('Form')
    .setTitle('ฟอร์มลงทะเบียนที่อยู่')
    .setXFrameOptionsMode(HtmlService.XFrameOptionsMode.ALLOWALL);
}

// ดึงข้อมูลจังหวัดทั้งหมด
function getProvinces() {
  var ss = SpreadsheetApp.getActiveSpreadsheet();
  var sheet = ss.getSheetByName('AddressData');
  var data = sheet.getDataRange().getValues();
  
  // ลบหัวตาราง
  data.shift();
  
  // ดึงจังหวัดไม่ซ้ำ
  var provinces = [...new Set(data.map(row => row[0]))].filter(p => p !== '');
  return provinces.sort();
}

// ดึงอำเภอตามจังหวัด
function getDistricts(province) {
  var ss = SpreadsheetApp.getActiveSpreadsheet();
  var sheet = ss.getSheetByName('AddressData');
  var data = sheet.getDataRange().getValues();
  
  data.shift();
  
  var districts = [...new Set(
    data.filter(row => row[0] === province)
        .map(row => row[1])
  )].filter(d => d !== '');
  
  return districts.sort();
}

// ดึงตำบลตามจังหวัดและอำเภอ
function getSubdistricts(province, district) {
  var ss = SpreadsheetApp.getActiveSpreadsheet();
  var sheet = ss.getSheetByName('AddressData');
  var data = sheet.getDataRange().getValues();
  
  data.shift();
  
  var subdistricts = data
    .filter(row => row[0] === province && row[1] === district)
    .map(row => ({
      subdistrict: row[2],
      zipcode: row[3]
    }));
  
  return subdistricts;
}

// บันทึกข้อมูล
function saveFormData(formData) {
  try {
    var ss = SpreadsheetApp.getActiveSpreadsheet();
    var sheet = ss.getSheetByName('Responses');
    
    // ถ้ายังไม่มี sheet Responses ให้สร้าง
    if (!sheet) {
      sheet = ss.insertSheet('Responses');
      sheet.appendRow(['Timestamp', 'ชื่อ-นามสกุล', 'จังหวัด', 'อำเภอ', 'ตำบล', 'รหัสไปรษณีย์', 'อีเมล', 'เบอร์โทร']);
    }
    
    sheet.appendRow([
      new Date(),
      formData.fullname || '',
      formData.province || '',
      formData.district || '',
      formData.subdistrict || '',
      formData.zipcode || '',
      formData.email || '',
      formData.phone || ''
    ]);
    
    return { success: true, message: 'บันทึกข้อมูลเรียบร้อยแล้ว' };
  } catch (error) {
    return { success: false, message: 'เกิดข้อผิดพลาด: ' + error.toString() };
  }
}

อธิบายโค้ด:

  • doGet() – แสดงหน้าฟอร์มเมื่อมีคนเปิด URL
  • getProvinces() – ดึงรายชื่อจังหวัดทั้งหมดจาก Sheet
  • getDistricts(province) – ดึงอำเภอตามจังหวัดที่เลือก
  • getSubdistricts(province, district) – ดึงตำบลและรหัสไปรษณีย์
  • saveFormData(formData) – บันทึกข้อมูลลง Sheet “Responses”

ขั้นตอนที่ 4: สร้างหน้าฟอร์ม (HTML)

4.1 สร้างไฟล์ HTML ใหม่

  1. ใน Apps Script Editor คลิก “+” ข้าง Files
  2. เลือก “HTML”
  3. ตั้งชื่อไฟล์ว่า Form
  4. ลบโค้ดเดิมออกทั้งหมด

4.2 วางโค้ด HTML

คัดลอกโค้ดนี้วางใน Form.html:

<!DOCTYPE html>
<html>
<head>
  <base target="_top">
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link href="https://fonts.googleapis.com/css2?family=Sarabun:wght@300;400;600&display=swap" rel="stylesheet">
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }
    
    body {
      font-family: 'Sarabun', sans-serif;
      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
      min-height: 100vh;
      padding: 20px;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    
    .container {
      background: white;
      border-radius: 20px;
      box-shadow: 0 20px 60px rgba(0,0,0,0.3);
      max-width: 600px;
      width: 100%;
      padding: 40px;
    }
    
    h1 {
      color: #333;
      margin-bottom: 10px;
      font-size: 28px;
      text-align: center;
    }
    
    .subtitle {
      color: #666;
      text-align: center;
      margin-bottom: 30px;
      font-size: 14px;
    }
    
    .form-group {
      margin-bottom: 20px;
    }
    
    label {
      display: block;
      margin-bottom: 8px;
      color: #333;
      font-weight: 600;
      font-size: 14px;
    }
    
    label .required {
      color: #e74c3c;
    }
    
    input, select {
      width: 100%;
      padding: 12px 15px;
      border: 2px solid #e0e0e0;
      border-radius: 8px;
      font-size: 16px;
      font-family: 'Sarabun', sans-serif;
      transition: all 0.3s;
      background: white;
    }
    
    input:focus, select:focus {
      outline: none;
      border-color: #667eea;
      box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
    }
    
    select:disabled {
      background: #f5f5f5;
      cursor: not-allowed;
    }
    
    input[readonly] {
      background: #f8f9fa;
      cursor: default;
    }
    
    button {
      width: 100%;
      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
      color: white;
      padding: 15px;
      border: none;
      border-radius: 8px;
      font-size: 18px;
      font-weight: 600;
      cursor: pointer;
      transition: transform 0.2s, box-shadow 0.2s;
      margin-top: 10px;
      font-family: 'Sarabun', sans-serif;
    }
    
    button:hover {
      transform: translateY(-2px);
      box-shadow: 0 10px 25px rgba(102, 126, 234, 0.3);
    }
    
    button:active {
      transform: translateY(0);
    }
    
    button:disabled {
      background: #ccc;
      cursor: not-allowed;
      transform: none;
    }
    
    .loading {
      display: none;
      text-align: center;
      padding: 20px;
    }
    
    .spinner {
      border: 3px solid #f3f3f3;
      border-top: 3px solid #667eea;
      border-radius: 50%;
      width: 40px;
      height: 40px;
      animation: spin 1s linear infinite;
      margin: 0 auto 10px;
    }
    
    @keyframes spin {
      0% { transform: rotate(0deg); }
      100% { transform: rotate(360deg); }
    }
    
    .message {
      padding: 15px;
      border-radius: 8px;
      margin-bottom: 20px;
      display: none;
      text-align: center;
      font-weight: 600;
    }
    
    .message.success {
      background: #d4edda;
      color: #155724;
      border: 1px solid #c3e6cb;
    }
    
    .message.error {
      background: #f8d7da;
      color: #721c24;
      border: 1px solid #f5c6cb;
    }
    
    @media (max-width: 600px) {
      .container {
        padding: 25px;
      }
      
      h1 {
        font-size: 24px;
      }
    }
  </style>
</head>
<body>
  <div class="container">
    <h1>📝 ฟอร์มลงทะเบียนที่อยู่</h1>
    <p class="subtitle">กรุณากรอกข้อมูลให้ครบถ้วน</p>
    
    <div id="message" class="message"></div>
    
    <form id="addressForm">
      <div class="form-group">
        <label>ชื่อ-นามสกุล <span class="required">*</span></label>
        <input type="text" id="fullname" name="fullname" placeholder="กรอกชื่อ-นามสกุล" required>
      </div>
      
      <div class="form-group">
        <label>จังหวัด <span class="required">*</span></label>
        <select id="province" name="province" required>
          <option value="">-- เลือกจังหวัด --</option>
        </select>
      </div>
      
      <div class="form-group">
        <label>อำเภอ/เขต <span class="required">*</span></label>
        <select id="district" name="district" disabled required>
          <option value="">-- เลือกอำเภอ --</option>
        </select>
      </div>
      
      <div class="form-group">
        <label>ตำบล/แขวง <span class="required">*</span></label>
        <select id="subdistrict" name="subdistrict" disabled required>
          <option value="">-- เลือกตำบล --</option>
        </select>
      </div>
      
      <div class="form-group">
        <label>รหัสไปรษณีย์ <span class="required">*</span></label>
        <input type="text" id="zipcode" name="zipcode" readonly required>
      </div>
      
      <div class="form-group">
        <label>อีเมล</label>
        <input type="email" id="email" name="email" placeholder="example@email.com">
      </div>
      
      <div class="form-group">
        <label>เบอร์โทรศัพท์</label>
        <input type="tel" id="phone" name="phone" placeholder="0812345678">
      </div>
      
      <button type="submit" id="submitBtn">ส่งข้อมูล</button>
    </form>
    
    <div class="loading" id="loading">
      <div class="spinner"></div>
      <p>กำลังบันทึกข้อมูล...</p>
    </div>
  </div>

  <script>
    // โหลดจังหวัดเมื่อเปิดหน้า
    window.onload = function() {
      loadProvinces();
    };
    
    function loadProvinces() {
      google.script.run
        .withSuccessHandler(function(provinces) {
          var select = document.getElementById('province');
          provinces.forEach(function(province) {
            var option = document.createElement('option');
            option.value = province;
            option.text = province;
            select.add(option);
          });
        })
        .withFailureHandler(function(error) {
          showMessage('ไม่สามารถโหลดข้อมูลจังหวัดได้: ' + error, 'error');
        })
        .getProvinces();
    }
    
    // เมื่อเลือกจังหวัด
    document.getElementById('province').addEventListener('change', function() {
      var province = this.value;
      var districtSelect = document.getElementById('district');
      var subdistrictSelect = document.getElementById('subdistrict');
      var zipcodeInput = document.getElementById('zipcode');
      
      // รีเซ็ตอำเภอ ตำบล รหัสไปรษณีย์
      districtSelect.innerHTML = '<option value="">-- เลือกอำเภอ --</option>';
      subdistrictSelect.innerHTML = '<option value="">-- เลือกตำบล --</option>';
      zipcodeInput.value = '';
      districtSelect.disabled = true;
      subdistrictSelect.disabled = true;
      
      if (province) {
        google.script.run
          .withSuccessHandler(function(districts) {
            districts.forEach(function(district) {
              var option = document.createElement('option');
              option.value = district;
              option.text = district;
              districtSelect.add(option);
            });
            districtSelect.disabled = false;
          })
          .getDistricts(province);
      }
    });
    
    // เมื่อเลือกอำเภอ
    document.getElementById('district').addEventListener('change', function() {
      var province = document.getElementById('province').value;
      var district = this.value;
      var subdistrictSelect = document.getElementById('subdistrict');
      var zipcodeInput = document.getElementById('zipcode');
      
      // รีเซ็ตตำบล รหัสไปรษณีย์
      subdistrictSelect.innerHTML = '<option value="">-- เลือกตำบล --</option>';
      zipcodeInput.value = '';
      subdistrictSelect.disabled = true;
      
      if (district) {
        google.script.run
          .withSuccessHandler(function(subdistricts) {
            subdistricts.forEach(function(item) {
              var option = document.createElement('option');
              option.value = item.subdistrict;
              option.text = item.subdistrict;
              option.dataset.zipcode = item.zipcode;
              subdistrictSelect.add(option);
            });
            subdistrictSelect.disabled = false;
          })
          .getSubdistricts(province, district);
      }
    });
    
    // เมื่อเลือกตำบล
    document.getElementById('subdistrict').addEventListener('change', function() {
      var selectedOption = this.options[this.selectedIndex];
      var zipcode = selectedOption.dataset.zipcode;
      document.getElementById('zipcode').value = zipcode || '';
    });
    
    // ส่งฟอร์ม
    document.getElementById('addressForm').addEventListener('submit', function(e) {
      e.preventDefault();
      
      var formData = {
        fullname: document.getElementById('fullname').value,
        province: document.getElementById('province').value,
        district: document.getElementById('district').value,
        subdistrict: document.getElementById('subdistrict').value,
        zipcode: document.getElementById('zipcode').value,
        email: document.getElementById('email').value,
        phone: document.getElementById('phone').value
      };
      
      // แสดง loading
      document.getElementById('addressForm').style.display = 'none';
      document.getElementById('loading').style.display = 'block';
      
      google.script.run
        .withSuccessHandler(function(result) {
          document.getElementById('loading').style.display = 'none';
          
          if (result.success) {
            showMessage(result.message, 'success');
            // รีเซ็ตฟอร์ม
            setTimeout(function() {
              document.getElementById('addressForm').reset();
              document.getElementById('district').disabled = true;
              document.getElementById('subdistrict').disabled = true;
              document.getElementById('addressForm').style.display = 'block';
            }, 2000);
          } else {
            showMessage(result.message, 'error');
            document.getElementById('addressForm').style.display = 'block';
          }
        })
        .withFailureHandler(function(error) {
          document.getElementById('loading').style.display = 'none';
          document.getElementById('addressForm').style.display = 'block';
          showMessage('เกิดข้อผิดพลาด: ' + error, 'error');
        })
        .saveFormData(formData);
    });
    
    function showMessage(message, type) {
      var messageDiv = document.getElementById('message');
      messageDiv.textContent = message;
      messageDiv.className = 'message ' + type;
      messageDiv.style.display = 'block';
      
      setTimeout(function() {
        messageDiv.style.display = 'none';
      }, 5000);
    }
  </script>
</body>
</html>

อธิบายโค้ด HTML/JavaScript:

  • window.onload – โหลดจังหวัดทันทีเมื่อเปิดหน้า
  • addEventListener('change') – ตรวจจับเมื่อมีการเลือกข้อมูล
  • google.script.run – เรียกใช้ฟังก์ชันใน Apps Script
  • withSuccessHandler – จัดการเมื่อได้ผลลัพธ์สำเร็จ
  • withFailureHandler – จัดการเมื่อเกิดข้อผิดพลาด

ขั้นตอนที่ 5: Deploy Web App

5.1 บันทึกโปรเจค

  1. คลิก 💾 Save (หรือกด Ctrl+S)
  2. ตั้งชื่อโปรเจค เช่น "ระบบฟอร์มที่อยู่"

5.2 Deploy

  1. คลิก Deploy → New deployment
  2. คลิก ⚙️ (Settings) ข้าง “Select type”
  3. เลือก “Web app”
  4. ตั้งค่าดังนี้:
    • Description: “เวอร์ชัน 1.0” (หรือตามต้องการ)
    • Execute as: Me (ตัวคุณเอง)
    • Who has access:
      • เลือก “Anyone” ถ้าต้องการให้ทุกคนเข้าถึงได้
      • เลือก “Anyone with Google account” ถ้าต้องการให้เข้าสู่ระบบก่อน
  5. คลิก Deploy

5.3 อนุญาตการเข้าถึง (ครั้งแรก)

  1. จะขึ้นหน้าต่าง “Authorization required”
  2. คลิก “Authorize access”
  3. เลือกบัญชี Google ของคุณ
  4. คลิก “Advanced” → “Go to [ชื่อโปรเจค] (unsafe)”
    • ⚠️ ไม่ต้องกังวล นี่คือโปรเจคของคุณเอง
  5. คลิก “Allow”

5.4 คัดลอก URL

  1. หลังจาก Deploy สำเร็จ จะได้ Web app URL
  2. คัดลอก URL นี้
  3. URL จะมีลักษณะประมาณนี้: https://script.google.com/macros/s/XXXXXXXXXXXXX/exec

ขั้นตอนที่ 6: ทดสอบและใช้งาน

6.1 ทดสอบฟอร์ม

  1. เปิด URL ที่คัดลอกมาในเบราว์เซอร์ใหม่
  2. ลองกรอกข้อมูล:
    • เลือกจังหวัด → ดูว่าอำเภอโหลดหรือไม่
    • เลือกอำเภอ → ดูว่าตำบลโหลดหรือไม่
    • เลือกตำบล → ดูว่ารหัสไปรษณีย์แสดงหรือไม่
  3. กรอกข้อมูลให้ครบ แล้วกด “ส่งข้อมูล”
  4. ตรวจสอบว่าข้อมูลบันทึกลง Sheet “Responses” หรือไม่

6.2 แชร์ฟอร์มให้คนอื่นใช้

วิธีที่ 1: แชร์ URL โดยตรง

  • ส่ง URL ให้คนอื่นผ่าน Email, LINE, Facebook

วิธีที่ 2: สร้าง QR Code

  • ไปที่ QR Code Generator
  • วาง URL แล้วสร้าง QR Code
  • นำ QR Code ไปติดในป้าย/ใบปลิว

วิธีที่ 3: ฝังในเว็บไซต์

<iframe src="URL_ของคุณ" width="100%" height="800"></iframe>

6.3 ตรวจสอบข้อมูลที่ได้รับ

  1. กลับไปที่ Google Sheets
  2. เปิด Sheet “Responses”
  3. ดูข้อมูลที่ผู้ใช้กรอก (จะมี Timestamp อัตโนมัติ)

❓ คำถามที่พบบ่อย (FAQ)

Q1: จะแก้ไขฟอร์มหลัง Deploy แล้วได้ไหม?

ตอบ: ได้ครับ

  1. แก้ไขโค้ดใน Apps Script Editor
  2. บันทึก (Save)
  3. Deploy → Manage deployments
  4. คลิก ✏️ Edit ที่เวอร์ชันปัจจุบัน
  5. เปลี่ยน “Version” → “New version”
  6. คลิก Deploy
  7. URL จะยังคงเดิม แต่เนื้อหาจะอัปเดต

Q2: ถ้าต้องการเพิ่มฟิลด์อื่นล่ะ?

ตอบ:

  1. เพิ่ม HTML ใน Form.html:
<div class="form-group">
  <label>ชื่อฟิลด์ใหม่</label>
  <input type="text" id="newfield" name="newfield">
</div>
  1. แก้ไข JavaScript ส่วนบันทึกข้อมูล:
var formData = {
  // ... ข้อมูลเดิม
  newfield: document.getElementById('newfield').value
};
  1. แก้ไข saveFormData() ใน Code.gs:
sheet.appendRow([
  // ... ข้อมูลเดิม
  formData.newfield || ''
]);

Q3: ทำไมฟอร์มโหลดช้า?

สาเหตุที่เป็นไปได้:

  • ข้อมูลในชีตมีมากเกินไป (หลายหมื่นแถว)
  • อินเทอร์เน็ตช้า
  • Google Apps Script มีการ rate limit

วิธีแก้:

  • ลดข้อมูลที่ไม่จำเป็นออกจาก Sheet
  • ใช้ Cache เพื่อเก็บข้อมูลชั่วคราว
  • พิจารณาใช้ Database ภายนอก (เช่น Firebase)

Q4: ต้องการให้ส่งอีเมลแจ้งเตือนเมื่อมีคนกรอกฟอร์ม

ตอบ: เพิ่มโค้ดนี้ใน saveFormData():

function saveFormData(formData) {
  // ... บันทึกข้อมูลตามปกติ
  
  // ส่งอีเมลแจ้งเตือน
  MailApp.sendEmail({
    to: 'your-email@gmail.com',
    subject: '🔔 มีผู้กรอกฟอร์มใหม่',
    body: 'ชื่อ: ' + formData.fullname + '\n' +
          'จังหวัด: ' + formData.province + '\n' +
          'อำเภอ: ' + formData.district
  });
  
  return { success: true, message: 'บันทึกข้อมูลเรียบร้อยแล้ว' };
}

Q5: สามารถดูสถิติจำนวนผู้กรอกได้ไหม?

ตอบ: ได้ครับ

  1. ใน Google Sheets → Insert → Chart
  2. เลือกข้อมูลจาก Sheet “Responses”
  3. สร้างกราฟแสดงข้อมูล:
    • จำนวนผู้กรอกแต่ละจังหวัด
    • จำนวนผู้กรอกต่อวัน
    • Top 10 อำเภอที่มีผู้กรอกมากที่สุด

🔧 ปัญหาที่อาจพบและวิธีแก้

ปัญหา 1: ฟอร์มไม่ขึ้น หน้าขาว

สาเหตุ:

  • ยังไม่ได้ Deploy
  • URL ผิด
  • ไม่ได้อนุญาตการเข้าถึง

วิธีแก้:

  1. ตรวจสอบว่า Deploy แล้วหรือยัง
  2. ลอง Deploy ใหม่อีกครั้ง
  3. เปิด URL ในโหมด Incognito/Private

ปัญหา 2: เลือกจังหวัดแล้ว อำเภอไม่โหลด

สาเหตุ:

  • ข้อมูลใน Sheet ไม่ถูกต้อง
  • ชื่อ Sheet ผิด (ต้องเป็น “AddressData”)
  • มีช่องว่างในข้อมูล

วิธีแก้:

  1. ตรวจสอบชื่อ Sheet ให้ถูกต้อง
  2. ลบช่องว่างในข้อมูล
  3. ตรวจสอบว่าหัวตารางถูกต้อง

ปัญหา 3: กดส่งแล้วไม่มีอะไรเกิดขึ้น

สาเหตุ:

  • Sheet “Responses” ไม่มี
  • Permission ไม่ถูกต้อง
  • มี Error ใน Code

วิธีแก้:

  1. สร้าง Sheet “Responses” ถ้ายังไม่มี
  2. ตรวจสอบ Console (F12) ดู Error
  3. ลอง Authorize ใหม่

ปัญหา 4: ฟอนต์ภาษาไทยแสดงผิด

วิธีแก้:

  • ตรวจสอบว่ามี Google Fonts Sarabun ใน <head>:
<link href="https://fonts.googleapis.com/css2?family=Sarabun:wght@300;400;600&display=swap" rel="stylesheet">

ปัญหา 5: Error “Script function not found”

สาเหตุ:

  • ชื่อฟังก์ชันผิด
  • ไม่ได้บันทึกโค้ด

วิธีแก้:

  1. ตรวจสอบชื่อฟังก์ชันให้ตรงกัน
  2. กด Save แล้ว Deploy ใหม่

🎯 สรุป

ขั้นตอนทั้งหมด:

  1. ✅ สร้าง Google Sheets (2 sheets: AddressData, Responses)
  2. ✅ เพิ่มข้อมูลที่อยู่ไทย
  3. ✅ เขียนโค้ด Apps Script (Code.gs)
  4. ✅ สร้างหน้าฟอร์ม (Form.html)
  5. ✅ Deploy Web App
  6. ✅ แชร์ URL ให้ผู้ใช้

💡 ข้อดีของวิธีนี้

  • ✅ ฟรี 100% – ไม่เสียค่าใช้จ่าย
  • ✅ ใช้งานง่าย – ผู้ใช้เลือกได้รวดเร็ว
  • ✅ ปรับแต่งได้ – เพิ่มฟิลด์/เปลี่ยนสีได้เอง
  • ✅ เก็บข้อมูล – บันทึกอัตโนมัติใน Google Sheets
  • ✅ รองรับมือถือ – ใช้งานได้ทั้ง PC/Mobile
  • ✅ ไม่มี Ads – ไม่มีโฆษณา

📚 แหล่งข้อมูลเพิ่มเติม

หากต้องการทดสอบแบบฟอร์มของผม สามารถทดสอบได้จากที่นี่ครับ
https://script.google.com/a/macros/knw.ac.th/s/AKfycbyXfA1zbAaaPD5pIV5QrGEnQNbpR7rwvj-5tKvgmEy2tYmns2W_NBkMLmIaT6r8tkFa/exec

หากต้องการไฟล์ต้นฉบับของผมไปแก้ไข สามารถดาวน์โหลดได้จากที่นี่

หากต้องการความช่วยเหลือ มีบริการเพิ่มแก้ไขฟอร์มให้เป็นแบบของท่าน เช่น เพิ่มฟิลด์ข้อมูล จัดพื้นหลัง แก้ไขระบบ ให้เป็นแบบของท่าน มีค่าใช้จ่ายหลักร้อย อินบล็อกมาสอบถามในไลน์ได้เลยครับ @krujakkrapong

Discover more from KruJakkrapong 's Blog

Subscribe to get the latest posts sent to your email.

Leave a Reply