Thursday , December 5 2024

Hướng dẫn tích hợp Google Form vào web WordPress

Chào bạn, ở bài trước tôi đã hướng dẫn bạn cách sử dụng Google Biểu mẫu (Google Form) và bạn đã tạo ra được 1 form tương tư như của tôi dưới đây rồi

google form dang ky

Ngoài việc bạn chia sẻ link biểu mẫu cho người khác của bạn để thu thập thông tin thì bạn cũng có thể nhúng cái biểu mẫu đó vào nội dung của 1 website bất kỳ.

Tuy nhiên cách nhúng thông thường là sử dụng mã IFRAME, nếu bạn sử dụng website WordPress thì không nên dùng cách này, bởi nó sẽ làm cái form của bạn rất thiếu thẩm mỹ và có nhiều thông tin bạn không muốn hiển thị trên website của bạn.

Để tích hợp Google Form vào web WordPress theo cách của tôi thì bạn cần cài đặt và kích hoạt 2 plugin Drop Shadow Boxes và Google Forms.

Xem lại bài hướng dẫn cài đặt và kích hoạt plugin trong WordPress nếu bạn chưa biết hoặc đã quên cách làm.

Tiếp theo là bạn vào giao diện chỉnh sửa Google Biểu mẫu của bạn, do Google thay đổi giao diện mới cho Google Biểu mẫu nên khi nhúng vào website của bạn sẽ hiển thị xấu (mặc dù đã đỡ hơn so với nhúng bằng IFRAME).

Để khắc phục điều đó, bạn cần sử dụng phiên bản cũ của Google Biểu mẫu bằng cách click chuột vào biểu tượng dấu hỏi (?) ở góc dưới bên phải màn hình của bạn, sau đó chọn Quay lại Biểu mẫu cũ

chuyen giao dien google form

Ngay sau đó Biểu mẫu của bạn đã trở về giao diện cũ, bạn click vào Xem biểu mẫu trực tiếp để lấy link form

lay link google form

Sau đó bạn copy link trên thanh địa chỉ trình duyệt của bạn, dùng link này để nhúng vào website

copy url google form

Bây giờ, bạn cần tạo ra một trang mới với nội dung tùy ý bạn muốn, tôi thường làm nội dung cảm ơn. Sau khi người dùng nhập thông tin vào biểu mẫu thì chuyển hướng họ đến trang “Cảm ơn bạn đã đăng ký” với nội dung ví dụ như dưới đây:

cam on ban da dang ky

Nếu bạn dùng Visual Composer thì bạn hãy tạo thêm 1 Text Block.

Trên khung soạn thảo bạn chuyển sang tab Text để chỉnh sửa, sau đó bạn dán đoạn mã dưới đây vào vị trí nội dung cần hiển thị biểu mẫu

nhung form vao noi dung

Trong mã trên bạn cần lưu ý 2 thông tin là link_form và link_cam_on.

link_form: Bạn thay thế link biểu mẫu mà bạn đã copy ở trên.
link_cam_on: Bạn thay thế link trang cảm ơn mà bạn đã tạo ở trên.

Các thông số khác nếu bạn hiểu thì có thể tự thay thế, không thì hãy giữ nguyên nhé.

thay doi link form

Hãy nhớ là luôn sửa ở tab Text nhé, nếu không sẽ bị lỗi đó, liên quan đến nhúng là phải làm việc ở tab Text.

Cuối cùng là bạn lưu lại rồi truy cập trang để xem kết quả thôi.

form dang ky tren website

Chúc bạn thành công!

About Ngo Thang IT

Check Also

Hướng dẫn tạo mã CSR và Private Key trong PHP

Để tạo được chứng chỉ SSL chúng ta cần có CSR và Private Key, trong …

2 Bình luận

  1. Sao chỗ link đăng ký thành công đó làm giống hệt vậy mà ko chạy nhĩ. Trang đăng ký thành công đã tạo và chạy ok. Làm ơn chỉ mình với nhé

    • Nếu bạn làm đúng theo các bước hướng dẫn thì chắc chắn sẽ thành công, nếu không được bạn vui lòng cho mình xem bạn đã chèn code thế nào nhé.

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Đăng Ký Nhận Tin Qua Email

Nhận thông tin bổ ích về WordPress, Hosting, Thủ thuật website, Download miễn phí....và các phần quà hấp dẫn qua email.

* là bắt buộc