Google Docs: สร้างแบบฟอร์มรับข้อมูลสำหรับใส่เว็บไซต์หรือบล็อก


บทความนี้จะแสดงตัวอย่างการเริ่มต้นสร้างแบบฟอร์มด้วยกูเกิ้ลดอคส์ (Create Forms in Google Docs) ซึ่งสร้างได้ฟรี และสามารถนำไปใส่ลงเว็บหรือบล็อกได้ตามต้องการ นอกจากนี้เมื่อแก้ไขหน้าตาของฟอร์มต้นฉบับก็จะส่งผลให้แบบฟอร์มที่กำลังถูกใช้งานอยู่เปลี่ยนแปลงตามได้เองโดยอัตโนมัติ

ถ้าหากคุณลองใส่ข้อมูลลงในตัวอย่างแบบฟอร์มข้างล่างนี้ก็จะพบว่า สิ่งที่คุณใส่ลงไปนั้นมันจะไปแสดงอยู่ในแผนภูมิข้อมูลสรุปตรงส่วนท้ายของบทความนี้ครับ

ตัวอย่างแบบฟอร์มที่สร้างด้วย Google Docs


ซึ่งบทความนี้จะจำแนกการอธิบายโดยแบ่งออกเป็นแต่ละส่วนคือ
  • ขั้นตอนที่ 1-7 วิธีเริ่มต้นสร้างแบบฟอร์ม
  • ขั้นตอนที่ 8-10 การขอโค้ดเพื่อนำไปติดตั้งในเว็บหรือบล็อก
  • ขั้นตอนที่ 11-13 วิธีดูสเปรดชีตที่ใช้เก็บข้อมูลจากฟอร์มนี้
  • ขั้นตอนที่ 14-16 การปรับแต่งแก้ไขแบบฟอร์มที่กำลังงานใช้อยู่
  • ขั้นตอนที่ 17 วิธีเข้าไปดูข้อมูลสรุปของฟอร์ม
  • ขั้นตอนที่ 18-21 วิธีปรับแต่งการยืนยันแบบฟอร์มที่แสดงให้ผู้อื่นเห็น


วิธีเริ่มต้นสร้างแบบฟอร์ม

ขั้นตอนที่ 1. เข้าไปที่ http://docs.google.com/

ขั้นตอนที่ 2. เลือกที่ 'สร้างใหม่ > แบบฟอร์ม'


ขั้นตอนที่ 3. เลือกรูปแบบเพื่อกำหนดหน้าตาของแบบฟอร์มนี้โดยไปที่ 'ชุดรูปแบบ' จากนั้นก็เลือกแม่แบบที่ชอบได้เลย

ขั้นตอนที่ 4. ลองดูตัวอย่างแบบฟอร์มที่กำลังสร้างขึ้นนี้จากลิงก์บริเวณด้านล่างสุดของหน้าจอ ซึ่งอยู่หลังข้อความว่า 'คุณสามารถดูฟอร์มที่เผยแพร่ได้ที่นี่'


ขั้นตอนที่ 5. ใส่ข้อมูลหัวข้อของแบบฟอร์มตามต้องการ ซึ่งเราสามารถใช้เมาส์ลากเพื่อย้ายตำแหน่งหัวข้อคำถามได้ โดยที่
  • ไอคอนดินสอคือ ใช้สั่งเปิดหรือปิดการแก้ไขหัวข้อนั้น
  • ไอคอนกระดาษคือ ให้คัดลอกหัวข้อที่กำลังเลือกนั้นเพิ่มขึ้นมาอีกหนึ่งอัน
  • ไอคอนรูปถังขยะคือ ลบหัวข้อคำถามอันนั้น

ขั้นตอนที่ 6. เพิ่มช่องสำหรับรับข้อมูลในฟอร์มนี้ได้โดยเลือกที่ 'เพิ่มรายการ'

ขั้นตอนที่ 7. เมื่อสร้างแบบฟอร์มเสร็จแล้วก็กดที่ปุ่ม 'บันทึก' ซึ่งอยู่บริเวณมุมด้านขวาบน



การขอโค้ดเพื่อนำไปติดตั้งในเว็บหรือบล็อก

ขั้นตอนที่ 8. สามารถนำฟอร์มอันนี้ไปใส่ลงเว็บหรือบล็อกได้โดยเลือกที่ 'ดำเนินการเพิ่ม > ฝัง'


