Google Web Apps Script ตอนที่ 3 : สร้างฟอร์มส่งงานพร้อมแนบไฟล์

 

Google Web Apps Script ตอนที่ 3 : สร้างฟอร์มส่งงานพร้อมแนบไฟล์

                จะเป็นการดีทีเดียวหาก Form Apps Script สามารถแนบไฟล์ส่งได้ด้วย เนื่องจากบางครั้งก็ต้องการทำแบบหน้าเว็บเพจให้นักศึกษา หรือผู้สมัครกรอกข้อมูลแนบหลักฐานด้วย ...ซึ่งก็ๆๆๆๆๆ

"ไม่ใช่เรื่องยาก"เลย ครับ  ว้าว..วันนี้จะพาทุกคนทำแบบฟอร์มพร้อมแนบไฟล์นำส่งได้ด้วยย ผมเอาไฟล์มาแจกให้โหลดไปใช้งานกันฟรีเหมือนเดิมครับ ต้องบอกก่อนะครับ ไฟล์บางไฟล์ก็ไม่แจกนะครับ ต้องเป็นสมัครสมาชิกก่อนครับ (รออีกซักพัก) เอาดูตัวอย่างก่อนเลย 

ดาว์โหลดไฟล์ฟรีแล้วแก้ไปใช้งานของทา่นได้เลย

ดาว์โหลดฟรี

        โหลดไฟล์นี้ไปปรับใช้ก่อนได้เลยนะครับ ปรับแก้ไขเป็นไฟล์ของท่านสำหรับใช้งานได้ทุกแบบฟอร์มทุกแพลตฟอร์มแล้วแต่ท่าน ครับ  ข้อมูลที่กรอกในฟอร์มจะถูกบันทึกลงในไฟล์ Spreadsheet ของท่านและไฟล์ที่แนบฟร์อมก็จะถูกจัดเก็บในโฟลเดอร์ใน Google drive ของท่านครับ  ดูตัวอย่างการใช้งาน

วิดิโอแก้ไขไฟล์เป็นงานของท่าน

(อย่างละเอียด) 

                                                                    

นาทีที่ 1 - 1.48 : ตัวอย่างการทำงาน นาทีที่ 2 .00 : การทำสำเนาไฟล์เป็นของเรา นาทีที่ 4.30 : การสร้างโฟลเดอร์แล้วนำ ID โฟลเดอร์แทนค่า xxxxx เพื่อเป็นไฟล์เรา นาทีที่ 4.50 - 23.20 : การตั้งค่าใช้งานทั้งหมด

วิธีเปลี่ยนพื้นหลังแบบฟอร์ม  3 วิธี ดังนี้  (ดูตามวิดีโอนาทีที่ 15.00 ) 
1.วิธีเปลี่ยนพื้นหลังภาพธรรมชาติแบบ Random  อัตโนมัติสวยงามมาก

                Code : background-image: url('https://source.unsplash.com/1600x900/?nature,water');

          2. วิธีเปลี่ยนพื้นแบบใส่ภาพเอง (ฝากภาพไว้ใน Google Drive) 

                Code : background-image: url('https://drive.google.com/uc?id=xxx');

          3. วิธีเปลี่ยนพื้นสีแบบ Gradient (ไล่เฉดสี) 

              Code : background-image: linear-gradient(to right top, #373005, #683011, #962543, #9c3996, #126feb);

               เปลี่ยนใหม่ได้ตามเว็บนี้ https://mycolor.space/ 
 

        วิธีใส่ตัวแจ้งเตือนข้อมูล Upload สำเร็จ  ไปที่เว็บไซต์ (ดูตามวิดีโอนาทีที่ 8.33)

 https://sweetalert2.github.io/ 

        1. คัดลอก CDN :  <script src="//cdn.jsdelivr.net/npm/sweetalert2@11"></script>

  2. เลือกคัดลอก Code :

Swal.fire({ position: 'top-end', icon: 'success', title: 'Your work has been saved', showConfirmButton: false, timer: 1500 })

ดูวิธีใส่ตามวิดีโอครับ

------------------------

              เป็นยังไงกันบ้างครับ กับ สุดยอดของ Web apps script เอามาใช้ในงานของเราได้อย่างสะบายๆ ใช้ Fill ข้อมูล เก็บข้อมูลงานลง Google Drive  ส่งให้คนอื่นกรอกข้อมูล หรือจะแปะไว้ในเมนูบนเว็บไซต์ หรือส่งไลน์ ส่งเฟส ส่งเมล์ มันสุดยอดดดดด

แล้วพบกันใหม่กับตอนที่ 4 เร็วๆ นี้ครับ 
"พ่อมดตะนอย" 
16/04/2565