Cách Nhúng Google Form Vào Website Của Bạn

Cập nhật tháng 7 năm 2026 · 9 phút đọc

Gửi khách truy cập ra ngoài trang web để điền form sẽ làm mất một số người trong quá trình đó. Nhúng một Google Form trực tiếp vào trang của bạn giữ mọi người trong ngữ cảnh — hữu ích cho form liên hệ, đăng ký sự kiện, widget phản hồi, hoặc bất cứ thứ gì bạn muốn cảm thấy như một phần của trang web của bạn thay vì một sự chuyển hướng. Google tích hợp sẵn mã nhúng miễn phí; đây là cách để sử dụng nó tốt.

Lấy mã nhúng có sẵn

1. Mở form của bạn và nhấp vào Send ở góc trên bên phải.
2. Trong hộp thoại, nhấp vào biểu tượng < > (embed HTML).
3. Google tạo một đoạn iframe trông giống như thế này:

<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. Nhấp Copy, sau đó dán đoạn mã đó vào bất cứ nơi nào trang web của bạn chấp nhận HTML thô.

Điều chỉnh chiều rộng và chiều cao

Kích thước mặc định Google tạo ra là một ước lượng hợp lý, nhưng hiếm khi chính xác. Chỉnh sửa hai con số trực tiếp trong mã:

• Width — đặt nó khớp với cột nội dung trang của bạn. Một lựa chọn phổ biến là width="100%" kết hợp với max-width trên một container bao bọc, để form co giãn theo trang thay vì giữ kích thước pixel cố định.
• Height — đây là giá trị gây ra vấn đề. Google Forms không tự động điều chỉnh kích thước iframe khi bạn thêm hoặc xóa câu hỏi, vì vậy nếu form của bạn dài hơn giá trị height, phần dưới sẽ bị cắt và khách truy cập phải cuộn bên trong một hộp nhỏ để tìm nút gửi. Khi nghi ngờ, hãy đặt height cao hơn đáng kể so với những gì bạn nghĩ mình cần — thêm 200–300 pixel khoảng trống bên dưới một form ngắn là vấn đề nhỏ hơn nhiều so với một nút gửi bị cắt trên một form dài.

Nhúng trên WordPress

Thêm một khối Custom HTML (trong trình chỉnh sửa khối) hoặc một widget Text ở chế độ HTML (trình chỉnh sửa cổ điển), và dán mã iframe trực tiếp vào. WordPress hiển thị nó nguyên trạng — không cần plugin, mặc dù các plugin form "nhập" Google Forms là không cần thiết cho một lần nhúng đơn giản như thế này.

Nhúng trên Squarespace

Thêm một Code Block vào trang (từ menu khối khi chỉnh sửa một trang), dán HTML iframe, và lưu. Các khối mã của Squarespace chấp nhận nhúng thô như thế này mà không hạn chế, nhưng kiểm tra cài đặt chiều rộng của khối so với lưới trang của bạn để form không tràn ra khỏi cột.

Nhúng trên Wix

Wix yêu cầu dùng phần tử Embed > Embed a Widget (hoặc "HTML iframe") của nó từ bảng Add, sau đó dán mã vào bảng cài đặt mở ra. Không giống WordPress và Squarespace, Wix hiển thị HTML nhúng bên trong wrapper iframe riêng của nó, vì vậy bạn có thể cần điều chỉnh kích thước của phần tử trên canvas ngoài việc chỉnh sửa giá trị height của mã.

Nhúng vào một trang HTML thuần

Nếu bạn đang tự viết code cho một trang, dán đoạn iframe trực tiếp vào body ở bất cứ nơi nào bạn muốn form xuất hiện — không cần xử lý đặc biệt. Nên bọc nó trong một div container có max-width để form không kéo giãn hết cạnh này sang cạnh kia trên màn hình rộng.

Các vấn đề thường gặp

