บทที่ 10: คู่มือการติดตั้งและเชื่อมโยงระบบอย่างละเอียด

ขั้นตอนการเชื่อมโยงระบบ (Step-by-Step)

1. ตรวจสอบชื่อแอตทริบิวต์ name ในโค้ด HTML

เปิดไฟล์ index.html ของคุณ มองหาแท็ก <form> และช่องกรอกข้อมูล <input> / <textarea>

กฎสำคัญ: คุณสมบัติ name="..." ใน HTML ต้องตั้งชื่อให้ ตรงเป๊ะ กับที่เขียนไว้ใน Apps Script (ตัวพิมพ์เล็ก/ใหญ่มีผล)

HTML
<!-- ตัวอย่างการตั้งค่าแอตทริบิวต์ name ที่ถูกต้อง -->
<form id="contactForm">
  <input type="text" name="name" placeholder="ชื่อของคุณ" required>
  <input type="email" name="email" placeholder="อีเมลของคุณ" required>
  <textarea name="message" placeholder="ข้อความ" required></textarea>
  <button type="submit">ส่งข้อความ</button>
</form>

2. ใส่โค้ด JavaScript สำหรับส่งข้อมูล

นำโค้ด JavaScript ด้านล่างนี้ไปวางไว้ก่อนปิดแท็ก </body> ในไฟล์ index.html ของคุณ โดยอย่าลืมเปลี่ยน URL_จาก_GOOGLE_APPS_SCRIPT ให้เป็นลิงก์จริงที่คุณก็อปปี้มา

HTML
<script>
  const scriptURL = 'วาง_URL_ของ_APPS_SCRIPT_ตรงนี้/exec';
  const form = document.getElementById('contactForm');

  form.addEventListener('submit', e => {
    e.preventDefault(); // ป้องกันไม่ให้หน้าเว็บรีเฟรช
    
    // เปลี่ยนข้อความบนปุ่มเพื่อแจ้งสถานะกำลังส่ง
    const submitBtn = form.querySelector('button[type="submit"]');
    const originalBtnText = submitBtn.innerText;
    submitBtn.innerText = 'กำลังส่งข้อมูล...';
    submitBtn.disabled = true;

    // ส่งข้อมูลไปยัง Google Apps Script
    fetch(scriptURL, { method: 'POST', body: new FormData(form)})
      .then(response => response.json())
      .then(data => {
        if(data.result === 'success') {
          alert('ส่งข้อความเรียบร้อยแล้ว! ขอบพระคุณครับ');
          form.reset(); // ล้างข้อมูลในฟอร์ม
        } else {
          alert('เกิดข้อผิดพลาด กรุณาลองใหม่อีกครั้ง');
        }
      })
      .catch(error => {
        console.error('Error!', error.message);
        alert('ไม่สามารถส่งข้อมูลได้ กรุณาตรวจสอบการเชื่อมต่อ');
      })
      .finally(() => {
        // คืนค่าปุ่มกดกลับเป็นเหมือนเดิม
        submitBtn.innerText = originalBtnText;
        submitBtn.disabled = false;
      });
  });
</script>

รายการเช็กความถูกต้องก่อนใช้งานจริง (Troubleshooting Checklist)

หากทดลองกรอกฟอร์มแล้วข้อมูลไม่เข้า Google Sheets ให้ตรวจสอบตามรายการด้านล่างนี้: