หน้าเว็บ

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

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

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

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

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

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

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

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

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

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

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

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

    ขอบคุณครับ

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

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

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

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

    ตอบลบ

หมายเหตุ: มีเพียงสมาชิกของบล็อกนี้เท่านั้นที่สามารถแสดงความคิดเห็น