1. Form bị cắt ở phía dưới. Điều này hầu như luôn là vấn đề về height — xem ghi chú điều chỉnh ở trên. Tăng giá trị height cho đến khi toàn bộ form, bao gồm nút gửi và bất kỳ lỗi "required" nào có thể xuất hiện, vừa vặn mà không có thanh cuộn bên trong.
2. Form nhúng không trông responsive trên di động. Chiều rộng pixel cố định không co lại cho màn hình nhỏ. Đặt width="100%" trong iframe và để CSS max-width trên phần tử cha kiểm soát giới hạn trên, để nó tự nhiên co lại trên điện thoại.
3. Form tải trống hoặc hiển thị lỗi "refused to connect." Điều này thường có nghĩa là trang nơi nó được nhúng được phục vụ qua một mạng hoặc proxy CMS chặn iframe của bên thứ ba. Kiểm tra cài đặt Content-Security-Policy của trang web nếu bạn quản lý chúng trực tiếp, vì một quy tắc frame-src hạn chế có thể âm thầm chặn domain của Google.
4. Form nhấp nháy "Loading…" và không bao giờ hoàn thành. Xác nhận cài đặt chia sẻ của form cho phép bất kỳ ai có link xem nó — nếu nó bị giới hạn cho những người cụ thể hoặc chỉ tổ chức của bạn, một iframe nhúng trên một trang công khai sẽ không tải được cho khách truy cập bên ngoài giống như một link trực tiếp sẽ vậy.
5. Kiểu dáng trông không nhất quán với phần còn lại của trang. Google Forms hiển thị phông chữ và màu sắc riêng của nó bên trong iframe và không kế thừa CSS của trang web của bạn — không có cách nào được hỗ trợ để thiết kế lại giao diện bên trong của form từ bên ngoài iframe, chỉ có container xung quanh nó.

Nhúng và hiệu suất tải trang

Một Google Form nhúng tải nội dung iframe riêng của nó tách biệt với phần còn lại của trang, điều này thêm một yêu cầu mạng bổ sung và một độ trễ nhỏ trước khi bản thân form xuất hiện — thường không đủ để nhận thấy, nhưng đáng biết nếu bạn đang kiểm tra tốc độ trang. Nếu form nằm dưới màn hình đầu tiên, hãy cân nhắc tải lười cho iframe (thêm loading="lazy" vào thẻ iframe) để nó không cạnh tranh băng thông với nội dung khách truy cập thấy ngay lập tức. Đây là thuộc tính HTML gốc được tất cả trình duyệt hiện đại hỗ trợ và không cần thêm script.

Cân nhắc về khả năng tiếp cận

Vì nội dung form nằm bên trong iframe của riêng Google, khả năng tiếp cận của nó — nhãn cho trình đọc màn hình, điều hướng bàn phím, thứ tự focus — được xác định bởi chính Google Forms chứ không phải bất cứ điều gì bạn kiểm soát trên trang của mình. Một điều bạn có thể cải thiện từ phía mình là thêm một thuộc tính title mô tả vào thẻ iframe (ví dụ, title="Event registration form"), mà trình đọc màn hình sẽ thông báo trước khi vào nội dung nhúng. Để có cái nhìn rộng hơn về mức độ dễ tiếp cận của Google Forms ngay từ đầu, xem hướng dẫn của chúng tôi về khả năng tiếp cận của Google Forms.

Nhúng so với chỉ dẫn link ra ngoài

Nhúng giữ khách truy cập trên trang của bạn, khớp với thiết kế xung quanh của trang web của bạn, và có thể giảm tỷ lệ bỏ cuộc xảy ra khi ai đó bị chuyển hướng đến một domain xa lạ. Đây là lựa chọn tốt hơn cho form ngắn được đặt trên một trang riêng — như một form liên hệ hoặc widget phản hồi nhanh.

Dẫn link ra ngoài dễ thiết lập hơn (không cần điều chỉnh height), cho form bố cục đầy đủ, không bị giới hạn, và tránh cảm giác cuộn bên trong một hộp mà form dài hoặc nhiều phần có thể tạo ra trong một iframe chật chội. Nếu form của bạn dài, có tải file lên, hoặc dùng câu hỏi dạng lưới, dẫn link trực tiếp đến nó — xem hướng dẫn của chúng tôi về chia sẻ một Google Form — thường là trải nghiệm thoải mái hơn cho người trả lời.

Nhúng cho một form liên hệ

Nhúng đặc biệt phổ biến để biến một Google Form thành một form liên hệ miễn phí trên trang web doanh nghiệp hoặc portfolio — không cần backend, không cần thiết lập máy chủ email, và câu trả lời đến thẳng một Google Sheet bạn có thể kiểm tra bất cứ lúc nào. Nếu đó cụ thể là mục tiêu của bạn, hướng dẫn chuyên sâu của chúng tôi về dùng Google Forms làm form liên hệ cho website của bạn bao gồm lựa chọn trường và cài đặt giảm spam đáng thêm vào trên cơ sở nhúng cơ bản.

Câu hỏi thường gặp

Hướng dẫn liên quan

• Cách chia sẻ một Google Form
• Dùng Google Forms làm form liên hệ
• Cách tạo Google Form
• Nhúng một Google Form vào WordPress, chuyên sâu
• Hướng dẫn về khả năng tiếp cận của Google Forms