วิธีฝัง Google ฟอร์มลงในเว็บไซต์ของคุณ

อัปเดตเมื่อกรกฎาคม 2026 · อ่านใช้เวลา 9 นาที

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

การรับโค้ดฝังในตัว

1. เปิดฟอร์มของคุณแล้วคลิก Send ที่มุมบนขวา
2. ในไดอะล็อก คลิกไอคอน < > (embed HTML)
3. Google จะสร้างโค้ด iframe ที่มีลักษณะดังนี้:

<iframe src="https://docs.google.com/forms/d/e/FORM_ID/viewform?embedded=true" width="640" height="921" frameborder="0" marginheight="0" marginwidth="0">Loading…</iframe>

4. คลิก Copy แล้ววางโค้ดนั้นในที่ที่ไซต์ของคุณรองรับ HTML ดิบ

การปรับความกว้างและความสูง

ขนาดเริ่มต้นที่ Google สร้างขึ้นเป็นการคาดเดาที่สมเหตุสมผล แต่แทบไม่เคยแม่นยำ แก้ไขตัวเลขสองค่าโดยตรงในโค้ด:

• Width — ตั้งค่าให้ตรงกับคอลัมน์เนื้อหาของหน้าคุณ ตัวเลือกที่พบบ่อยคือ width="100%" ร่วมกับ max-width บนคอนเทนเนอร์ที่ห่อไว้ เพื่อให้ฟอร์มปรับขนาดตามหน้าแทนที่จะคงขนาดพิกเซลตายตัว
• Height — นี่คือค่าที่ทำให้เกิดปัญหา Google ฟอร์มไม่ปรับขนาด iframe โดยอัตโนมัติเมื่อคุณเพิ่มหรือลบคำถาม ดังนั้นหากฟอร์มของคุณยาวกว่าค่าความสูง ด้านล่างจะถูกตัดและผู้เยี่ยมชมต้องเลื่อนภายในกล่องเล็ก ๆ เพื่อหาปุ่มส่ง เมื่อไม่แน่ใจ ให้ตั้งความสูงสูงกว่าที่คุณคิดว่าต้องการอย่างเห็นได้ชัด — พื้นที่ว่างเพิ่มเติม 200-300 พิกเซลด้านล่างฟอร์มสั้น ๆ เป็นปัญหาที่เล็กกว่าปุ่มส่งที่ถูกตัดในฟอร์มยาวมาก

การฝังบน WordPress

เพิ่มบล็อก Custom HTML (ในตัวแก้ไขแบบบล็อก) หรือวิดเจ็ต Text ในโหมด HTML (ตัวแก้ไขแบบคลาสสิก) แล้ววางโค้ด iframe ลงไปโดยตรง WordPress จะแสดงผลตามที่เป็น — ไม่ต้องใช้ปลั๊กอิน แม้ว่าปลั๊กอินฟอร์มที่ "นำเข้า" Google ฟอร์มจะไม่จำเป็นสำหรับการฝังแบบง่าย ๆ เช่นนี้

การฝังบน Squarespace

เพิ่ม Code Block ลงในหน้า (จากเมนูบล็อกเมื่อแก้ไขหน้า) วางโค้ด iframe แล้วบันทึก บล็อกโค้ดของ Squarespace รองรับการฝังดิบเช่นนี้โดยไม่มีข้อจำกัด แต่ให้ตรวจสอบการตั้งค่าความกว้างของบล็อกเทียบกับกริดของหน้าเพื่อไม่ให้ฟอร์มล้นออกจากคอลัมน์

การฝังบน Wix

Wix ต้องใช้องค์ประกอบ Embed > Embed a Widget (หรือ "HTML iframe") จากแผง Add แล้ววางโค้ดลงในแผงการตั้งค่าที่เปิดขึ้นมา ต่างจาก WordPress และ Squarespace ตรงที่ Wix จะแสดงผล HTML ที่ฝังไว้ภายใน iframe wrapper ของตัวเอง ดังนั้นคุณอาจต้องปรับขนาดขององค์ประกอบบนแคนวาสนอกเหนือจากการแก้ไขค่าความสูงในโค้ด

การฝังในหน้า HTML ธรรมดา

หากคุณกำลังเขียนโค้ดหน้าเว็บด้วยมือ ให้วางโค้ด iframe ลงใน body โดยตรงตรงที่คุณต้องการให้ฟอร์มปรากฏ — ไม่ต้องจัดการเป็นพิเศษ ควรห่อด้วย div คอนเทนเนอร์ที่มี max-width เพื่อไม่ให้ฟอร์มยืดเต็มขอบบนหน้าจอกว้าง

ปัญหาที่พบบ่อย