ขั้นตอนที่ 9. จะพบโค้ดสำหรับฝังฟอร์มในหน้าเว็บแสดงไว้อยู่ ซึ่งสามารถนำไปติดตั้งได้ตามต้องการ
นอกจากนี้ถ้าต้องการปรับขนาดแบบฟอร์มให้พอดีกับหน้าเว็บของเรา ก็แก้ไขในโค้ดได้เลยที่ width="ความกว้างของฟอร์ม" กับ height="ความสูงของฟอร์ม"


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



วิธีดูสเปรดชีตที่ใช้เก็บข้อมูลจากฟอร์มนี้

ขั้นตอนที่ 11. เมื่อสร้างแบบฟอร์มไว้ใช้งานเสร็จแล้ว สามารถเข้าสู่สเปรดชีตที่เก็บข้อมูลฟอร์มนี้ได้โดยไปที่ http://docs.google.com/ ก็จะพบฟอร์มที่เราสร้างขึ้นอยู่ในรายการเอกสาร

ขั้นตอนที่ 12. โดยเมื่อกดคลิกที่ชื่อฟอร์มนั้นระบบก็จะนำเราไปสู่ตารางสเปรดชีตที่ใช้เก็บข้อมูลจากแบบฟอร์มอันนี้เอาไว้


ขั้นตอนที่ 13. ซึ่งจากภายในหน้าตารางสเปรดชีต ก็สามารถขอโค้ดสำหรับใส่ในหน้าเว็บหรือบล็อกได้เช่นกัน โดยไปที่เมนูด้านบนของสเปรดชีตแล้วเลือก 'ฟอร์ม > ฝังฟอร์มในหน้าเว็บ' ก็จะพบโค้ดสำหรับฝังฟอร์มเหมือนกันกับในขั้นตอนที่ 7 แสดงไว้อยู่เช่นกัน




การปรับแต่งแก้ไขแบบฟอร์มที่กำลังงานใช้อยู่

ขั้นตอนที่ 14. การปรับแต่งแก้ไขแบบฟอร์มจะส่งผลให้แบบฟอร์มที่ฝังอยู่ในหน้าเว็บหรือบล็อกของเรามีการเปลี่ยนแปลงตามสิ่งที่เราทำได้เองโดยอัตโนมัติ โดยที่เราไม่จำเป็นต้องคัดลอกโค้ดมาฝังใหม่อีก

ขั้นตอนที่ 15.ในหน้าสเปรดชีตนี้เราสามารถกลับเข้าไปแก้ไขหน้าแบบฟอร์มที่กำลังใช้งานอยู่ได้โดยเลือกที่ 'ฟอร์ม > แก้ไขแบบฟอร์ม'


ขั้นตอนที่ 16. จากหน้าจอแก้ไขแบบฟอร์มนี้ก็สามารถกลับเข้าไปที่สเปรดชีตได้ด้วย โดยเลือกที่ 'ดูการตอบกลับ > สเปรดชีต' ระบบก็นำเรากลับมาที่ตารางเก็บข้อมูลอีกครั้ง




วิธีเข้าไปดูข้อมูลสรุปของฟอร์ม

ขั้นตอนที่ 17. เราสามารถดูข้อมูลสรุปของฟอร์มซึ่งแสดงให้เห็นถึงรายละเอียดต่างๆ ของข้อมูลที่ถูกใส่ลงในฟอร์มนี้ รวมทั้งแผนภูมิข้อมูล ซึ่งมีลักษณะคล้ายข้อมูลสรุปในส่วนท้ายสุดของบทความนี้
โดยเข้าไปสู่หน้าจอแก้ไขแบบฟอร์มจากนั้นให้เลือกที่
'ดูการตอบกลับ > ข้อมูลสรุป'





วิธีปรับแต่งการยืนยันแบบฟอร์มที่แสดงให้ผู้อื่นเห็น

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


ขั้นตอนที่ 19. ในช่องแก้ไขการยืนยันจะเป็นสิ่งที่แสดงให้ผู้ที่ลงข้อมูลใส่ในฟอร์มของคุณเห็นหลังจากกดปุ่มบันทึกของฟอร์มแล้ว

