เปลี่ยน Google Form ให้สวยงามด้วย AI

ถ้าคุณอยากเปลี่ยนหน้าตาของ Google Form ให้สวยงาม ให้สามารถล้อไปกับเว็บไซท์หรือ brand ของเรา โดยยังคงความสามารถในการส่งข้อมูลไปยัง Google Sheets ได้

โพสนี้ผมจะมาสอนคุณในการเปลี่ยน Google Form ที่ดูแสนหน้าเบื่อ ให้กลายเป็นเว็บแอพแบบเฟี้ยวฟ้าวด้วย AI กันครับ

อันดับแรกให้เราสร้าง Google Form ขึ้นมาก่อนโดยให้ทำการผูกกับ Google Sheets ด้วยการกดที่เมนู “เครื่องมือ – สร้างแบบฟอร์มใหม่” ที่ไฟล์ Google Sheets ของเรา

หลังจากที่เราทำการสร้างแบบฟอร์ม Google Form เสร็จเรียบร้อยแล้ว ให้ทำการกดที่ปุ่มจุดสามจุดที่มุมบนขวา และ เลือก “แบบฟอร์มที่กรอกล่วงหน้า”

ให้เราทำการกรอกข้อมูลตัวอย่างอะไรลงไปก็ได้ แล้วให้กดที่ปุ่ม “รับลิงก์” ที่ด้านล่างสุดของฟอร์ม ทำการ copy เก็บไว้

ไปที่ ChatGPT หรือถ้าถนัดใช้งาน Gemini หรือ Claude ก็ได้เช่นกัน และนำเอา prompt ต่อไปนี้ไปวางลงไปได้เลย โดย Prompt ต่อไปนี้จะเป็น Prompt ที่จะบอก AI ให้ทำการสร้าง Web Application ที่สามารถกรอกฟอร์มไปยัง Google Sheets ให้กับเราได้

🤖 ตัวอย่าง Prompt ในการสร้างเว็บแอพจาก Google Form

convert the following google form link below into a responsive HTML website that can send a query string  directly into google sheets file. The form should be able to auto submit the data into google sheets without prompting the confirmation page from google form with using Google Form POST request.

The HTML form website design should be minimal with theme of pastel.

The header of the form should display wording "ชื่อหัวฟอร์มของเรา"

Input of the form should be in the following order,

1. "ทะเบียนรถที่เติม" with the following input option
บร-1425
พศ-2526
คศ-2025
พร-1234

2. จำนวนลิตรที่เติม with restriction to only number input

3. "คนที่เติม" with the following input option
แดง
น้อย
จิ๋ว

[-------- Prefilled link Google Form ของเรา ----------]

โดยสิ่งที่เราสามารถปรับแต่ง Prompt ของเราคือ

1. ส่วนของตีม เราสามารถระบุตีมที่เราต้องการลงไปได้เช่น Blue and Red หรือถ้าเรามีเลข Code สีก็สามารถใส่ลงไปได้เช่นกัน
2. ชื่อ Header ของฟอร์ม สามารถระบุชื่อฟอร์มได้ตามต้องการ
3. และสุดท้ายคือ ข้อมูลที่ต้องการให้ user กรอกเข้ามาว่าอยากให้มีข้อความอะไรบ้าง
4. ส่วนในบรรทัดล่างสุดให้เราทำการ paste link ที่เราได้บันทึกไว้ก่อนจาก Google Form มาใส่ที่ตรงนี้ได้เลย

เพิ่มเติมคือเราอาจจะเพิ่มเติมในส่วนของ Logo บริษัทของเราให้อยู่ที่หัวของฟอร์ม หรือ อาจจะอยากให้มี pop-up แจ้งเวลา user กดส่งข้อมูลแล้วก็ได้เช่นกันครับ

โดยหลังจากนั้นให้ทำการพิมพ์บอก ChatGPT ให้ทำการสร้างเป็น file index.html ได้ทันที

🤖 Prompt ที่ผมใช้บอก ChatGPT ให้สร้างเป็น file index.html

ฝากสร้างเป็น file index.html แบบพร้อม download ไปใช้ได้เลยให้หน่อย

และหลังจากนั้นเราก็สามารถนำ file นี้ไปทำการ upload ยัง host free ต่างๆเพื่อใช้งานได้เลยครับ โดยในตัวอย่างนี้ผมได้ใช้บริการของ Netify ซึ่งสามารถคลิกที่ลิงค์นี้ได้เลยครับ Netify.com

โดยหลังจากที่เรา sing-in เพื่อเข้าใช้บริการของ Netify แล้วก็สามารถกดที่เมนู Sites และทำการเอา Folder ที่เราได้ unzip file index.html เรียบร้อยแล้วไปวางที่กล่องด้านล่างได้เลยครับ

แล้วถ้ากดเข้าไปยัง Sites ที่เราอัพโหลดเรียบร้อยแล้วก็จะขึ้น url ให้เราสามารถกดเข้าไปยัง webapplication ของเราได้เลยครับ แล้วนี้ก็คือ link ที่เราสามารถแชร์ให้กับทีมงานหรือลูกค้าในการเข้ามากรอกข้อมูลได้นั้นเองครับ

ถ้าใครงงขั้นตอนใหนก็สามารถกดดูรายละเอียดเพิ่มเติมได้ที่คลิปด้านล่างเลยครับ

ใครอยากรู้ว่า Template ระบบเติมน้ำมันทำยังไงก็สามารถสมัคร member ของช่องและดูรายละเอียดวิธีทำที่คลิปด้านล่างได้เลยครับ

สามารถ download template ระบบเติมน้ำมันขนส่งในคลิปได้ที่นี้เลยครับ
🔗 Link download template ระบบเติมน้ำมันรถขนส่ง

💳 ชอบคลิปที่ช่วยเพิ่มประสิทธิภาพการทำงานแบบนี้สามารถสมัครสมาชิกช่องได้ที่ 
https://www.youtube.com/channel/UChxmhkD8uSSzUOkfMO_p5oQ/join

🎥 อุปกรณ์ที่ผมใช้

กล้อง Sony ZV-E10 kit 16-50mm
Mouse Logitech MX Master 3s
MacBook Air M2
ไมค์ wireless Saramonic Blink 500
เก้าอี้ Anda Seat X-Air Pro Ergonomic Gaming Chair
แขนจับจอ Anda Seat Stealth A6L Ergonomic Monitor Arm
ไมโครโฟน AKG Lyra
ไฟส่องหน้าจอ Xiaomi Light Bar