1. ฟอร์มถูกตัดที่ด้านล่าง เกือบทุกครั้งเป็นปัญหาเรื่องความสูง — ดูหมายเหตุการปรับด้านบน เพิ่มค่าความสูงจนกว่าฟอร์มทั้งหมด รวมถึงปุ่มส่งและข้อผิดพลาด "required" ที่อาจปรากฏขึ้น จะพอดีโดยไม่มีแถบเลื่อนภายใน
2. ฟอร์มที่ฝังดูไม่ตอบสนองบนมือถือ ความกว้างพิกเซลคงที่จะไม่หดตัวสำหรับหน้าจอเล็ก ตั้งค่า width="100%" ใน iframe และให้ CSS max-width บนองค์ประกอบแม่ควบคุมขอบบน เพื่อให้ปรับขนาดลงตามธรรมชาติบนโทรศัพท์
3. ฟอร์มโหลดแบบว่างเปล่าหรือแสดงข้อผิดพลาด "refused to connect" โดยปกติหมายความว่าหน้าที่ฝังไว้ถูกให้บริการผ่านเครือข่ายหรือพร็อกซี CMS ที่บล็อก iframe จากบุคคลที่สาม ตรวจสอบการตั้งค่า Content-Security-Policy ของไซต์คุณหากคุณจัดการเอง เนื่องจากกฎ frame-src ที่เข้มงวดอาจบล็อกโดเมนของ Google อย่างเงียบ ๆ
4. ฟอร์มกะพริบ "Loading…" และไม่เสร็จสมบูรณ์เลย ตรวจสอบว่าการตั้งค่าการแชร์ของฟอร์มอนุญาตให้ทุกคนที่มีลิงก์ดูได้ — หากถูกจำกัดเฉพาะบุคคลหรือองค์กรของคุณเท่านั้น iframe ที่ฝังบนหน้าสาธารณะจะโหลดไม่สำเร็จสำหรับผู้เยี่ยมชมภายนอกเช่นเดียวกับลิงก์โดยตรง
5. สไตล์ดูไม่สอดคล้องกับส่วนที่เหลือของหน้า Google ฟอร์มแสดงฟอนต์และสีของตัวเองภายใน iframe และไม่สืบทอด CSS ของไซต์คุณ — ไม่มีวิธีที่รองรับในการปรับสไตล์ลักษณะภายในของฟอร์มจากภายนอก iframe มีเพียงคอนเทนเนอร์รอบ ๆ เท่านั้น

การฝังและประสิทธิภาพการโหลดหน้า

Google ฟอร์มที่ฝังไว้จะโหลดเนื้อหา iframe ของตัวเองแยกจากส่วนที่เหลือของหน้า ซึ่งเพิ่มคำขอเครือข่ายพิเศษและความล่าช้าเล็กน้อยก่อนที่ฟอร์มจะปรากฏ — โดยปกติไม่มากพอที่จะสังเกตเห็น แต่ควรทราบไว้หากคุณกำลังตรวจสอบความเร็วของหน้า หากฟอร์มอยู่ต่ำกว่าจุดที่มองเห็นได้ทันที ให้พิจารณาโหลด iframe แบบ lazy (เพิ่ม loading="lazy" ในแท็ก iframe) เพื่อไม่ให้แย่งแบนด์วิดท์กับเนื้อหาที่ผู้เยี่ยมชมเห็นทันที นี่เป็นแอตทริบิวต์ HTML แบบเนทีฟที่เบราว์เซอร์สมัยใหม่ทั้งหมดรองรับและไม่ต้องใช้สคริปต์เพิ่มเติม

ข้อพิจารณาด้านการเข้าถึง

เนื่องจากเนื้อหาฟอร์มอยู่ภายใน iframe ของ Google เอง การเข้าถึง — ป้ายกำกับสำหรับโปรแกรมอ่านหน้าจอ การนำทางด้วยแป้นพิมพ์ ลำดับโฟกัส — จึงถูกกำหนดโดยตัว Google ฟอร์มเองมากกว่าสิ่งที่คุณควบคุมบนหน้าของคุณ สิ่งเดียวที่คุณสามารถปรับปรุงได้จากฝั่งของคุณคือการเพิ่มแอตทริบิวต์ title ที่บรรยายลงในแท็ก iframe (เช่น title="Event registration form") ซึ่งโปรแกรมอ่านหน้าจอจะประกาศก่อนเข้าสู่เนื้อหาที่ฝังไว้ สำหรับมุมมองที่กว้างขึ้นเกี่ยวกับความสามารถในการเข้าถึงของ Google ฟอร์มโดยพื้นฐาน ดูคู่มือของเราเกี่ยวกับ การเข้าถึงของ Google ฟอร์ม

การฝังเทียบกับการลิงก์ออกไปเฉย ๆ

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

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

การฝังสำหรับแบบฟอร์มติดต่อ

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

คำถามที่พบบ่อย

คู่มือที่เกี่ยวข้อง

• วิธีแชร์ Google ฟอร์ม
• การใช้ Google ฟอร์มเป็นแบบฟอร์มติดต่อ
• วิธีสร้าง Google ฟอร์ม
• การฝัง Google ฟอร์มใน WordPress แบบเจาะลึก
• คู่มือการเข้าถึงของ Google ฟอร์ม