ขั้นตอนที่ 20. นอกจากนี้เรายังสามารถนำผลสรุปเหล่านั้นมาแสดงแบบออนไลน์ในเว็บหรือบล็อกได้ด้วยเหมือนกับตัวอย่างข้อมูลสรุปในส่วนท้ายของบทความนี้ โดยกดเลือกยืนยันที่ 'เผยแพร่ข้อมูลสรุปของการตอบกลับ' เพื่ออนุญาตให้ผู้อื่นมองเห็นข้อมูลสรุปของฟอร์มนี้ได้

ขั้นตอนที่ 21. กดปุ่ม 'บันทึก' หลังจากนั้นก็สามารถนำโค้ดการแสดงข้อมูลสรุปมาใส่ลงในเว็บหรือบล็อกให้ผู้อื่นชมได้เลย


ตัวอย่างข้อมูลสรุปของแบบฟอร์มที่สร้างด้วย Google Docs

Post Status




12 ความคิดเห็น:

ladyblue กล่าวว่า...

อยากได้แบบฟอร์มที่ให้เลือกวันที่ได้ด้วยน่ะค่ะ ทำอย่างไรคะ

Max กล่าวว่า...

ถึงคุณ ladyblue
เมื่อมีผู้ส่งข้อมูลลงในฟอร์มนั้น ก็จะถูกบันทึกเวลาให้เองโดยอัตโนมัติ ใส่ลงในตารางสเปรดชีตที่ใช้เก็บข้อมูลภายในช่อง 'ประทับเวลา' อยู่แล้วครับ ซึ่งตำแหน่งที่แสดงช่องนั้นสามารถดูได้จากภาพตัวอย่างในขั้นตอนที่ 13

ladyblue กล่าวว่า...

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

Max กล่าวว่า...

ถ้าเป็นช่องสำหรับเลือก "เดือน" ก็สามารถทำให้เหมือนกับช่องเลือก "อายุ" ในแบบฟอร์มตัวอย่างข้างบนนี้ซึ่งมีลักษณะเป็น Drop Down Menu ได้เลย

แต่อาจไม่เหมาะสำหรับใช้เลือก "วัน" เนื่องจากบางเดือนจะมี 30 หรือ 31 วัน นอกจากนี้ในเดือนกุมภาพันธ์ก็มีได้ทั้ง 28 วันในปีปกติ และ 29 วันเมื่อถึงปีอธิกสุรทิน ซึ่งคงต้องทำเป็นแบบฟอร์มกูเกิ้ลดอคส์แบบเชื่อมโยงหลายหน้าเหมือนกับต้วอย่างในลิงก์ข้างล่างนี้
http://tip.maxlayout.com/2011/11/multi-page-forms-with-google-docs.html

เพราะว่าในขณะนี้แบบฟอร์มของกูเกิ้ลดอคส์ยังไม่มีตัวเลือกสำหรับ "วันที่" ให้ใช้งานโดยตรงครับ

ladyblue กล่าวว่า...

ขอบคุณค่ะ

Dental LKB กล่าวว่า...

ถ้าอยากทำภาพพื้นหลังเองอะคะ
ไม่อยากได้รูปในชุดรูปแบบ
สามารถ สร้างภาพพื้นหลังขึ้นมาได้เองไหมค่ะ

Max กล่าวว่า...

เท่าที่ผมรู้ ตอนนี้ยังทำไม่ได้ครับ

Pongsook Kantarattanakul กล่าวว่า...

ขอบคุณครับ สำหรับข้อมูล

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

ขอบคุณครับ

Max กล่าวว่า...

วิธีดูลำดับข้อมูลแบบทั่วไปคงต้องเข้าไปที่ตารางสเปรดชีตซึ่งมีเลขลำดับแสดงอยู่ทางด้านซ้ายมือ

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

Thananutt Sasinchottiphat กล่าวว่า...

สามารถแนบไฟล์ภาพได้ไหมครับ

Max กล่าวว่า...

เท่าที่ผมรู้ ตอนนี้ยังแนบไฟล์ภาพไม่ได้ครับ
ถ้าต้องการเปลี่ยนหน้าตาแบบฟอร์มคงต้องเลือกจากชุดแม่แบบที่มีอยู่แล้ว

ตัวแทนประกันวินาศภัย กล่าวว่า...

ขอบคุณมากครับ

แสดงความคิดเห็น